html, body {
    font-family: 'Architects Daughter', cursive;
    color: #0808C0;
    background: url("../images/background.jpg") repeat repeat;
}

h1 {
    font-size: 2em;
    font-weight: bold;
}

#mainContent {
    width: 100%;
    /* height: 100vh; */

}

#logo {
    position: fixed;
    width: 80%;
    margin-left: 10%;
    height: 90vh;
    background: url("../images/logo.png") center center no-repeat;
    background-size: contain;
    visibility: hidden;
    animation: 3s showLogo;
    z-index: -4;
}

@keyframes showSection {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    74% {
        visibility: hidden;
        opacity: 0;
    }
    75% {
        visibility: visible;
    }
    100% {
        opacity: 1;
    }
}
    
@keyframes showLogo {
    0% {
        visibility: visible;
        opacity: 0;
        transform: scale(1) rotateX(90deg);
        z-index: 50;
    }
    25% {
        opacity: 1;
        transform: scale(1) rotatex(0deg);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1);
    }
    90% {
        visibility: visible;
        opacity: 1;
        z-index: 50;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

#category {
    position: relative;
    left: 50%;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 30px 10px 30px;
    background-color: rgba(119,190,245, .7);
    box-shadow: 3px 3px 5px 3px rgb(3,103,180);
    border-radius: 30px;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    animation: 4s showSection;
}

#category h1 {
    text-align: center;
    margin-bottom: 30px;
}

#buttonGroup {
    text-align: center;
}

.radioButton {
    display: none;
}

.radioButton:checked + label {
    color: #8C5000;
    border-color: #8C5000;
}

.radioLabel {
    border: 2px solid #0808C0;
    color: #0808C0;
    font-family: 'Architects Daughter', cursive;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 8px 5px 8px;
    background: none;
}

.radioLabel:hover {
    border-color: #1976D2;
    color: #1976D2;
}

#customCategoryInput {
    margin-top: 10px;
    margin-bottom: 6px;
}

::-webkit-input-placeholder { /* Chrome */
    color: #0808C0;
  }
:-ms-input-placeholder { /* IE 10+ */
    color: #0808C0;
  }
::-moz-placeholder { /* Firefox 19+ */
    color: #0808C0;
    opacity: 1;
  }
:-moz-placeholder { /* Firefox 4 - 18 */
    color: #0808C0;
    opacity: 1;
}

.userInput {
    font-size: 1.2em;
    background: none;
    border: none;
    outline: none;
    border-bottom: 2px solid #1976D2;
    padding: 5px 0px 5px 8px;
    color: #0808C0;
}

.userInput:focus {
    border-bottom: 2px solid #0808C0;
}

#userGuessInput {
    display: none;   
}

#currentWord {
    width: 80%;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    background-color: rgba(119,190,245, .7);
    box-shadow: 3px 3px 5px 3px rgb(3,103,180);
    border-radius: 30px;
    animation: 4.5s showSection;
}

#gameWord {
    font-size: 2.2em;
    letter-spacing: .8em;
    margin-top: 2px;
}

#hangingManBack {
    width: 40%;
    height: 520px;
    margin-left: 5%;
    float: left;
    background-color: rgba(119,190,245, .7);
    box-shadow: 3px 3px 5px 3px rgb(3,103,180);
    border-radius: 30px;
    animation: 5s showSection;
}

#hangingMan {
    width: 100%;
    height: 100%;
}

#gameInfo {
    width: 40%;
    height: 450px;
    margin-right: 5%;
    float: right;
    font-size: 1.3em;
    background-color: rgba(119,190,245, .7);
    box-shadow: 3px 3px 5px 3px rgb(3,103,180);
    border-radius: 30px;
    animation: 5.5s showSection;
}

#gameInfo p {
    margin: 50px 0px 0px 40px;
}

.spanInfo {
    color: #8C5000;
    font-size: 1.1em;
    font-weight: bold;
}

#lettersGuessed {
    letter-spacing: 1.1em;
}

#gameWon {
    position: fixed;
    width: 80%;
    height: 100vh;
    top: 0px;
    margin-left: 10%;
    background: url("../images/gameWon.png") center center no-repeat;
    background-size: contain;
    z-index: -5;
    visibility: hidden;
}

.gameWon {
    animation: 2s gameWon;
}

@keyframes gameWon {
    0% {
        visibility: visible;
        z-index: 1;
    }
    100% {
        visibility: visible;
        z-index: 1;
    }
}

#gameLost {
    position: fixed;
    width: 80%;
    height: 100vh;
    top: 0px;
    margin-left: 10%;
    background: url("../images/gameLost.png") center center no-repeat;
    background-size: contain;
    z-index: -5;
    visibility: hidden;
}

.gameLost {
    animation: 2s gameLost;
}

@keyframes gameLost {
    0% {
        visibility: visible;
        z-index: 1;
    }
    100% {
        visibility: visible;
        z-index: 1;
    }
}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 30px;
    background-color: rgba(13,71,161, .8);
    border-top: 2px solid #062A64;
    color: white;
    text-align: center;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
}

footer p {
    margin-right: 30px;
    line-height: 30px;
}

@media screen and (max-width: 1279px) {
    h1 {
        font-size: 1.5em;
        font-weight: bold;
    }

    #mainContent {
        padding-top: 2px;
    }

    #category {
        margin-bottom: 10px;
        padding: 0px 0px 2px 0px;
    }
    
    #category h1 {
        margin-bottom: 16px;
    }

    .radioLabel {
        font-size: 1em;
        padding: 4px 2px 4px 2px;
        margin: 12px 0px 12px 0px;
    }

    #customCategoryInput, #userGuessInput {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    #newWordButton {
        margin: 4px 0px -12px 0px;
    }

    #userGuessInput {
        display: block;
        width: 150px;
    }
    
    #currentWord {
        width: 98%;
        height: 50px;
        margin-bottom: 10px;
    }

    #gameWord {
        font-size: 1em;
        letter-spacing: .8em;
        margin-top: 2px;
    }

    #hangingManBack {
        display: none;
    }

    #gameInfo {
        width: 98%;
        height: auto;
        float: none;
        font-size: 1em;
        margin-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #gameInfo p {
        margin: 0px;
    }
}