/* ================= BODY ================= */

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(135deg,#51EFF0,#D8BAF6);
}

/* ================= HOME PAGE ================= */

#homePage{

     h1{
    margin-bottom:80px;
    font-size:80px;
    font-weight:bold;
    color:white;
    text-shadow:3px 3px 8px black;
}
h2:nth-of-type(1){
     margin-bottom:20px;
    font-size:50px;
    color:#FFD700;
    font-weight:bold;
}

h2:nth-of-type(2){
     margin-bottom:20px;
    font-size:36px;
    color:#00FFFF;
    font-weight:bold;
}
.members h3{
    margin-bottom:20px;
    font-size:28px;
    color:#FFFF66;
}

.members li{
    margin-bottom:20px;
    font-size:22px;
    color:white;
    list-style:none;
}
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:linear-gradient(135deg,#4B0082,#8A2BE2,#FF1493);

    color:white;
}

.members{
    margin:20px 0;
}

.members ul{
    list-style:none;
}

/* ================= GAME PAGE ================= */
h1{
     margin-bottom:20px;
    font-size:50px;

}

#gamePage{
    display:none;
    min-height:100vh;
    padding:30px;
    text-align:center;

    background:linear-gradient(135deg,#51EFF0,#D8BAF6);
}

#logo{
    width:300px;
    height:300px;
    object-fit:contain;

    display:block;
    margin:25px auto;

    background:white;
    border:6px solid #ff4d6d;
    border-radius:20px;

    box-shadow:0 0 20px rgba(0,0,0,.25);
}

/* ================= BUTTON GROUP ================= */

.topButtons,
.navigation{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:20px;
}

/* ================= NORMAL BUTTONS ================= */

button{

    padding:12px 25px;

    border:none;

    border-radius:10px;

    font-size:30px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

/* GO */

.goBtn{

    background:#00e676;
    color:white;
    font-size:30px;

}

.goBtn:hover{

    background:#00c853;
    transform:scale(1.05);

}

/* START */

#startBtn{

    background:#4CAF50;
    color:white;

}

/* STOP */

#stopBtn{

    background:#f44336;
    color:white;

}

/* RESTART */

.topButtons button:nth-child(3){

    background:#ff9800;
    color:white;

}

/* PREVIOUS */

.navigation button:first-child{

    background:#2196F3;
    color:white;

}

/* NEXT */

.navigation button:last-child{

    background:#9C27B0;
    color:white;

}

button:hover{

    transform:scale(1.05);

    box-shadow:0 0 15px rgba(0,0,0,.3);

}

/* ================= OPTIONS ================= */

#options{

    width:55%;

    margin:30px auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.optionBtn{

    background:white;

    color:black;

    border:5px solid #00BCD4;

    border-radius:12px;

    padding:15px;

    font-size:30px;

    font-weight:bold;

}

.optionBtn:hover{

    background:#8df3f3;

}

.correct{

    background:#28a745 !important;

    color:white !important;

}

.wrong{

    background:#dc3545 !important;

    color:white !important;

}

/* ================= SCORE ================= */

#score{
h2 {
    font-size: 50%;
}

    color:#e91e63;

    font-size:35px;


}

/* ================= TIMER ================= */

#timer{

    color:#ff1744;

    font-size:40px;

    font-weight:bold;


}

/* ================= MOBILE ================= */

@media(max-width:768px){

#options{

grid-template-columns:1fr;

}

#logo{

width:150px;
height:150px;

}

}