#titleSection {
    font-family: 'Voltaire', sans-serif;
    font-size: 3em;
    text-align: center;
}

#intro {
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 2em;
    text-align: center;
}

#letters {
    text-align: center;
}

#leftSide {
    padding: 20px;
    font-size: 5em;
    display: inline-block;
}

#rightSide {
    padding: 20px;
    font-size: 5em;
    display: inline-block;
}

#responses {
    text-align: center;
}

#yes {
    padding: 20px;
    border: 3px solid black;
    cursor: pointer;
    margin: 20px;
    width: 45px;
    height: 45px;
    font-family: 'Voltaire', sans-serif;
    font-size: 2em;
    text-align: center;
    line-height: 55px;
    background-color: #69e63c;
    display: inline-block;
}

#no {
    padding: 20px;
    border: 3px solid black;
    cursor: pointer;
    margin: 20px;
    width: 45px;
    height: 45px;
    font-family: 'Voltaire', sans-serif;
    font-size: 2em;
    text-align: center;
    line-height: 55px;
    background-color: #f24744;
    display: inline-block;
}

#answerSection {
    text-align: center;
    height: auto;
}

#answer {
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 2em;
    width: 75%;
    text-align: center;
    display: inline-block;
    margin: 10px;
    min-height: 100px;
    height: auto;
    vertical-align: top;
}

#nextSection {
    text-align: center;
}

#nextLetters {
    cursor: pointer;
    border: 3px solid black;
    background-color: #f5e042;
    font-family: 'Voltaire', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    width: 210px;
    display: inline-block;
    margin: 15px;
    padding: 5px;
}

#scoring {
    text-align: center;
}

#scoreDisplay {
    font-size: 2em;
    text-align: center;
    height: 80px;
    display: inline-block;
    font-family: 'Voltaire', sans-serif;
}

#score {
    font-size: 2em;
    text-align: center;
    display: inline-block;
    font-family: 'Voltaire', sans-serif;
}

#footer {
    text-align: center;
    font-family: 'Voltaire', sans-serif;
}

@media only screen and (min-width: 676px) {
    #answer {
        min-height: 115px;
        width: 80%
    }
}


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

    #titleSection {
        font-size: 2em;
    }
    
    #intro {
        font-size: 1.2em;
        padding: 5px;
    }
    
    #answer {
        min-height: 75px;
        width: 90%;
        font-size: 1.2em;
    }

    #leftSide {
        padding: 10px;
        font-size: 3em;
    }

    #rightSide {
        padding: 10px;
        font-size: 3em;
    }

    #yes {
        padding: 20px;
        border: 3px solid black;
        cursor: pointer;
        margin: 10px;
        width: 30px;
        height: 30px;
        font-family: 'Voltaire', sans-serif;
        font-size: 1.5em;
        text-align: center;
        line-height: 30px;
        background-color: #69e63c;
        display: inline-block;
    }
    
    #no {
        padding: 20px;
        border: 3px solid black;
        cursor: pointer;
        margin: 10px;
        width: 30px;
        height: 30px;
        font-family: 'Voltaire', sans-serif;
        font-size: 1.5em;
        text-align: center;
        line-height: 30px;
        background-color: #f24744;
        display: inline-block;
    }

    #nextLetters {
        cursor: pointer;
        border: 3px solid black;
        background-color: #f5e042;
        font-family: 'Voltaire', sans-serif;
        font-size: 1.2em;
        font-weight: bold;
        width: 165px;
        display: inline-block;
        margin: 15px;
        margin-top: -5px;
        padding: 5px;
    }

    #scoreDisplay {
        font-size: 1.5em;
    }

    #score {
        font-size: 1.5em;
    }

    #footer {
        margin-top: -50px;
    }
}