/* main OVAL media css */

/*
@font-face {
    font-family: "Exo 2";
    src: url(https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@1,600&family=Roboto&display=swap" rel="stylesheet);
}
*/

/* MAIN OVAL LAYOUT ELEMENTS */
html,
body {
    padding: 0;
    margin: 0;
    background-color: #273f6a;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}
#container {
    min-width: 350px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    color: #8ca9de;
}
header {
    padding: 0;
    margin: 0;
    margin-left: 2em;
    margin-right: 2em;
}
header img {
    float: right;
}
main {
    color: #182E54;
    border: #152540 solid 2px;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 1.5em rgba(0, 0, 0, .25);
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
    background-color: #7C9EDE;
    background-image: url(../images/oval-bg.gif);
    background-size: cover;
}
nav,
footer {
    clear: both;
    padding: 0;
    margin: 0 0 1em 0;
    padding-left: 2em;
    padding-right: 2em;
}

/* OVAL NAV DESIGN */
nav a {
    color: #7C9EDE;
    font-weight: bold;
    font-family: 'Exo 2', sans-serif;
    text-decoration: none;
    outline: none;
}
nav a:hover,
nav a#current_page {
    color: #3399FF;
}
/* back button */
#container #back-btn {
    text-align: right;
    font-size: 1.25em;
    text-transform: uppercase;
    font-weight: bold;
}
/* specificity ftw! */
#container #back-btn a {
    font-family: 'Exo 2', sans-serif;
    transition: .2s ease;
    color: #1f54bc;
}
#container #back-btn a:hover {
    font-size: 1.5em;
    color: #d07820;
}

/* OVAL CONTENT STYLES */
content img {
    padding: 10px;
    border: 2px solid #5481D3;
    background: #7C9EDE;
}
h1,
h2,
h3 {
    font-family: 'Exo 2', sans-serif;
}
h1 {
    color: #d07820;
    font-style: normal;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
h2 {
    color: #1f55ad;
    font-size: 1.75em;
}
main p,
main li {
    color: #182E54;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: .25em;
}
strong {
    font-weight: bold;
    color: #1e355a;
}
header a {
    color: #d07820;
    text-decoration: none;
}
main a {
    color: #1f54bc;
    font-family: 'Roboto', sans-serif;
    text-decoration: underline;
    transition: .2s ease;
}
main a:hover {
    color: #d07820;
    font-size: 1.25em;
}
footer {
    color: #8ca9de;
    font-family: 'Roboto', sans-serif;
    font-size: .9em;

}
footer a {
    color: #A7BEE9;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted #A7BEE9;
}
footer #copy {
    float: right;
    text-shadow: 1px 1px 5px #000;
}
footer #footnote {
    float: left;
}

/* OVAL SKETCH STYLES */
#sketch-canvas {
    width: 100%;
    border-radius: .75em;
    border: #607297 solid 2px;
    background-color: #6a88c5;
    margin-top: 1em;
}

/* OVAL FORM STYLES */
form {
    /* flex box grid for form "panel" elements */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    padding: 0;
    margin-bottom: 1.5em;
    margin-top: 1em;
}
form .panel { 
    /*flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;*/
    flex: 1 300px;
    margin: 0;
    padding: .5em 0 .5em 1em;
}
form div {
    display: block;
    width: 100%;
    margin: 1em 0 1em 0em;
}
form div label {
    font-size: 1.25em;
    font-family: 'Exo 2', sans-serif;
    text-transform: uppercase;
    display: block;
    width: 33%;
    float: left;
    text-align: left;
    margin-right: 1em;
    font-weight: bold;
    margin: 0;
}
form button {
    color: #fff;
    font-size: 1.25em;
    font-family: 'Exo 2', sans-serif;
    background: #1f54bc;
    cursor: pointer;
    border: 2px solid #738ab8;
    border-radius: 10px;
    transition: .2s ease;
    padding: .5em 1em .5em 1em;
    margin: 0;
}
form div button:hover {
    background-color: #d07820;
    font-size: 1.5em;
}
/* slider styles adapted from https://freefrontend.com/css-range-sliders/ */
.slider {
    -webkit-appearance: none;
    width: 63%;
    height: 4px;
    background: #a1b5df;
    outline: none;
    border: 2px solid #738ab8;
    border-radius: 10px;
    margin: 0;
}
/* for chrome/safari */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 40px;
    background: #1f54bc;
    cursor: pointer;
    border: 2px solid #738ab8;
    border-radius: 10px;
    transition: .2s ease;
}
.slider::-webkit-slider-thumb:hover {
    background: #d07820;
}
/* for firefox */
.slider::-moz-range-thumb {
    width: 20px;
    height: 40px;
    background: #1f54bc;
    cursor: pointer;
    border: 2px solid #738ab8;
    border-radius: 15px;
    transition: .2s ease;
}
.slider::-moz-range-thumb:hover {
    background: #d07820;
}