body{
    display: flex;
    justify-content: center;
    background: url(../images/triangular.png);
}

.container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    background: slateblue;
    border: inset rebeccapurple 5px;
    margin: 35px 0;
    padding: 2%;
}

header{
    display: flex;
    justify-content: center;
    font-size: 225%;
    font-family: 'Codystar', cursive;
    color: gold;
    border: dotted gold 5px;
}

h1{
    text-align: center;
    margin: 0;
}

.timer{
    display: flex;
    justify-content: center;
}

#timer{
    text-align: center;
    width: auto;
    font-size: 200%;
    font-family: 'Codystar', cursive;
    color: gold;
    padding: 0 10px;
    border: dotted 2px gold;
    margin-top: 40px;
}

#question{
    display: flex;
    justify-content: center;
    width: auto;
    font-size: 200%;
    font-family: 'Rye', cursive;
    color: gold;
    text-align: center;
    padding: 0 10px;
    border: dotted 2px gold;
    margin-top: 40px;
}

#answer-choices{
    margin-top: -50px;
}

.row{
    display: flex;
    justify-content: center;
    padding: 40px;
    margin-top: 80px;
}

button{
    display: flex;
    justify-content: center;
    background: palegoldenrod;
    border: solid 2px gold;
    font-family: 'Rye', cursive;
    font-size: 32px;
}

.answer-button{
    width: 40%;
    display: flex;
    justify-content: center;
}

#results-screen{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: auto;
    padding: 0 10px;
    margin: auto;
    margin-top: 5.5%;
    text-align: center;
    font-size: 200%;
    font-family: 'UnifrakturMaguntia', cursive;
    color: gold;
    text-shadow: 3px 3px forestgreen;
}

.start{
    font-family: 'Rye', cursive;
    color: rebeccapurple;
    width: auto;
    padding: 0 10px;
    margin: auto;
    margin-top: 3%;
}

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

    header{
        font-size: 150%;
    }

    .container{
        padding-bottom: 2.5%;
    }

    #question{
        font-size: 150%;
    }

    #answer-choices{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 35px;
    }
    
    .row{
        display: table;
        width: auto;
    }

    .answer-button{
        width: auto;
    }

    .top{
        margin-top: -100px;
    }

    .bottom{
        margin-top: -160px;
    }

    button{
        font-size: 24px;
    }

    #start{
        font-size: 32px;
    }

}