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

* { box-sizing: border-box;}
  
:root {
--primary-color: rgb(50, 69, 104);
--select-color: rgb(255, 139, 30);
--success: rgb(15, 158, 2);
--danger: rgb(214, 23, 23);
}

h2{ position: fixed; bottom: 10px; left: 5px; z-index: 2; }
#favicon:hover { transform: scale(2);}
body {
    margin: 0;
    font-family: Akaya Telivigala, sans-serif;
    overflow: hidden;
    display: flex;
    justify-content: center;
    height: 100vh;
    background: #e8e8e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
.game-container {
    border: 1px solid black;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
    width: 530px;
    height: 750px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    user-select: none;
    margin-top: 100px;
    
}

.header {
background: var(--primary-color);
color: white;
font-family: Akaya Telivigala, sans-serif;
font-size: 24px;
text-shadow: 1px 2px 2px black;
letter-spacing: 2px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.card { margin: 5px auto 10px; height: 600px;}

/* Splash Page -------------------- */
input[type="radio"] {
opacity: 0;
width: 100%;
height: 75px;
position: relative;
top: -40px;
cursor: pointer;
z-index: 2;
}

.selection-container { position: relative; top: 65px;}

.radio-container {
width: 90%;
height: 75px;
margin: 25px;
cursor: pointer;
border: 2px solid black;
border-radius: 5px;
}

label {
position: relative;
top: 20px;
left: 20px;
font-size: 30px;
}

.selected-label { background: var(--select-color); color: white;}

.best-score {
position: relative;
top: -100px;
left: 330px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 18px;
max-width: fit-content;
}

.best-score span {margin: 0;}

.best-score span:last-child { font-size: 24px;}

.selection-footer {top: 134px;}

/* Game Page -------------------------- */
.height-240 {
height: 240px;
width: 100%;
}

.height-500 {
height: 500px;
width: 100%;
}

.item-container {
height: 552px;
overflow-y: scroll;
position: relative;
-ms-overflow-style: none;
}

.item-container::-webkit-scrollbar { display: none;}

.item {
display: flex;
align-items: baseline;
justify-content: space-between;
height: 80px;
margin: 0 50px;
user-select: none;
}

.finished > h1 { opacity: 0.5;}

.selected-item {
background: var(--select-color);
position: fixed;
top: 443px;
z-index: -1;
width: 529px;
height: 80px;
}

.item-footer,
.selection-footer {
width: 100%;
height: 90px;
background: rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.item-footer { top: 1px; }

button {
cursor: pointer;
height: 50px;
border-radius: 5px;
font-size: 25px;
font-family: Akaya Telivigala, sans-serif;
color: white;
border: none;
outline: none;
}

button:hover { filter: brightness(200%);}

button:active { transform: scale(0.99);}

.wrong,
.right { width: 40%;}

.wrong { background: var(--danger); margin-right: 25px;}

.right { background: var(--success);}

.start,
.play-again { width: 90%; background: var(--primary-color);}

/* Countdown Page ---------------------- */
.countdown {
margin-top: 45%;
font-size: 100px;
text-align: center;
user-select: none;
cursor: pointer;
}

/* Score Page ------------------------- */
.score-container {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.score-footer {
width: 100%;
height: 90px;
display: flex;
justify-content: center;
position: relative;
top: -30px;
}

.title { font-size: 45px;}

.final-time {
font-size: 100px;
margin: 0;
color: var(--success);
}

.base-time { margin-top: 100px; margin-bottom: 0;}

.penalty-time { color: var(--danger);}

/* Media Query: Laptop */
@media screen and (max-width: 1800px) {
.game-container { margin-top: 35px;}
.selected-item { top: 380px;}
}

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 500px) {
.game-container {
    width: 100%;
    margin-top: 0;
    border: none;
}
.selected-item { top: 345px;}
.header { font-size: 1.2rem;}
.countdown { margin-top: 60%;}
.selection-container { top: 100px;}
.radio-container { width: 93%; margin: 15px;}
label { font-size: 1.7rem;}
.best-score { font-size: 1rem; left: 245px;}
.selection-footer { top: 183px;}
}

/* Media Query: iPhone */
@media screen and (max-width: 376px) {
.best-score { left: 232px;}
}