/***
 * Colors
 * 
 * 
 * */

body {
    max-width: 1392px;
    min-width: 800px;
    background-color: #0e0051;
    background-image: linear-gradient(to bottom right, #0e0051,#120069);
    margin-left: 30%;
    margin-right: 20%;
}

header{
    align-content: center;
    background-color: dodgerblue;
    width: 70%;
    height: 90px;
    text-align: center;
    border: 5px solid black;
}

nav{
    background-color: #193f1a;
    height: 90px;
    text-align: center;
    border: 5px solid black;
    clear: left;
    width: 70%;
    position: sticky;
    top: 0;
}

nav ul{
    list-style: none; 
}

nav ul li {
    display: inline;
    float: left; 
    padding: 10px; 
    padding-top: 5px;
}

nav ul li a, nav ul li button {
    background-color: aqua;
    border: 3px solid #b37a00;
    margin: 2px 0 2px 0;
    padding: 3px;
    border-radius: 20px;
    transition: padding 0.4s, background-color 0.4s, color 0.4s;
}

nav ul li a:hover, nav ul li a:focus, nav ul li button:hover, nav ul li button:focus{
    color: #0e0051;
    background-color: #3ede6b;
    font-weight: bold;
    padding: 7px;
}

div#main{
    width: 62%;
    background-color: #c4eeff;
    border: 5px solid black;
    padding: 1em;
    padding-right: 3em;
    margin-top: 50px
}

div table{
    width: 50%;
}

img{
    padding: 5px; 
    margin: 12px;
    transition: width 0.4s;
}

img:hover{
    width: 250px;
}

header img:hover{
    transition: none;
    animation: wiggle 8s;
}

@keyframes wiggle{
    0%{transform: rotate(0deg)}
    25%{transform: rotate(10deg);} 
    50%{transform: rotate(-15deg);}
    75%{transform: rotate(10deg);}
    100%{transform: rotate(0deg);}
}

img.imgMainLeft{
    float: left; 
}


a{
    text-decoration: none;
}

a:hover, a:focus{
    color: #b37a00;
}

a.visButton{
    background-color: aqua;
    padding: 9px;
    border-radius: 24px;
    border: ridge 5px #0054de;
    transition: background-color 0.5s, padding 0.4s;
}

a.visButton:hover, a.visButton:focus{
    color: #0e0051;
    background-color: #3ede6b;
    padding: 12px;
}

table{
    width: 50%;
}

table tr th, table tr td{
    padding: 10px;
    border-collapse: collapse;
}

table tr th#blue{
    background-color: #00f9ff;
    border: 1px solid #00f9ff;
}

table tr th#green{
    background-color: #2bff00;
    border: 1px solid #2bff00;
}

table tr th#orange{
    background-color: #ffae00;
    border: 1px solid #ffae00;
}

tr:nth-child(even) {
    background-color: #dadada;
}
tr:nth-child(odd) {
    background-color: white;
}

td.left h4{
    color: #20c000;
}

td.right h4{
    color: #008fca;
}

table#long{
    width: 90%;
}


h4.greenH{
    color: #20c000;
}

h4#blueH{
    color: #008fca;
}

p{
    font-family: Arial, sans-serif;
}

p.shrinkWidth{
     width: 70%;
}

div#contactInfo{
    width: 45%;
    left: 0; 
    
}

div#submitInfo{
    width: 45%;
    position: relative;  
    left: 55%;
    bottom: 55%;
    top: 0%;
}

fieldset{
    background-color: #dcdcdc;
    padding-bottom: 40px;
}

input{
    padding: 5px;
    margin: 5px
}