body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
	animation: fadein 1s forwards;
    -moz-animation: fadein 1s forwards; /* Firefox */
    -webkit-animation: fadein 1s forwards; /* Safari and Chrome */
    -o-animation: fadein 1s forwards; /* Opera */
	animation-delay: 0s;
}

#fadein {

    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
		background-color: #1f1f1f;
    }
    to {
        opacity:1;
		background: #000;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
		background-color: #1f1f1f;
    }
    to {
        opacity:1;
		background: #000;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
		background-color: #1f1f1f;
    }
    to {
        opacity:1;
		background: #000;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
		background-color: #1f1f1f;
    }
    to {
        opacity: 1;
		background: #000;
    }
}

html,
body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    border: 0 0 0 0;
    padding: 0 0 0 0;
}

:root {
    --t-height: calc(50vh);
    --t-width: calc(2.166666 * var(--t-height));
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 100%;
}

.rectangle {
    background-color: pink;
    width: 100vw;
    height: calc(100vw * 9 / 19.5);
    max-width: 1000px;
    max-height: calc(1000px * 9 / 19.5);
    position: relative;
}

.hint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: none;
    /* Initially hidden */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Ensuring it's above everything else */
    opacity: 1;
    /* Fully visible by default */
    transition: opacity 0.5s;
    /* 0.5s fade effect */
}


/* width */
::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.tv {
    background-color: rgb(0, 0, 0);
    width: calc(1 * var(--t-width));
    height: calc(1 * var(--t-height));
    position: relative;
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
    max-height: 461.53px;
}

.Ellipse_1 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    left: calc(0.01 * var(--t-height));
    top: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_2 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    left: calc(0.01 * var(--t-height));
    bottom: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_3 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    right: calc(0.01 * var(--t-height));
    bottom: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_4 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    right: calc(0.01 * var(--t-height));
    top: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_5 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    left: calc(0.01 * var(--t-height));
    top: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_6 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    left: calc(0.01 * var(--t-height));
    bottom: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_7 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    right: calc(0.01 * var(--t-height));
    bottom: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}

.Ellipse_8 {
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    right: calc(0.01 * var(--t-height));
    top: calc(0.01 * var(--t-height));
    width: calc(0.007 * var(--t-width));
    height: calc(0.015 * var(--t-height));
    z-index: 6;
    position: absolute;
}


.rightbase {
    border-radius: calc(0.02 * var(--t-height));
    background-image: url(images/controls.jpg);
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc(0.2492 * var(--t-height));
    height: calc(1 * var(--t-height));
    z-index: -9;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.button {
    background-size: 100% 100%;
    position: absolute;
    right: calc(0.0392 * var(--t-height));
    width: 69%;
    height: 17.81%;
    z-index: -8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.off {
    background-image: url(images/button_01.png);
    top: calc(0.0689 * var(--t-height));
}

.loc {
    background-image: url(images/button_04.png);
    top: calc(0.2974 * var(--t-height));
}

.hin {
    background-image: url(images/button_10.png);
    top: calc(0.52553 * var(--t-height));
}

.home {
    background-image: url(images/button_07.png);
    top: calc(0.7509 * var(--t-height));
}




.leftbase {
    border-radius: calc(0.02 * var(--t-height));
    background-image: url(images/leftbase.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 88.5%;
    height: calc(1 * var(--t-height));
    z-index: -9;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.outerframe {
    border-radius: calc(0.05 * var(--t-height));
    background-image: url(images/outerterm.jpg);
    background-size: 100% 100%;
    position: absolute;
    width: calc(0.872 * var(--t-width));
    height: calc(0.97 * var(--t-height));
    z-index: -8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.innerframe {
    border-radius: calc(0.055 * var(--t-height));
    background-image: url(images/innerterm.jpg);
    background-size: 100% 100%;
    background-color: #222222;
    position: absolute;
    width: calc(0.842 * var(--t-width));
    height: calc(0.91 * var(--t-height));
    z-index: -7;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.ambient {
    pointer-events: none;
    background-color: green;
    opacity: 0.2;
    font-size: calc(0.03 * var(--t-width));
    position: absolute;
    width: calc(0.842 * var(--t-width));
    height: calc(0.91 * var(--t-height));
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto;
    display: block;
}



.screenOVER {

    position: absolute;
    width: calc(0.822 * var(--t-width));
    height: calc(0.87 * var(--t-height));
    margin: auto;
    background-image: url(images/screenOVER.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    pointer-events: none;

}

.terminallock {

    background-image: radial-gradient(#25773f 15%, #08230d);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: calc(0.818 * var(--t-width));
    height: calc(0.86 * var(--t-height));
    border-radius: calc(0.04 * var(--t-height));
    margin: auto;
    position: absolute;

    z-index: 6;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}




.dvdholder {
    background-image: radial-gradient(#25773f 15%, #08230d);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: calc(0.818 * var(--t-width));
    height: calc(0.86 * var(--t-height));
    border-radius: calc(0.04 * var(--t-height));
    margin: auto;
    position: absolute;
    display: none;
    /*SCRIPT TO CHANGE DISPLAY AFTER SCREEN INACTIVITY FOR 1 MINUTE AND BACK AFTER ACTIVITY*/
    z-index: 7;
}

.dvd {
    position: absolute;
    width: calc(var(--t-height)/6.5);
    fill: #39FF14;
    height: calc(var(--t-height)/8);
    animation: slideVert 7s linear alternate infinite, slideHori 15s linear alternate infinite;
    -webkit-animation: slideVert 7s linear alternate infinite, slideHori 15s linear alternate infinite;
    filter:
        blur(calc(0.003 * var(--t-height))) drop-shadow(0 0 calc(0.000001 * var(--t-width)) #c3ef8f) drop-shadow(calc(0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) blue) drop-shadow(calc(-0.000001 * var(--t-width)) calc(-0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) rgb(255, 0, 0, 0.5));
    display: none;


}


.logo {

    position: absolute;
    width: calc(var(--t-height)/2);
    fill: #2bb910;
    height: auto;
    filter:
        blur(calc(0.003 * var(--t-height))) drop-shadow(0 0 calc(0.000001 * var(--t-width)) #c3ef8f) drop-shadow(calc(0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) blue) drop-shadow(calc(-0.000001 * var(--t-width)) calc(-0.000001 * var(--t-width)) calc(0.000001 * var(--t-width)) rgb(255, 0, 0, 0.5));
    -webkit-animation: flip 5s, blur 30ms infinite;
    animation: flip 5s, blur 30ms infinite;
    animation-delay: 5.5s;
    opacity: 0;
    animation-fill-mode: forwards;


}

.dvdback {
    position: absolute;
    width: calc(var(--t-height)/6.5);
    fill: color: rgba(0, 0, 0, 0);
    height: calc(var(--t-height)/8);
    animation: slideVert 7s linear alternate infinite, slideHori 15s linear alternate infinite;
    -webkit-animation: slideVert 7s linear alternate infinite, slideHori 15s linear alternate infinite;
    filter:
        blur(calc(0.003 * var(--t-height))) drop-shadow(0 0 calc(0.075 * var(--t-height)) #39FF14) drop-shadow(0 0 calc(0.0375 * var(--t-height)) #39FF14) drop-shadow(0 0 calc(0.0375 * var(--t-height)) #39FF14);
    opacity: 0.5;
    display: none;
}

@keyframes slideVert {
    from {
        top: 0px;
    }

    to {
        top: calc(100% - calc(var(--t-height)/8));
    }
}

@keyframes slideHori {
    from {
        left: 0;
    }

    to {
        left: calc(100% - calc(var(--t-height)/6.5));
    }
}

@keyframes colorChange {
    0% {
        fill: #ff2400;
    }

    11.11% {
        fill: #e81d1d;
    }

    22.22% {
        fill: #e8b71d;
    }

    33.33% {
        fill: #e3e81d;
    }

    44.44% {
        fill: #1de840;
    }

    55.55% {
        fill: #1ddde8;
    }

    66.66% {
        fill: #2b1de8;
    }

    77.77% {
        fill: #dd00f3;
    }

    88.88% {
        fill: #dd00f3;
    }

    100% {
        fill: #ff2400;
    }
}


.CRT {
    position: absolute;
    width: calc(0.818 * var(--t-width));
    height: calc(0.86 * var(--t-height));
    border-radius: calc(0.04 * var(--t-height));
    margin: auto;
    content: " ";
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 6;
    background-size: 100% calc(0.0041 * var(--t-width)), calc(0.0052 * var(--t-width)) 100%;
    pointer-events: none;

}

.screen {

    position: relative;
    width: calc(0.818 * var(--t-width));
    height: calc(0.86 * var(--t-height));
    border-radius: calc(0.04 * var(--t-height));
    margin: auto;
    background-image: radial-gradient(#25773f 15%, #08230d);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: 'Share Tech Mono';
    text-transform: uppercase;
    font-weight: 400;
    -webkit-animation: blinkin 5s;
    animation: blinkin 5s;

    text-shadow:
        0 0 calc(0.001 * var(--t-width)) #c3ef8f,
        calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) blue,
        calc(-0.001 * var(--t-width)) calc(-0.001 * var(--t-width)) calc(0.001 * var(--t-width)) red;

}





.use-keyboard-input {
    color: #39FF14;
    position: relative;
    /* top: 200px; */
    margin-top: calc(0.03 * var(--t-width));

    font-size: calc(0.03 * var(--t-width));
    font-family: 'Share Tech Mono';
    text-transform: uppercase;
    left: 0;
    width: 300px;
    height: 50px;
    z-index: 2 !important;
    pointer-events: auto !important;
    text-shadow:
        0 0 calc(0.001 * var(--t-width)) #c3ef8f,
        calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) blue,
        calc(-0.001 * var(--t-width)) calc(-0.001 * var(--t-width)) calc(0.001 * var(--t-width)) red;
    caret-shape: block;

}

input.use-keyboard-input {
    background-color: rgba(0, 0, 0, 0);
	font-size:150%;
    border: solid rgb(79 177 61);
    border-width: calc(0.008* var(--t-height));
    border-radius: calc(0.01* var(--t-height));
    outline: none;
    caret-color: rgba(195, 239, 143, 0);
    width: 50%;
    height: 20%;
    text-align: center;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #fff;
}


input.use-keyboard-input:focus {
    background-color: rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: calc(0.005* var(--t-width));
    border-color: rgba(195, 239, 143, 0.5);
    border-radius: calc(0.005* var(--t-width));
    outline: none;
    caret-color: rgba(195, 239, 143, 1);
}


.backscreen {
    position: absolute;
    width: calc(0.825 * var(--t-width));
    height: calc(0.875 * var(--t-height));
    margin: auto;
    z-index: -2;



}


.backscreen input {
    filter: blur(calc(0.003 * var(--t-height))) drop-shadow(0 0 calc(0.075 * var(--t-height)) #39FF14) drop-shadow(0 0 calc(0.0375 * var(--t-height)) #39FF14) drop-shadow(0 0 calc(0.0375 * var(--t-height)) #39FF14);
    opacity: 0.5;
    color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(57, 255, 20, 1);
}






.content {
    width: 100%;
    height: 100%;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Share Tech Mono';
    text-transform: uppercase;
    font-weight: 400;
    overflow-y: scroll;
    overflow-x: hidden;

}

.shown {
    padding: calc(0.02 * var(--t-width));
}

.hidden {
    position: absolute;
    padding: calc(0.0315 * var(--t-width));
    pointer-events: none;
    /* make it non-interactive */
}

.loadingText {
    color: #39ff14;
    font-size: calc(0.03 * var(--t-width));
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 1.3em;
    margin: auto;
    z-index: 2;
    text-align: center;
    max-height: 100%;
    max-width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    filter: blur(calc(0.007 * var(--t-height)));
    -webkit-animation: blur 30ms infinite;
    animation: blur 30ms infinite;

    display: block;
    /*SCRIPT TO CHANGE DISPLAY AFTER SCREEN INACTIVITY FOR 1 MINUTE AND BACK AFTER ACTIVITY*/
}


.loadingText2 {
    pointer-events: none;
    /* make it non-interactive */
    overflow-y: scroll;
    overflow-x: hidden;
    color: rgba(0, 0, 0, 0);
    font-size: calc(0.03 * var(--t-width));
    position: absolute;
    top: calc(-0.0175 * var(--t-height));
    left: calc(-0.0085 * var(--t-width));
    text-align: center;
    width: calc(0.842 * var(--t-width));
    height: calc(0.91 * var(--t-height));

    /*width: calc(0.825 * var(--t-width));
  height: calc(0.875 * var(--t-height));*/
    line-height: 1.3em;
    /*padding:calc(0.02 * var(--t-width));*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto;
    display: block;
    /*SCRIPT TO CHANGE DISPLAY AFTER SCREEN INACTIVITY FOR 1 MINUTE AND BACK AFTER ACTIVITY*/
}

#loading {
    z-index: 2;

}

::-moz-selection {
    background: rgba(195, 239, 143, 0.5);
    color: #fff;

}

::selection {
    background: rgba(195, 239, 143, 0.5);
    color: #fff;

}

/*calc(0.075 * var(--t-height)) = 60
calc(0.0375 * var(--t-height)) = 30
calc(0.002 * var(--t-height)) = 1
calc(0.0062 * var(--t-height)) =3
--t-height*/

#glow {
    text-shadow: 0 0 calc(0.05 * var(--t-height)) #39FF14, calc(-0.1 * var(--t-height)) 0 calc(0.05 * var(--t-height)) #39FF14, calc(0.1 * var(--t-height)) 0 calc(0.05 * var(--t-height)) #39FF14;
    z-index: -2;
    opacity: 0.8;
}




@-webkit-keyframes blinkin {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
    }

    40% {
        opacity: 0.8;
    }

    45% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    55% {
        opacity: 0;
    }

    70% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blinkin {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
    }

    40% {
        opacity: 0.8;
    }

    45% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    55% {
        opacity: 0;
    }

    70% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }

}



@-webkit-keyframes blur {
    0% {
        filter: blur(0.03em);
        opacity: 0.85;
    }

    50% {
        filter: blur(0.03em);
        opacity: 1;
    }

    100% {
        filter: blur(0.03em);
        opacity: 0.85;
    }
}

@keyframes blur {
    0% {
        filter: blur(0.03em);
        opacity: 0.85;
    }

    50% {
        filter: blur(0.03em);
        opacity: 1;
    }

    100% {
        filter: blur(0.03em);
        opacity: 0.85;
    }

}


@-webkit-keyframes blurk {
    0% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 0.85;
    }

    50% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 1;
    }

    100% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 0.85;
    }
}

@keyframes blurk {
    0% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 0.9;
    }

    50% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 1;
    }

    100% {
        filter: blur(calc(0.0018 * var(--t-height)));
        opacity: 0.9;
    }
}

@keyframes flip {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    1% {
        transform: rotateY(90deg);
        opacity: 0.6;
    }

    25% {
        transform: rotateY(180deg);
        opacity: 0.6;
    }

    75% {
        transform: rotateY(360deg);
        opacity: 0.6;
    }

    99% {
        transform: rotateY(270deg);
        opacity: 0.6;
    }

    100% {
        transform: rotateY(270deg);
        opacity: 0;
        display: none;
    }
}




.keyboard {
    position: absolute;
    width: calc(0.818 * var(--t-width));
    height: calc(0.86 * var(--t-height));
    border-radius: calc(0.04 * var(--t-height));
    margin: auto;
    user-select: none;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: bottom 0.4s;
    background-image: radial-gradient(rgba(20, 56, 31, 0.5) 15%, rgba(8, 35, 13, 0.5));
    filter: blur(calc(0.0018 * var(--t-height)));
    -webkit-animation: blurk 30ms infinite;
    animation: blurk 30ms infinite;
}

.keyboard__input-preview {
    background: rgb(225 255 222 / 30%);
    color: #d9ffd7;
    padding-top: 1.3%;
    width: 90%;
    margin: calc(0.00255 * var(--t-height)) auto;
    border-radius: calc(0.00101 * var(--t-height));
    top: 3%;
    font-size: calc(0.05 * var(--t-width));
    height: calc(0.115 * var(--t-height));
    overflow: hidden;
    text-align: center;
}




.keyboard--hidden {
    bottom: -150%;
}

.keyboard__keys {
    text-align: center;
}

.keyboard__key {
    height: calc(0.115 * var(--t-height));
    width: calc(0.115 * var(--t-height));
    margin: calc(0.0076 * var(--t-height));
    border-radius: calc(0.0076 * var(--t-height));
    border: none;
    background: rgb(225 255 222 / 30%);
    color: #d9ffd7;
    font-size: calc(0.05 * var(--t-height));
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.keyboard__key:active {
    background: rgba(255, 255, 255, 0.12);
}

.material-icons {
    font-size: calc(0.05 * var(--t-height)) !important;
}

.keyboard__key--wide {
    width: 12%;
}

.keyboard__key--extra-wide {
    width: 36%;
}

.keyboard__key--activatable::after {
    content: '';
    top: calc(0.00255 * var(--t-height));
    right: calc(0.00255 * var(--t-height));
    position: absolute;
    width: calc(0.00204 * var(--t-height));
    height: calc(0.00204 * var(--t-height));
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

.keyboard__key--active::after {
    background: #08ff00;
}

.keyboard__key--dark {
    background: rgba(0, 0, 0, 0.25);
}


@media only screen and (max-width: 580px) {
    body:root {
        --t-height: calc(100vh) !important;
        --t-width: calc(2.166666 * var(--t-height));
    }
}
					 
.logo{
	filter:  drop-shadow (0 0 calc(0.001 * var(--t-width)) #c3ef8f, calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) calc(0.001 * var(--t-width)) blue, calc(-0.001 * var(--t-width)) calc(-0.001 * var(--t-width)) calc(0.001 * var(--t-width)) red);
}