nav{
    background-color: #DA4F4F;
    display: flex;
    height: 54px;
    width: 100%;
}

h1{
    color: #DA4F4F;
    text-align: center;
    font-size: 2rem;
}

main{
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: intrinsic;
    max-width: 90%;
    margin: 10px auto 50px auto;
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 20px;

    display: flex;
    flex-wrap: wrap;
}

.quiz{
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: intrinsic;
    max-width: 450px;
    padding: 10px;
    cursor: pointer;
}

.quiz > img{
    max-width: 100%;
    border-radius: 20px;
    border: 3px solid #ffffff;
}

.quiz:hover > img{
    border-color: #DA4F4F;
}

.quiz > p{
    padding-left: 5px;
    margin: 10px 0;
}

.quiz:hover > p{
    color: #DA4F4F;
}

@media only screen and (min-width: 425px){
    h1{
        font-size: 3.5rem;
    }

    main{
        font-size: 1.3rem;
        width: 90%;
    }
}