@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
background: #222;
font-family: "Press Start 2P", monospace;
font-smooth: never;
height: 98vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;    
}

.topUI {
position: absolute;
z-index: 1000;
transform: translate(-50%, 25px);
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
letter-spacing: 2px;
color: #fff;
font-size: 17px;
}
.topUI::before {
display: inline-block;
height: 17px;
padding: 1px 2px;
line-height: 19px;
font-size: 17px;
background: #fff;
text-shadow: none;
font-weight: 900;
letter-spacing: 0;
border-radius: 6px;
margin-right: 30px;
border: 2px solid #7dd8c9;
}
#time {
left: 13%;
color: #f4f430;
}
#time::before {
content: "ZAMAN";
color: #f57214;
}
#score {
left: 45%;
}
#score::before {
content: "SKOR";
color: #a61a9d;
}
#lap {
left: 88%;
width: 45%;
}
#lap::before {
content: "TUR";
color: #0082df;
}

#tacho {
position: absolute;
text-align: right;
width: 23%;
bottom: 5%;
z-index: 2000;
color: #e62e13;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
letter-spacing: 2px;
font-size: 23px;
}
#tacho::after {
content: "km/s";
color: #fab453;
font-size: 18px;
margin-left: 5px;
}

#game {
position: relative;
margin: 0 auto;
overflow: hidden;
background: #222;
user-select: none;
transition: opacity 10s;
}
#road {
transition: opacity 2s;
transition-timing-function: steps(8, end);
}
#road * {
position: absolute;
image-rendering: pixelated;
}
#hero {
background-repeat: no-repeat;
background-position: -110px 0;
z-index: 2000;
transform: scale(1.4);
}
#cloud {
background-size: auto 100%;
width: 100%;
height: 57%;
}

#road {
position: absolute;
width: 100%;
height: 100%;
}

#home {
position: absolute;
color: #fff;
width: 100%;
height: 100%;

z-index: 1000; 
}

#highscore {
position: absolute;
width: 100%;
height: 20%;
bottom: 0;
column-count: 3;
column-fill: auto;
}

#highscore * {
color: #9e95a8;
margin: 0 0 6px 27px;
}

h1 {
position: absolute;
left: 50%;
top: 25%;
width: 100%;
transform: translate(-50%, -50%);
font-size: 5em;
text-align: center;

background: -webkit-linear-gradient(#25d8b1, #e2bbf0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.2em;
color: #d9bbf3;
text-shadow: 0 0 black, 0 2px black, 2px 0 black, 0 0 black;
}

.blink {
animation: blinker 2s steps(4, end) infinite;
}
@keyframes blinker {
50% {
    opacity: 0;
}
}

#controls {
color: #868686;
font-size: 13px;
line-height: 13px;
margin: 10px;
text-align: center;
}
#controls > span {
margin-left: 20px;
}
#controls > span > span {
border: 2px solid #868686;
border-radius: 5px;
padding: 7px;
margin-right: 10px;
display: inline-block;
}
#controls > span:last-child > span {
transform: rotate(90deg);
}