*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
height:100%;

cursor: url("sources/cursor/SKULL HAND BY ARIA.cur"), auto;
}
a:hover,
button:hover,
.press-to-start-container:hover {
  cursor: url("sources/cursor/Soyjak 1.cur"), pointer;
}

body{
background:black;
overflow:hidden;
}

.intro{
width:100vw;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:black;
overflow:hidden;
}

.intro-scene{
position:relative;
width:min(100vw, calc(100vh * 16 / 9));
aspect-ratio:16 / 9;
background:black;
overflow:hidden;
}

/* self parking */
.self-parking-container{
position:absolute;
top:-20%;
left:50%;
transform:translateX(-50%);
width:72%;
}

.self-parking{
width:100%;
height:auto;
display:block;
}

/* press to start */
.press-to-start-container{
position:absolute;
left:50%;
bottom:15%;
transform:translateX(-50%);
cursor:pointer;
transition:transform 0.2s ease;
}

.press-to-start{
width:clamp(180px, 22vw, 400px);
height:auto;
display:block;
animation:blink 1.4s infinite;
}

.press-to-start-container:hover{
transform:translateX(-50%) scale(1.05);
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}

/* CRT */
body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;

background: repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.05),
rgba(255,255,255,0.05) 1px,
transparent 1px,
transparent 3px
);
}

/* fade out animation */
.fade-out{
animation:fadeOut 0.8s forwards;
}

@keyframes fadeOut{
from{
opacity:1;
}

to{
opacity:0;
}
}