/****************************************************************************
Title:  Style
Use:  To provide style rules for my portfolio website.
Author:  Hannah Johnson
School/Term:  University of Missouri-Columbia, Summer 2020
Developed: June 18, 2020
Validated:  July 27; Passed on Chrome, Opera, Firefox, Edge, and Internet Explorer browser.
***************************************************************************/
*{font-family:'Crimson Text', sans-serif;}
body{
    font-size:100%;
    margin:0;
    background-color:#24305e;
    width:100%;
    height:auto;}
main{
    clear:both;
    margin:0;
    padding:50px 50px 50px 50px;
    background-color:white;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    vertical-align:top;}
.flexcontainer{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    vertical-align:top;}
.flexcontainer2{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    vertical-align:top;
    clear:both;}
header{
    margin:15px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    vertical-align:top;}
h1{
    color:white;
    text-shadow:3px 3px 5px #747fab;
    text-align:center;
    font-size:220%;
    font-family:'Unica One', serif;
    background-color:#24305e;
    margin:15px;
    padding:5px;
    letter-spacing:5px;
    text-transform:uppercase;
    display:block;
    float:left;}
h2{
    color:white;
    font-size:170%;
    font-family:'Unica One',serif;
    margin:0;
    padding:10px 20px 0 20px;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:2px;}
h3{
    color:white;
    font-size:100%;
    margin:5px;
    padding:0;
    text-align:center;}
p{
    color:white;
    font-size:100%;
    margin:10px 20px 20px 20px;
    padding:0;
    text-align:left;
    vertical-align:middle;}
.clear{
    clear:both;}
.darkblue{
    background-color:#24305e;
    margin:5px;
    padding:10px;
    width:180px;
    height:180px;
    display:inline-block;
    vertical-align:top;}
.darkblueul{
    color:white;
    margin:10px 20px 20px 40px;
    padding:0;
    text-align:left;
    font-family:'Crimson Text', sans-serif;
    font-size:100%;}
.pink{
    background-color:#4156AB;
    margin:5px;
    padding:10px;
    width:180px;
    height:180px;
    display:inline-block;
    vertical-align:top;}
.white{
    background-color:#515978;
    margin:5px;
    padding:10px;
    width:180px;
    height:180px;
    display:inline-block;
    vertical-align:top;}
.whitelarge{
    background-color:white;
    margin:5px;
    padding:10px;
    width:65%;
    height:auto;
    display:block;
    vertical-align:top;}
#resumevid{
    margin:5px;}
.mediumblue{
    background-color:#515978;
    margin:5px;
    padding:10px;
    width:180px;
    height:180px;
    display:inline-block;
    vertical-align:top;}
blockquote{
    color:white;
    text-align:justify;
    font-style:italic;
    font-size:130%;
    margin:0;
    padding:20px;}
img{
    margin:5px;
    padding:0;
    }
footer{
    font-size:95%;
    color:white;
    text-align:center;
    justify-content:center;
    font-style:italic;
    background-color:#24305e;
    padding:15px 0 5px 0;}
footer img{
    margin:0; 
    padding:0; 
    display:inline-block;}
footer a{
    color:#b5d6e8;}
.zoom {
    position:absolute;
    width:0;
    -webkit-transition:width 0.3s linear 0s;
    transition:width 0.3s linear 0s;
    z-index:10;}
img:hover +.zoom{
        width:100px;}
a:link, a:visited{
    color:#b5d6e8;
    text-decoration:none;
    background-color:inherit;}
a:active {
    background-color:inherit;
    font-family:inherit;}
a:hover, a:focus{
    text-decoration:underline;}
.box {
    background-image: url(images/footer-image.png);
    background-size:cover;
    background-position:center;
    margin:20px;}
table
    {color:black;
    font-size:100%;
    margin:10px 20px 20px 20px;
    padding:10px;
    text-align:center;
    vertical-align:top;
    border-collapse:collapse;
    background-color:white;
    width:65%;}
th{
    color:black;
    font-size:170%;
    font-family:'Unica One',serif;
    margin:5px;
    padding: 10px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:white;
    vertical-align:top;
    width:30%;}
td{
    color:black;
    font-size:100%;
    font-family:'Crimson Text', sans-serif;
    margin:5px;
    padding:10px;
    text-align:center;
    background-color:white;
    vertical-align:top;}
tbody{
    color:black;
    font-size:100%;
    margin:10px 20px 20px 20px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    vertical-align:top;}
form {
    color:black;
    font-size:100%;
    margin:10px 20px 20px 20px;
    padding:0;
    text-align:left;
    vertical-align:middle;
    width:100%;}
#message{
    height:80px;
    width:90%;}
#firstname, #lastname, #email {
    height:auto;
    width:90%;}
#submit {
    color:white;
    font-size:100%;
    font-family:'Unica One',serif;
    margin:0;
    padding:5px;
    font-weight:bold;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#24305e;}
#breadcrumbs {
    display:block;
    justify-content:center;
    text-align:center;
    margin:0 0 10px 0;
    font-size:80%;
    font-style:italic;}
#more1, #more2, #more3 {
    display:none;}
button {
    color:white;
    font-size:100%;
    font-family:'Unica One',serif;
    margin:0 20px 20px 20px;
    padding:5px;
    font-weight:bold;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:2px;
    background-color:#24305e;
    outline:none;
    border:none;}
@media (max-width:640px)
{   main {padding:10px; margin:0;}
    .whitelarge {width:100%;}
    .flexcontainer2{width:80%;}
    header{display:flex; flex-direction:column; margin:0; padding:0; }
    h1 {margin:0;}
    nav {margin:0; padding:0;}
    nav ul{display:flex; flex-direction:column; margin:0;}
    #breadcrumbs {display:none;}}
@media (max-width:430px)
{.flexcontainer{flex-wrap:wrap;}}
@media (max-width:620px)
    {#resumevid{margin:5px; width:100%; height:auto;}}
@media (max-width:620px)
    {#contactform {margin:5px; width:100%; height:auto;}}
@media print {
    *{background:transparent;
    color:black;
    box-shadow:none;
    text-shadow:none;}
    nav{display:none;}}