*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-image: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
    scroll-behavior: smooth;
}
#container{
    width: 100%;
    padding: 4em 0.4em;
    background-color: white;
    display: flex;
    justify-content: space-around;
}
#container div {
    width: 40%;
}
#container div h2{
    font-size:7em;
    color: rgba(24, 45, 236, 0.897);
}
#container div h2 P{
    font-size:2em;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.box{
    padding: 2.6em 1em;
    width: 65%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap:10px;
    backdrop-filter: blur(14px);
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
    scroll-behavior: smooth;
}
.option{
    display: flex;
    flex-direction: row;
    gap:10px;
}
.btns{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.btns button{
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background-color: rgba(32, 53, 238, 0.897);
    color: white;
}
.optionvalues{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap:10px;
}
.optionvalues p{
    text-align: justify;
    margin-top: 6px;
}
#time{
    align-self:flex-end;
    color: rgba(32, 53, 238, 0.897);
    font-size: 1.5em;
}
#link{
    text-decoration: none;
    padding: 0.5em 0.9em;
    background-color: rgba(32, 53, 238, 0.897);
    color: white;
    border-radius: 25px;
}
.rules{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.pointer{
    align-self:flex-end;
    color: rgba(32, 53, 238, 0.897);
    font-size: 3em;
    text-decoration: none;
}
.timer{
    align-self:flex-end;
    color: rgba(32, 53, 238, 0.897);
    font-size: 1.5em;
} 
#inpt{
    margin-bottom: 20px;
    background-color: white;
    border: none;
}
#score{
    background-color: white;
    width: 56%;
    margin: auto;
    margin-top: 20px;
    padding: 1.6em 1em; ;
}
.btn-primary{
    border-radius: 25px;
    padding: 0.5em 1.3em;
    margin: auto;
}
#innerbox{
    color: rgba(32, 53, 238, 0.897);
    width: 50%;
}
#submitbtn{
    font-size: 1em;
    color: white;
}
@media (max-width:570px) {
    #container div h2{
        font-size:2em;
        color: rgba(24, 45, 236, 0.897);
    }
    #container div h2 P{
        font-size:1em;
    }
    .rules p{
        font-size: 0.85em;
    }
    .box{
        padding: 1em 0.5em;
        width: 90%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap:13px;
        backdrop-filter: blur(14px);
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
    }
    .btn-primary{
        border-radius: 15px;
        padding: 0.2em 0.6em;
    }
    #link{
        text-decoration: none;
        padding: 0.3em 0.7em;
        background-color: rgba(32, 53, 238, 0.897);
        color: white;
        border-radius: 15px;
    }
    #img{
          display: none;
    }
    #inpt{
        width: 146px;
    }
    .btns button{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background-color: rgba(32, 53, 238, 0.897);
        color: white;
    }
    .optionvalues p{
        text-align: justify;
        margin-top: 4px;
    }
    .optionvalues{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        gap:20px;
    }
}