* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
font-family: Times;
font-size:16px;
background-color:black;
color:white;
}
@keyframes spin { 
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.c {
position: absolute;
height: auto;
z-index: -3;
overflow: hidden;
animation: spin 30s linear infinite, glow-pulse 2.5s ease-in-out infinite;
image-rendering: pixelated;
}
img {
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none; 
-moz-user-select: none;  
-ms-user-select: none;
pointer-events: none; 
}
#c1 {
bottom: -33%;
left: -9%;
width: 41.6666666667%;
opacity: 0.75;
}
#c2 {
right: -45%;
width: 173.59375%;
opacity: 0.025;
}
#c3 {
top: -33%;
left: -33%;
width: 62.5%;
opacity: 0.6;
animation-duration: 15s;
}
#c4 {
bottom: 0;
right: 0;
width: 182.447916667%;
opacity: 0.045;
}
#c5 {
top: -25%;
left: -10%;
width: 29.4270833333%;
opacity: 0.2;
}
#c6 {
left: 33%;
bottom: 81%;
width: 47.03125%;
opacity: 0.7;
}
#c7 {
bottom: 41%;
right: -36%;
width: 62.5%;
opacity: 0.85;
animation-duration: 10s;
}
#c8 {
bottom: 45%;
left: 21%;
width: 47.03125%;
opacity: 0.1;
}
#c9 {
top: 63%;
left: 73%;
width: 900px;
opacity: 0.9;
}
#c10 {
top: 80%;
right: 0;
width: 31.25%;
opacity: 0.35;
}
#c11 {
top: 60%;
right: -20%;
width: 31.25%;
opacity: 0.95;
animation-duration: 12s;
}
#c12 {
left: -23%;
width: 52.5%;
opacity: 0.35;
}
@keyframes glow-pulse {
0%, 100% {
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}
50% {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}
}
.error {
width: auto;
left: 1%;
position: absolute;
height: 350px;
animation: scrolling linear 15s, scrollingtext infinite linear 15s, glow-pulse 2.5s ease-in-out infinite;
font-family: "Times";
font-style:italic;
font-size:16px;
line-height:0.7;
opacity: 0.8;
}
.kuro {
position:absolute;
bottom:0%;
left:30%;
z-index:99999;
pointer-events:none;
}
.mayura {
position:absolute;
bottom:0%;
left:55%;
height:670px;
z-index:99999;
pointer-events:none;
}
@keyframes scrolling {
from {
transform: translateY(300%);
}
to {
transform: translateY(-981%);
}
}
@keyframes scrollingtext {
from {
transform: translateY(0%);
}
to {
transform: translateY(-1181%);
}
}
.speech-box {
left:34%;
background-color:black;
color: #fff;
font-family: MS Gothic;
padding: 16px 16px;
min-width:430px;
min-height:220px;
max-width:430px;
max-height:220px;
position: absolute;
outline: 1px solid rgba(0, 0, 0, 1);    
outline-offset: -3px;                
box-shadow:
0 0 0 1px black,   
1px 1px 0 #000;         
z-index: 1;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black,
-1px 0px 0 black, 1px 0px 0 black,
-1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
border: 2px solid white;
border-radius:10px;
font-size:14px;
line-height:18px;
}
.speech-box2 {
top: 84%;
left:40%;
background-color:black;
color: #fff;
font-family: MS UI Gothic;
padding: 16px 16px;
min-width:290px;
min-height:95px;
max-width:290px;
max-height:95px;
position: absolute;
outline: 1px solid rgba(0, 0, 0, 1);    
outline-offset: -3px;                
box-shadow:
0 0 0 1px black,   
1px 1px 0 #000;         
z-index: 1;
text-shadow: -1px -1px 0 black, 0px -1px 0 black, 1px -1px 0 black,
-1px 0px 0 black, 1px 0px 0 black,
-1px 1px 0 black, 0px 1px 0 black, 1px 1px 0 black;
border: 2px solid white;
border-radius:10px;
font-size:14px;
}
a {
color:white;
font-size: 14px;
text-underline-offset: 2px;
}
a:visited {
color: white !important;
}
a:hover {
color: white !important;
}
@media (max-width: 768px) {
html, body {
overflow: hidden;
height: 100%;
touch-action: none;
}
.speech-box {
left: 10%;
bottom: 52%;
width: 70%;
min-width: auto; 
max-width: none;  
min-height: auto;  
max-height: none;  
}
.speech-box2 {
display:none;
}
.kuro, .mayura {
height: auto;
max-width: 67vw;
bottom: 0;
}
.kuro {
transform: translateX(-66%); 
}
.mayura {
transform: translateX(-18%);   
}
}