/* css */
.main {
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #500375;
    color: white;
    text-transform: uppercase;
}

.title {
    text-align: center;
    font-size: 5em;
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    background: -webkit-linear-gradient(white, #500375);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-hard {
    text-align: center;
    font-size: 5em;
    border-bottom: 2px solid red;
    padding-bottom: 20px;
    background: -webkit-linear-gradient(red, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.word {
    text-align: center;
    text-transform: uppercase;
    font-size: 4.2vw;
}

.letters {
    text-transform: uppercase;
    font-size: 2em;
}

#gameUpdate {
    font-size: 1.5em;
}
 
#myAnswer {
    text-transform: uppercase;
    font-size: 4em;
    color: #500375;
    width: 100%;
}

#myTimer {
    font-size: 4em;
    height: 10vh;
}

#myWord {
    height: 20vh;
    font-size: 4em;
}

#playAgain {
    color: #500375;
    background-color: white;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 1.3em;
    border-radius: 8px;
    border-color: #500375;
}

#playAgain:hover {
    background-color: lightgray;
}

h3{
    text-align: right;
    font-size: 2em;
}

#howToPlay:hover {
    color: lightgray;
    cursor: pointer;
}

/* Modal Styling */
#instructions {
    color: #500375;
}

.modal-body {
    font-size: 2vw;
    color: black;
    text-transform: none;
}

/* Hard Mode Button */
#hardMode {
    font-size: 1.3em;
    color: red;
    text-transform: uppercase;
    border-radius: 8px;
    border-color: #500375;
}

#hardMode:hover {
    background-color: lightgray;
}

/* underline the letters that the computer played */
.underline {
    text-decoration: underline;
}

/* Media Queries */
/* Medium */
@media (min-width: 768px) {
    #gameUpdate {
        font-size: 2em;
    }
    #playAgain {
        font-size: 1.5em;
    }
    #hardMode {
        font-size: 1.5em;
    }
}

/* Large and Beyond */
@media (min-width: 992px) {
    #gameUpdate {
        font-size: 3em;
    }
    #playAgain {
        font-size: 2em;
    }
    #hardMode {
        font-size: 2em;
    }
}