@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

html, body {
margin: 0;
overflow: hidden;
height: 100%;
width: 100%;
position: relative;
font-family: 'Audiowide', cursive;
}

#container {
width: 100%;
height: 100%;
}
#container #skor {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
font-size: 10vh;
transition: transform 0.5s ease;
color: #282836;
transform: translatey(-200px) scale(1);
}
#container #oyun {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#container .oyun-bitti {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#container .oyun-bitti * {
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: 0;
transform: translatey(-50px);
color: #333344;
}
#container .oyun-bitti h2 {
margin: 0;
padding: 0;
font-size: 40px;
}
#container .hazir {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
#container .hazir #basla-buton {
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: 0;
transform: translatey(-50px);
border: 3px solid #333344;
padding: 10px 20px;
background-color: transparent;
color: #333344;
font-size: 30px;
text-decoration: none;
}
#container #talimatlar {
position: absolute;
width: 100%;
top: 16vh;
left: 0;
text-align: center;
transition: opacity 0.5s ease, transform 0.5s ease;
opacity: 0;
}
#container #talimatlar.gizle {
opacity: 0 !important;
}
#container.oynaniyor #skor, #container.sifirlaniyor #skor {
transform: translatey(0px) scale(1);
}
#container.oynaniyor #talimatlar {
opacity: 1;
}
#container.hazir .hazir #basla-buton {
opacity: 1;
transform: translatey(0);
}
#container.bitti #skor {
transform: translatey(6vh) scale(1.5);
}
#container.bitti .oyun-bitti * {
opacity: 1;
transform: translatey(0);
}
#container.bitti .oyun-bitti p {
transition-delay: 0.3s;
}