/*
(c) 2024 by praetoriani
https://github.com/praetoriani
*/

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');

.ubuntu-mono-regular {
font-family: "Ubuntu Mono", monospace;
font-weight: 400;
font-style: normal;
font-size: 18px;
}

.ubuntu-mono-bold {
font-family: "Ubuntu Mono", monospace;
font-weight: 700;
font-style: normal;
font-size: 18px;
}


html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #BEBEBE;
overflow: hidden;
cursor: none;
}

.SVGboxClass {
width: 44px;
height: 44px;
position: absolute;
top: calc((100% - 44px) / 2);
left: calc((100% - 44px) / 2);
justify-content: center;
align-items: center;
z-index: 1;
}

.SVGimgClass {
display: block;
width: 100%;
height: 100%;
fill: #303030;
opacity: 1;
animation-name: SVGfadeout;
animation-duration: 0.25s;
animation-iteration-count: 1;
animation-delay: 2.05s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}

.BlackOutDot {
display: flexbox;
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
position: absolute;
top: calc((100% - 48px) / 2);
left: calc((100% - 48px) / 2);
background-color: #303030;
z-index: 2;
border-radius: 25px;
opacity: 0;

animation-name: BODzoomin,BODtransform,BODblink,BODmorph,blurFadeOut;
animation-duration: 0.25s,0.4s,1.5s,0.8s,2s;
animation-iteration-count: 1,1,3,1,1;
animation-delay: 2s,2.1s,2.375s,6.5s,36s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}

.CurrentCMDprompt {
width: min-content;
height: 24px;
white-space: nowrap;
margin: 8px 0px 0px 0px;
padding: 0px 8px 0px 8px;
visibility: hidden;
overflow: hidden;
vertical-align: middle;
color: #FFFFFF;
border-right-color: rgba(255, 255, 255, 1.0);
border-right-style: solid;
border-right-width: 8px;
align-content: center;

animation-name: BlinkingCursor;
animation-duration: 0.9s;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;

}

.PassiveCMDprompt {
width: auto;
height: 24px;
white-space: nowrap;
margin: 8px 0px 0px 0px;
padding: 0px 8px 0px 8px;
visibility: hidden;
overflow: hidden;
vertical-align: middle;
border: none;
color: #FFFFFF;
}

.CheckMark {
font-family: "Ubuntu Mono", monospace;
font-weight: 700;
font-style: normal;
font-size: 18px;
color: #35d80d;
}

/* CSS ANIMATIONS BELOW THIS LINE */

@keyframes SVGfadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes BODzoomin {
0% {
width: 0px;
height: 0px;
top: calc((100% - 0px) / 2);
left: calc((100% - 0px) / 2);
opacity: 0;
}
100% {
width: 48px;
height: 48px;
top: calc((100% - 48px) / 2);
left: calc((100% - 48px) / 2);
opacity: 1;
}
}

@keyframes BODtransform {
0% {
border-radius: 25px;
width: 48px;
height: 48px;
background-color: #303030;
top: calc((100% - 48px) / 2);
left: calc((100% - 48px) / 2);
}
50% {
border-radius: 8px;
width: 48px;
height: 48px;
background-color: #303030;
top: calc((100% - 48px) / 2);
left: calc((100% - 48px) / 2);
}
100% {
border-radius: 0px;
width: 16px;
height: 24px;
background-color: #000000;
top: calc((100% - 24px) / 2);
left: calc((100% - 16px) / 2);
}
}

@keyframes BODblink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

@keyframes BODmorph {
0%   {
width: 16px; height: 24px;
top: calc((100% - 24px) / 2);
left: calc((100% - 16px) / 2);
opacity: 1;
}

10%   {
width: 16px; height: 16px;
top: calc((100% - 16px) / 2);
left: calc((100% - 16px) / 2);
opacity: 1;
}

20%   {
width: 8px; height: 8px;
top: calc((100% - 8px) / 2);
left: calc((100% - 8px) / 2);
opacity: 0.5;
}

30%   {
width: 4px; height: 4px;
top: calc((100% - 4px) / 2);
left: calc((100% - 4px) / 2);
opacity: 0.25;
}
40%   {
width: 0px; height: 0px;
top: calc((100% - 0px) / 2);
left: calc((100% - 0px) / 2);
opacity: 0;
}
50%   {
width: 16px; height: 16px;
top: calc((100% - 16px) / 2);
left: calc((100% - 16px) / 2);
width: 0px; height: 0px;
top: calc((100% - 0px) / 2);
left: calc((100% - 0px) / 2);
opacity: 0;
}
100% {
width: 100vw; height: 100vh;
top: 0;
left: 0;
opacity: 1;
}
}

@keyframes BlinkingCursor {
0%, 100% { border-right-color: rgba(255, 255, 255, 1.0); }
50% { border-right-color: rgba(255, 255, 255, 0.0); }
}

@keyframes blurFadeOut {
0% {
filter: blur(var(--value, 1rem)); --value: 0px;
filter: grayscale(0);
opacity: 1;
}

50% {
filter: blur(var(--value, 1rem)); --value: 8px;
filter: grayscale(1);
opacity: 1;
}

75% {
filter: blur(var(--value, 1rem)); --value: 16px;
filter: grayscale(1);
opacity: 1;
}

100% {
filter: blur(var(--value, 1rem)); --value: 20px;
filter: grayscale(1);
opacity: 0;
}

}