@font-face { /*creating local font - Handwritten */
    font-family: Handwritten;
    src: url(assets/fonts/architectsdaughter_regular.ttf);
}

@font-face { /*creating local font - Mono */
    font-family: Mono;
    src: url(assets/fonts/jackwrite.woff2);
}
*{
    font-size: 2vw;
    font-family: 'Handwritten', cursive;
    transition: ease all .5s;

}
.frame { /* adding box frames and shaping them around each object */
    font-family: 'Handwritten', cursive;
    background: transparent;
    color: #403e41;
    outline: none;
    box-shadow: 1em 1.5em 1.5em -1em rgba(0, 0, 0, 0.5);
    border-radius: 14vw 1vw 14vw 1vw/1vh 14vh 1vh 14vh;
    box-sizing: border-box;
    border: solid 0.1em #4140344E;
    overflow: hidden;
    margin: 0;
    padding: 1vh 1vw 1vh 1vw;
    width: fit-content;
    height: fit-content;
}

/* Rotating objets */
*:nth-child(odd):not(body):not(html){
    transform: rotate(2deg);
}
*:nth-child(even):not(body):not(html) {
    transform: rotate(-2deg);
}

body{
    background-color: #fffef0;
    box-shadow: 0 0 0 black, 0 0 6em #8a4d0f inset;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.split{
    width: 50vw;
    height: 100vh;
    position: fixed;
    top: 0;
    text-align: center;
}
.right{
    right: 0;
    text-align: center;
}
.left{
    left: 0;
    text-align: center;
}
nav {
    height: 10vh;
    padding-top: 4vh;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
nav a {
    text-decoration: none;
    color: #403e41;
    text-align: center;
}
nav a:hover {
    color: rgba(136, 8, 8, 1);
}
#image {
    display: block;
    width: 40vw;
    height: 60vh;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
#startGameForm  {
    height: 30vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    overflow: hidden;

}
#startGameForm label, input, button{
    margin-top: 2vh;
    accent-color: #403e41;

}
.instructions {
    position: relative;
    padding: 2vh 2vw 4vh 2vw;
    top: 2vh;
    left: 2vw;
    width: 48vw;
    height: 94vh;
}
.instructions>h1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.instructions p {
    line-height: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Creating styling for game */

.letterButton {
    font-size: 4vh;
}
.letterButton:hover {
    color: rgba(136, 8, 8, 1);
    border-color: black;
}
.lettersContainer {
    margin-top: 4vh;
    padding-top: 4vh;
}

#guessedWord {
    margin-top: 8vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.guessWordLetters {
    font-size: 4vh;
    display: inline-block;
}
.gameOverButton {
    font-size: 4vh;
}
.gameOverButton:hover {
    color: rgba(136, 8, 8, 1);
    border-color: black;
}
#gameWonText {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#contactFormJavaScript {
    position: absolute;
    margin: 0;
    width: 96vw;
    line-height: normal;
}

@media screen and (max-width: 450px),screen and (orientation: portrait) {

    .split{
        width: 100vw;
        height: 50vh;
        position: fixed;
        top: 0;
        text-align: center;
    }
    .right{
                width: 100vw;

        top: 0;
        text-align: center;
    }
    .left{
        width: 100vw;

        top: 50vh;
        text-align: center;
    }
    nav {
        height: 5vh;
        padding-top: 3vh;
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
    nav a {
        text-decoration: none;
        color: #403e41;
        text-align: center;
    }
    #image {
        display: block;
        width: auto;
        height: 30vh;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
    }
    #startGameForm  {
        height: 20vh;
        padding-top: 2vh;
        padding-bottom: 2vh;
        overflow: hidden;
    
    }
    #startGameForm label, input, button{
        margin-top: 1vh;
        accent-color: #403e41;
        /* font-size: 2.3vw; */
        /* font-family: 'Handwritten', cursive; */
    }
    .instructions {
        position: relative;
        padding: 2vh 2vw 4vh 2vw;
        top: 2vh;
        left: 2vw;
        width: 96vw;
        height: 46vh;
    }
    .instructions>h1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .instructions p {
        line-height: 100%;
        font-size: 2vh;
    }
    .letterButton {
        font-size: 4vw;
    }
    #guessedWord {
        margin-top: 8vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .guessWordLetters {
        font-size: 5vw;

    
    }
}