:root {
    --boxColor: #0ff7;
    --hexSideRotateSpeed: 13s;
    --rotateHexSpeed: 5s;
    --letterRotateSpeed: 1s;
}
html {
    color-scheme: dark light;
    
}

body{
    position: relative;
    background-color: rgb(189, 189, 189);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective-origin: 50% calc(50% - 8em);
    overflow-x: hidden;
    perspective: 45em;
}


#scene {
    display: flex;
    position: relative;
    transform-style: preserve-3d;
    /*animation: rotateScene 3s infinite ease-in-out alternate ;
    
}@keyframes rotateScene {
    from { transform: rotateY(34deg) rotateX(-34deg) rotateZ(34deg);}
    to { transform: rotateY(-34deg) rotateX(34deg) rotateZ(-34deg); }
*/}

.davalo {
    position: absolute;
    top: -10em;
    left: 0em;
    transform-style: preserve-3d;
    transform: translateX(-40em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    scale: 1;
    animation: moveCar 3s linear;
}@keyframes moveCar {
    0% { transform: rotateY(30deg) translateY(.5em)   translateX(100em)rotateX(0deg);}
    10% { transform: rotateY(30deg) translateY(-.5em)   translateX(95em)rotateX(-1deg);}
    20% { transform: rotateY(30deg) translateY(.5em)   translateX(85em)rotateX(1deg);}
    30% { transform: rotateY(30deg) translateY(-.5em)   translateX(60em)rotateX(-1deg);}
    40% { transform: rotateY(30deg) translateY(.5em)   translateX(30em)rotateX(1deg);}
    45% { transform: rotateY(30deg) translateY(-10em)   translateX(10em)rotateX(-1deg);}
    64% { transform: rotateY(20deg)translateY(2em)   translateX(-20em)rotateX(1deg);}
    80% { transform: rotateY(20deg)translateY(-.5em)   translateX(-30em)rotateX(-1deg);}
    90% { transform: rotateY(10deg)translateY(0em)   translateX(-35em)rotateX(1deg);}
    
   100% { transform: rotateY(0deg)translateY(0em)  translateX(-40em)rotateX(0deg);}
 
}
.theD {
    position: absolute;
    left:0;
    max-width: fit-content;
    transform-style: preserve-3d;
    transform: translateX(0em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: dPosition 3s linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}

/**/@keyframes dPosition {
    0% { transform: translateX(3em) translateY(3em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    60% { transform: translateX(3em) translateY(3em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    62% { transform: translateX(3em) translateY(3em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    64% { transform: translateX(3em) translateY(3em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    100% { transform: translateY(0em) translateX(0em)rotateX(0deg) rotateZ(0deg) rotateY(0deg);}
}

.theA {
    position: absolute;
    left:10;
    transform-style: preserve-3d;
    transform: translateX(10em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: aPosition 3s linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}
.theA:hover {
   
    transform: translateX(10em) rotateY(30deg);
/**/}
@keyframes aPosition {
    0% { transform: translateX(0em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    60% { transform: translateX(0em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    62% { transform: translateX(0em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    64% { transform: translateX(0em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    100% { transform: translateX(10em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg) ;}
}
.theV {
    position: absolute;
    left:0;
    transform-style: preserve-3d;
    transform: translateX(20em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: vPosition 3s linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}
.theV:hover {
   
    transform: translateX(20em) rotateY(-30deg);
/**/}
@keyframes vPosition {
    0% { transform:  translateX(13em) translateY(-2em) rotateY(0deg) rotateX(0deg) rotateZ(90deg);}
    60% { transform: translateX(13em) translateY(-2em) rotateY(0deg) rotateX(0deg) rotateZ(90deg);}
    62% { transform: translateX(13em) translateY(-2em) rotateY(0deg) rotateX(0deg) rotateZ(90deg);}
    64% { transform:  translateX(13em) translateY(-2em) rotateY(0deg) rotateX(0deg) rotateZ(90deg);}
    100% { transform: translateX(20em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
}
.theAA {
    position: absolute;
    left:0;
    transform-style: preserve-3d;
    transform: translateX(30em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: aaPosition 3s linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}
.theAA:hover {
   
    transform: translateX(30em) rotateY(30deg);
/**/}
@keyframes aaPosition {
    0% { transform:  translateX(5em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    60% { transform:  translateX(5em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    62% { transform: translateX(5em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    64% { transform:  translateX(5em) translateY(10em) rotateY(0deg) rotateX(0deg) rotateZ(-90deg);}
    100% { transform: translateX(30em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
}
.theL {
    position: absolute;
    left:0;
    transform-style: preserve-3d;
    transform: translateX(40em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: lPosition 3s linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}
.theL:hover {
   
    transform: translateX(40em) rotateY(-30deg);
/**/}
@keyframes lPosition {
    0% { transform: translateX(18.2em) translateY(-1em) rotateY(0deg) rotateX(0deg) rotateZ(90deg) ;}
    60% { transform: translateX(18.2em) translateY(-1em) rotateY(0deg) rotateX(0deg) rotateZ(90deg) ;}
    61% { transform: translateX(18.2em) translateY(-1em) rotateY(0deg) rotateX(0deg) rotateZ(90deg) ;}
    75% { transform: translateX(32em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(90deg) ;}
    100% { transform: translateX(40em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
}

.theO {
    position: absolute;
    left:0;
    transform-style: preserve-3d;
    transform: translateX(50em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    animation: oPosition  3s  linear ;
    transition: var(--letterRotateSpeed) ease-in-out;
}
.theO:hover {
   
    transform: translateX(50em) rotateY(30deg);
/**/}
@keyframes oPosition {
    0% { transform: translateX(6.7em) translateY(-11em) translateZ(0em) rotateY(0deg) rotateX(0deg) ;}
    60% { transform: translateX(6.7em) translateY(-11em) translateZ(0em) rotateY(0deg) rotateX(0deg) ;}
    61% { transform: translateX(6.7em) translateY(-11em) translateZ(0em) rotateY(0deg) rotateX(0deg) ;}
    62% { transform: translateX(6.7em) translateY(-11em) translateZ(0em) rotateY(0deg) rotateX(0deg) ; ;}
    100% { transform: translateX(50em) translateY(0em) rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
}
.d {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.d1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.d2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.d3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.d4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.d5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.d6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.d7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.d8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.d9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.d10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.d11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.d12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.d13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.d14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.d15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.d16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.d17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.d18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.d19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.d20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.d21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.d22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.d23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.d24 {
    color: blueviolet;
    transform: translateZ(.24em);
}

.a {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.a1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.a2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.a3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.a4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.a5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.a6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.a7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.a8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.a9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.a10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.a11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.a12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.a13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.a14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.a15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.a16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.a17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.a18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.a19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.a20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.a21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.a22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.a23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.a24 {
    color: blueviolet;
    transform: translateZ(.24em);
}

.v {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.v1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.v2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.v3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.v4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.v5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.v6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.v7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.v8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.v9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.v10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.v11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.v12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.v13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.v14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.v15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.v16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.v17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.v18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.v19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.v20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.v21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.v22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.v23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.v24 {
    color: blueviolet;
    transform: translateZ(.24em);
}

.aa {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.aa1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.aa2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.aa3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.aa4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.aa5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.aa6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.aa7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.aa8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.aa9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.aa10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.aa11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.aa12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.aa13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.aa14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.aa15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.aa16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.aa17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.aa18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.aa19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.aa20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.aa21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.aa22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.aa23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.aa24 {
    color: blueviolet;
    transform: translateZ(.24em);
}

.l {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.l1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.l2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.l3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.l4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.l5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.l6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.l7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.l8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.l9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.l10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.l11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.l12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.l13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.l14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.l15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.l16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.l17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.l18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.l19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.l20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.l21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.l22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.l23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.l24 {
    color: blueviolet;
    transform: translateZ(.24em);
}

.o {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15em;
    font-weight: 900;
    transform-style: preserve-3d;
    top: 0em;
    left: 0em;
    scale: 1;
}
.o1 {
    color: rgba(138, 43, 226, .25);
    transform: translateZ(.01em);
}
.o2 {
    color: rgb(75, 75, 75);
    transform: translateZ(.02em);
}
.o3 {
    color: rgb(80, 80, 80);
    transform: translateZ(.03em);
}
.o4 {
    color: rgb(85, 85, 85);
    transform: translateZ(.04em);
}
.o5 {
    color: rgb(90, 90, 90);
    transform: translateZ(.05em);
}
.o6 {
    color: rgb(95, 95, 95);
    transform: translateZ(.06em);
}
.o7 {
    color: rgb(100, 100, 100);
    transform: translateZ(.07em);
}
.o8 {
    color: rgb(105, 105, 105);
    transform: translateZ(.08em);
}
.o9 {
    color: rgb(110, 110, 110);
    transform: translateZ(.09em);
}
.o10 {
    color: rgb(115, 115, 115);
    transform: translateZ(.10em);
}
.o11 {
    color: rgb(120, 120, 120);
    transform: translateZ(.11em);
}
.o12 {
    color: rgb(125, 125, 125);
    transform: translateZ(.12em);
}
.o13 {
    color: rgb(130, 130, 130);
    transform: translateZ(.13em);
}
.o14 {
    color: rgb(135, 135, 135);
    transform: translateZ(.14em);
}
.o15 {
    color: rgb(140, 140, 140);
    transform: translateZ(.15em);
}
.o16 {
    color: rgb(145, 145, 145);
    transform: translateZ(.16em);
}
.o17 {
    color: rgb(150, 150, 150);
    transform: translateZ(.17em);
}
.o18 {
    color: rgb(153, 153, 153);
    transform: translateZ(.18em);
}
.o19 {
    color: rgb(155, 155, 155);
    transform: translateZ(.19em);
}
.o20 {
    color: rgb(156, 156, 156);
    transform: translateZ(.20em);
}
.o21 {
    color: rgb(157, 157, 157);
    transform: translateZ(.21em);
}
.o22 {
    color: rgb(158, 158, 158);
    transform: translateZ(.22em);
}
.o23 {
    color: rgb(159, 159, 159);
    transform: translateZ(.23em);
}
.o24 {
    color: blueviolet;
    transform: translateZ(.24em);
}
/*.earth{
    position: absolute;
    transform-style: preserve-3d;
    top: 21vh;
    transform: translate(-50%, -50%) rotateX(90deg);
    width: 89em;
    height: 89em;
    background-image:  radial-gradient(#0000, #000 64%), repeating-conic-gradient(from 0deg, aquamarine 0deg 45deg, blue 45deg 90deg);
    background-size: 100%, 1em 1em;
    border-radius: 50%;
}  */


    /*animation: rotateHex var(--rotateHexSpeed) infinite linear;
}@keyframes rotateHex {
    to {transform: translateX(0em) rotateY(360deg);}
*/
@font-face {
    src: url("/fonts/Melodice.ttf");
    font-family: Dfont;
}