/* ===============================
   Mobile (320px - 480px)
================================= */

@media screen and (max-width:480px){

    .container{
        padding:8px;
    }

    .quiz-card{
        padding:14px;
    }

    .quiz-card h2{
        font-size:24px;
    }

    .quiz-card p{
        font-size:13px;
    }

    .question-box h3{
        font-size:16px;
        line-height:24px;
    }

    .answers{
        gap:8px;
    }

    .answers button{
        height:42px;
        font-size:13px;
        padding:0 8px;
    }

    .feature-card h3{
        font-size:20px;
    }

    .feature h4{
        font-size:18px;
    }

    .feature p{
        font-size:13px;
    }

    .fact-card h3,
    .how-card h2,
    .footer-card h2{
        font-size:22px;
    }

}


/* ===============================
   Tablet (481px - 768px)
================================= */

@media screen and (min-width:481px) and (max-width:768px){

    .container{
        max-width:500px;
    }

}


/* ===============================
   Desktop
================================= */

@media screen and (min-width:769px){

    body{
        display:flex;
        justify-content:center;
    }

    .container{
        max-width:420px;
        margin:20px auto;
    }

}


/* ===============================
   Hover Effects
================================= */

.answers button:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.35);

}

.feature{

    transition:.3s;

}

.feature:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.30);

}

.quiz-card,
.feature-card,
.fact-card,
.how-card{

    transition:.3s;

}

.quiz-card:hover,
.feature-card:hover,
.fact-card:hover,
.how-card:hover{

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

}