body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-stretch: expanded;
    background-image: url("../images/roman-pics\ \(3\).jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 1000px;
}

/* style for my header */
#header-div {
    text-align: center;
}
#header-div #crypt {
    font-size: 3.5em;
    color: whitesmoke;
    text-shadow: -2px 2px 3px blue;
}
#header-div .explain {
    font-size: 1.5em;
    font-weight: 800;
    color: whitesmoke;
    text-shadow: -2px 2px 3px blue;
    line-height: 1.6;
}

/* styling my input */
#input-div {
    margin:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 75%;
    align-items: center;
    justify-content: center;
}

#input {
    display: flex;
    font-size: 20px;
    margin-bottom: 55px;
}
/* outputted underneath input field */
#codedMessage {
    display: flex;
    font-size: 35px;
    color: rgb(187, 16, 16);
    text-shadow: -3px 3px 2px yellow;
    margin-bottom: 55px;
}

/* styling my output */
#output-div {
    margin:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 75%;
    align-items: center;
    justify-content: center; 
}
/* decoded message */
#decoded {
    display: flex;
    font-size: 35px;
    margin-bottom: 55px;
    color: blue; 
    text-shadow: -3px 3px 2px yellow;  
}

/* cipher button */
#cipherMe {
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px white, 0 6px 20px 0 rgb(67, 66, 66);
}
#cipherMe:active {
    transform: translateY(4px);
    transition-duration: 0.5s;
    box-shadow: 0 4px 8px grey, 0 6px 20px 0 rgb(67, 66, 66);
}

/* reset button */
#reset-div {
    margin:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 75%;
    align-items: center;
    justify-content: center;  
}
#reset {
    display: flex;
    font-size: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 8px white, 0 6px 20px 0 rgb(67, 66, 66);  
}
#reset:active {
    transform: translateY(4px);
    transition-duration: 0.5s;
    box-shadow: 0 4px 8px grey, 0 6px 20px 0 rgb(67, 66, 66); 
}

/* media query */
@media only screen and (max-width: 600px){
    body {
    background-color: grey;
    background-image: none;
    font-size: 1em;
    }

}