body {
    font-family: 'Rye', cursive;
}

.main_container {
    background-image: url("https://motaen.com/upload/wallpapers/source/2013/10/14/16/00/37700/uQvijpRJdt.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /*padding-bottom: 20%;*/
    margin-top: 132px;
    height: 100vh;
}

.stripe {
    width: 100%;
    background-color: gray;
    height: 40px;
    font-size: 150%;
    letter-spacing: 10px;
    text-align: center;
    position: relative;
}

.stripe_span {
    height: 100%;
}

.main_header {
    font-size: 400%;
}

.main_header_box {
    width: 40%;
    margin: 0 auto;
}

.page-header {
    font-family: 'Rye', cursive;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: white;
    margin: 0;
}

.hangman {
    background-color: white;
    font-size: 200%;
    text-align: center;
}

.hangman_box {
    font-family: 'Rye', cursive;
    /*background-image: url("https://s-media-cache-ak0.pinimg.com/originals/71/68/19/7168196c7d2508f260b287d8dc507416.png");*/
    background-image: url("../images/wanted.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-size: cover;
    width: 35%;
    padding-bottom: 45%;
    position: relative;
    margin-left: 5%;
}

.hangman_box_header {
    font-size: 2em;
    text-align: center;
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
}

.hangman_box_header p {
    font-size: 40%;
}

.hangman_box img {
    max-width: 100%;
    max-height: 100%;
}

.guess_box {
    position: absolute;
    top: 45%;
    text-align: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.box {
    display: inline-block;
    vertical-align: top;
}

.head,
.shoulderl,
.shoulderr,
.body,
.legl,
.legr {
    visibility: hidden;
}

.submit_button {
    border: none;
    padding: 2%;
    background-color: rgba(250, 250, 250, 0);
    transition: all 0.3s;
}

.submit_button:hover {
    background: white;
}

.submit_button:active {
    color: pink;
}

.submit_button:focus {
    outline: none;
}

.modes {
    float: right;
    background-color: rgba(250, 250, 250, 0);
    height: 100%;
    border: none;
}

.new_game {
    display: none;
    color: #cc0000;
    height: 100%;
    border: none;
    background-color: rgba(250, 250, 250, 0);
}

.guess_input {
    width: 20%;
    border: none;
    border-bottom: 1px solid black;
    background-color: #f4e5c2;
    opacity: 0.8;
    text-align: center;
}

.guess_input:focus {
    outline: none;
}

.tracked_guess_box {
    margin-top: 7%;
}

.tracked_guess_box header {
    border-bottom: 2px solid rgb(80, 80, 80);
    line-height: 0.9;
}

.message_box {
    position: absolute;
    bottom: 22%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: bolder;
}

.main_header_box img {
    float: left;
    max-width: 100%;
    max-height: 100%;
    width: 75px;
    height: 75px;
    padding-bottom: 10px;
}

.problem {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 70%;
}


/*javaScript run*/

.correct_color {
    color: #006600;
}


/*javaScript run*/

.winning_color {
    background: #66ff66;
}


/*javaScript run*/

.losing_message {
    background: #cc0000;
}


/*javaScript run*/

.highlighted {
    background-color: #ffd966;
}

.lose_message {
    color: #cc0000;
}

#easy {
    margin-right: 2%;
    margin-left: 1%;
    transition: all 0.3s;
}

#easy:focus {
    outline: none;
}

#easy:hover {
    background-color: white;
}

#hard {
    margin-left: 10%;
    transition: all 0.3s;
}

#hard:focus {
    outline: none;
}

#hard:hover {
    background-color: white;
}

#page_header_id {
    margin: 0;
    padding-bottom: 0;
}

@media (max-width: 1200px) {
    .hangman_box {
        width: 50%;
        margin: 0 auto;
        padding-bottom: 70%;
        margin-left: 0;
    }
}

@media(max-width: 1000px) {
    .main_header_box {
        width: 70%;
    }
}

@media (max-width: 780px) {
    .hangman_box {
        width: 70%;
        padding-bottom: 90%;
    }
}

@media(max-width: 600px) {
    .main_header_box {
        width: 100%;
    }
    .main_header_box img {
        display: none;
    }
    .hangman_box {
        width: 85%;
        padding-bottom: 110%;
    }
}

@media(max-width: 599px) {
    .hangman_box {
        width: 100%;
        padding-bottom: 110%;
    }
}

@media(max-width: 499px) {
    .problem {
        position: absolute;
        left: 0;
        font-size: 60%;
        top: 17%;
    }
    #easy,
    #hard {
        font-size: 80%;
    }
    .stripe_span {
        height: 100%;
        position: absolute;
        left: 8px;
        top: 42%;
        font-size: 80%;
    }
    .stripe {
        height: 59px;
    }
    .hangman_box_header {
        top: 26%;
    }
    .guess_box {
        top: 45%;
    }
    .message_box {
        bottom: 9%;
    }
    .hangman_box {
        padding-bottom: 140%;
    }
}