/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
html {
    height: 100%;
}
header{
    background-color:  #D2B48C;
}
h1{
    background-color:  #000000;
    background-image: radial-gradient(#202020, #000000);
    padding: .5em;
    text-align: center;
    /*background-image: url(images/javajamlogo.jpg);
    background-repeat: no-repeat;
    padding-top: 45px;
    padding-left: 220px;*/
    font-size: 5vw;
    font-family: "Parkinsans", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}
h3{
    font-size: 1.2em;
    align-self:flex-start;
}
h4{
    background-color: #D2B48C;
    font-size: 1.2em;
    padding-left: 10px;
    padding-bottom: 5px;
}

body{
    /*background-color: #000000;*/
    background: #c022c3;
    background: linear-gradient(30deg, rgba(192, 34, 195, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 80%, rgba(245, 172, 15, 1) 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*background-image: radial-gradient(#fff1e8, #ffccaa); /*url(images/background.gif);*/
    color: #fff1e8;
    font-family: "Parkinsans", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
main{
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    display: block;
}

nav{
    background-image: radial-gradient(#5f574f, #000000);
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

a {
    color: #ffa300;
    text-decoration: none;
}
a:visited{
    background-color: #ab5236;
}
a:hover{
    color: #ffccaa;
}

table{
    align-items: center;
}
th{
    background-image: linear-gradient(#000000, #5f574f);
}
tr:hover{
    color: #ffccaa;
}
figcaption{
    color: #ffccaa;
}
figcaption:hover{
    color: #fff1e8;
}
ul{
    padding-left: 0%;
}

footer{
    background-color:  #000000;
    background-image: radial-gradient(#5f574f, #000000);
    font-size: .40cm; /*it's supposed to be .60cm but I adjusted for it to be similar to the figures*/
    font-style: italic;
    text-align: center;
    padding-bottom: .4em;
    border-top: 2px solid #221811;
}

#wrapper{
    background-color: #000000;
    width: 80%;
    min-width: 30em;
    max-width: 90em;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 0 10em #5f574f;
} 
#mySubmit{
    margin-left: 10.8em;
}
#containImage {
    width: 86%;
    height: 30%;
}
#containImage img{
    height: 130px;
    width: auto;/*maintain aspect ratio*/
    max-width:500px;
}
#containImageX img{
    height: 110px;
    width: auto;/*maintain aspect ratio*/
    max-width:500px;
}
#tooDark{
    background-image: radial-gradient(#5f574f77 50%, #000000 80%);
    border: 10em, #fff1e8;
}
#icon{
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Optional: ensures it doesn't take the full width */
    max-width:50%;
    padding-bottom: 0;
}
#errorBG{
    background: #000000;
}
.details{
    padding-left: 20%;
    padding-right: 20%;
}
img{
    padding: .9em;
}

form{
    padding: 2em;
}
label{
    float: left;
    display: block;
    text-align: right;
    width: 8em;
    padding-right: 1em;
}
input{
    display: block;
    margin-bottom: 1em;
}
textarea{
    display: block;
    margin-bottom: 1em;
}