body{
font-family: 'VCR OSD Mono', sans-serif;
}

.scrollingbg{
font-family: 'VCR OSD Mono';
height: 100%;
background-color: black;
background-image: url('https://www.zerogenie.org/wp-content/uploads/2023/01/the-existential-wonder-of-space-the-atlantic.jpg');
background-size: 33%;
background-attachment: fixed;
background-position: center;
animation: scrollbackground 499999s linear infinite;
}

@keyframes scrollbackground{
0% {background-position: 0 0;}
100% {background-position: 999999% 999999%;}
}

.button{
display: flex;
position: relative;
cursor: pointer;
text-align: center;
align-items: center;
transition-duration: 0.2s;
background-color: #8c666ea2; 
width: 25%;
overflow-x: hidden;
height: 200px;
vertical-align: middle;
font-family: 'VCR OSD Mono';
line-height: 3vh;
border: solid;
border-width: 15px;
font-size: 3vh;
justify-content: center;
}

.button:hover{
cursor: pointer;
background-color: #ccc6c9;
border: solid;
border-width: 7.5px;
font-size: 3.2vh;
line-height: 3.2vh;
}

.speech_bubble{
display: flex;
width: 70%;
height: auto;
position: absolute;
left: calc(20% - 180px);
top: calc(7% - 90px);
}

.sprite{
width: 40%;
height:auto;
position: absolute;
right: calc(10% - 180px);
bottom: calc(4% - 90px);
}

.everything_lives_here{
display: flex;
width: auto;
height: 100%;
aspect-ratio: 14 / 9;
position:absolute;
right: 5%;
top:0px;
}

/* the typing animation was misused from: 
https://dev.to/afif/a-multi-line-css-only-typewriter-effect-3op3 */

.type {
font-family: 'VCR OSD Mono';
color:#0000;
background:
linear-gradient(-90deg,#292929 5px,#0000 0) 10px 0,
linear-gradient(#292929 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
animation: 
b .7s infinite steps(1),   
t calc(var(--n)*.05s) steps(var(--n)) forwards;
}

@keyframes t{
from {background-size:0 200%}
}

@keyframes b{
50% {background-position:0 -100%,0 0}
}