body{

margin:0;
font-family:monospace;
background:black;
color:#00ff9c;
overflow:hidden;

}

canvas{

position:fixed;
top:0;
left:0;
z-index:0;

}

.cyber-floor{

position:fixed;
bottom:0;
left:0;

width:200%;
height:60%;

background:
linear-gradient(#00ff9c33 1px, transparent 1px),
linear-gradient(90deg,#00ff9c33 1px, transparent 1px);

background-size:60px 60px;

transform-origin:bottom;
transform:perspective(600px) rotateX(65deg);

animation:floorMove 6s linear infinite;

z-index:1;

}

@keyframes floorMove{

0%{background-position:0 0;}
100%{background-position:0 60px;}

}

#scanner{

position:fixed;
top:0;
left:0;

width:100%;
height:3px;

background:#00ff9c;

animation:scan 3s infinite;

z-index:2;

}

@keyframes scan{

0%{top:0}
100%{top:100%}

}

.boot{

position:absolute;
top:40%;
width:100%;
text-align:center;
font-size:14px;

}

.hidden{
display:none;
}

.app{

position:absolute;
top:20%;
width:100%;
text-align:center;
z-index:3;

}

.title{

font-size:40px;

text-shadow:
0 0 10px #00ff9c,
0 0 30px #00ff9c;

animation:titleGlow 2s infinite alternate;

}

@keyframes titleGlow{

from{
text-shadow:0 0 10px #00ff9c;
}

to{
text-shadow:0 0 40px #00ff9c;
}

}

.access{

margin-top:10px;

}

.buttons{

margin-top:30px;

}

button{

display:block;

margin:15px auto;

padding:12px 30px;

font-size:16px;

background:black;

border:1px solid #00ff9c;

color:#00ff9c;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#00ff9c;

color:black;

box-shadow:
0 0 10px #00ff9c,
0 0 30px #00ff9c;

}

.ready{

margin-top:20px;

}

.logo3d{

width:120px;
height:120px;

margin:auto;

perspective:800px;

}

.cube{

width:100px;
height:100px;

position:relative;

transform-style:preserve-3d;

animation:rotate 10s infinite linear;

}

.cube div{

position:absolute;

width:100px;
height:100px;

border:2px solid #00ff9c;

display:flex;
align-items:center;
justify-content:center;

font-size:12px;

box-shadow:0 0 10px #00ff9c;

}

.cube div:nth-child(1){transform:rotateY(0deg) translateZ(50px);}
.cube div:nth-child(2){transform:rotateY(90deg) translateZ(50px);}
.cube div:nth-child(3){transform:rotateY(180deg) translateZ(50px);}
.cube div:nth-child(4){transform:rotateY(-90deg) translateZ(50px);}
.cube div:nth-child(5){transform:rotateX(90deg) translateZ(50px);}
.cube div:nth-child(6){transform:rotateX(-90deg) translateZ(50px);}

@keyframes rotate{

0%{transform:rotateX(0) rotateY(0)}
100%{transform:rotateX(360deg) rotateY(360deg)}

}