header {background-image: url("hangman.jpg"); text-align: center; font-size: 2em;
    background-repeat: no-repeat; height: 150px; border-bottom: black solid 2px;
    background-color: white; padding-top: 10px;}
body {background-color: darkgray;}
canvas {border: 4px solid black; font-weight: bold;
    background-color: lightgray;}
#gamePiece {text-align: center;padding-top: 10px;}
#secretWord {font-size: 4em; text-align: center;}
#level {text-align: center; padding-top: 20px;}
button {font-size: 1em; border-radius: 5px;}
button:hover {background-color: aqua;}
#hangman {text-align: center; padding-top: 20px;}
.letter {font-size: 2em; width: 50px; border-radius: 10px;}
.letter:hover {background-color: crimson;}
.selected {background-color: black;}
#result {text-align: center; font-size: 3em;}

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

    #secretWord {font-size: 3em;}
    .letter {font-size: 1.25em;}
    #result {text-align: center; font-size: 2em;}
}

@media only screen and (max-width: 510px){
header {text-align: right; padding-right: 10px;}
#secretWord {font-size: 3em;}
.letter {font-size: 1.25em;}
#result {text-align: center; font-size: 1.25em;}
}

@media only screen and (max-width: 400px){
    header {text-align: center; font-size: 1.5em; background-image: none;}
    #secretWord {font-size: 1.5em;}
    button {font-size: .75em;}
    .letter {font-size: 1em;}
    #result {text-align: center; font-size: 1em;}

}