*{
    box-sizing:border-box;
}

body{
    margin:0px;
    padding:0px;
    font-family:poppins, Helvetica, sans-serif;
    background-color:#6b5b95;
    overflow: hidden;
}

h1{
    font-size:2.5rem;
    text-align:center;
    font-family:jokerman;
    color:#d64161;
    text-shadow: 2px 2px #633b1d
}

h2 {
    font-size: 1rem;
    text-align:center;
}

section#game_container {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:80vh;
    padding-bottom:140px;
}

img#dexter-dorkman{
    position:absolute;
    margin:0px 200px;
    width:310px;
    height:320px;
    display:none;
    animation-name:flip_image;
    animation-duration:.8s;
    animation-fill-mode:forwards;
    top:400px;
    left:-200px;
}

input.number_guess {
    width:200px;
    height:40px;
    text-align:center;
    border:none;
    border-radius:5px;
    font-size:1rem;
    font-weight:bolder;
    outline:none;
    color:#167dc1
}

input.number_guess::placeholder {
    color:#167dc1
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button.guess {
    margin-top:10px;
    border:none;
    width:200px;
    height:30px;
    border-radius:10px;
    background-color:#d64161;
    color:white;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
    border: 2px solid #13364b;
}

button.guess:hover {
    background-color:#ce3456;
}

section#modal_background {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    top:0;
    left:0;
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);
    z-index:1
}

label{
    color:white;
    font-size:1.1em;
}

div.modal_content select{
    border-radius:4px;
    margin-left:5px;
    width:100px;
    height:35px;
    background-color:#6b5b95;
    color:white;
    border:none;
    font-size:1em;
    outline:none;
}

button.start{
    background-color:#ff7b25;
    border:none;
    color:white;
    display:block;
    margin:10px auto;
    width:100px;
    height:30px;
    border-radius:3px;
    font-size:1.2em;
    cursor:pointer;
    margin-top:20px;
}

button.start:hover {
    background-color:#ec701d;
}

section.modal_content select option {
    font-size:1em
}

/* Animation */
@keyframes flip_image{
    0%{
        left:-450px;
        transform:rotate(-90deg)
    }

    100% {
        left:-200px;
        transform:translate(0deg)
    }
}