body {
    font-size: 14pt;
    font-family:Roboto;
    background-color: #fff9b4;
    color:#1b3c96
}

h1, h2, h3, h4, h5, h6 {
    font-family:"Fredoka One";
    text-align: center;
}    
h1 {
    font-size:40pt;
}
h2 {
    margin: .1em;
}
header {
    text-align:center;
}

#hero, footer {
    
    color:#1b3c96;
    border: 2px solid #85966C;
    background-color: #bff86e;
    text-align:center;
    padding:10px;
}

/*Hero Section*/

#hero img {
    border: 1px solid #85966C;
    border-radius: 4px;
    padding: 5px;
    width: 300px;
}
  
#hero img:hover {
    box-shadow: 0 0 2px 1px #1b3c96;
  }
  
/* Bio Section */
#bio {
    text-align: left;  
}
/*Hobbies Section */

#hobbies {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}
#hobbies ul li:nth-child(4n+1) {

    color:black

}
#hobbies ul li:nth-child(4n+2) {
    
    color:rgb(0, 63, 0)

}
#hobbies ul li:nth-child(4n+3) {
    
    color:rgb(80 79 0)

}
#hobbies ul li:nth-child(4n+4) {
    
    color:rgb(0, 0, 104)

}
/* Gallery */
#gallery {
    border: 2px solid #85966C;
    margin-bottom:1rem;
}
#gallery img {
    max-width:100%
    
}

#gallery figure {
    text-align:center;
}

#gallery figure img {
    border: 1px solid #85966C;
    border-radius: 4px;
    padding: 5px;
    width: 300px;

}

#gallery figure img:hover {
    box-shadow: 0 0 2px 1px #1b3c96;
}
/* Video */
#video {
    border: 2px solid #85966C;
    margin-bottom:1rem;
    text-align:center;
}
#video iframe {
    max-width:100%
}


/* Blog Post */
#lit {
    border: 2px solid #85966C;
    margin-bottom:2rem;
}

#lit div {
    padding:0.3rem 0;
    max-width:40rem;
    margin: 0 auto;
}

#lit div p {
    padding: 0.3rem 0;
    clear: both;
}

/* Dropcaps */

#lit div p:first-child:first-letter {

    color: #b6c3a2;
    background-image:radial-gradient(#FFF, #A3721C);
    float:left;
    font-size:3em;
    padding:.1em;
    margin-right:.25em;
    line-height:.65;
    text-shadow:2px 2px 3px rgba(0,0,0,.5);
    box-shadow:5px 5px 5px rgba(0,0,0,.5);
    border:2px solid black;
}

#lit .code {
    border: 1px solid #85966C;
    border-radius: 4px;
    padding: 5px;
    width: 300px;
}

#lit img {
    width: 300px;
    height: 300px;
    
}

/* The hoverZoom container */

.hoverZoom {
    height: 300px; 
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    
}
  
/* Smooth zoom of images */
.hoverZoom img {
    transition: transform .5s ease;
   
}
  
/* Transforming when hovered over image*/
.hoverZoom:hover img {
    transform: scale(4);
}


/* tablet size */
@media screen and (min-width: 60em) {
    figure {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    figcaption {
        display: flex;
        justify-content: center;
        align-items:center;
        font-size: 2rem;
        margin-left: 1rem;
    }
    figure img {
        width:100%    
    }
    #lit div {
        max-width: 100%;
        columns: 20rem;
    }
}
/* Large screen size */
@media screen and (min-width: 100em) {

    #gallery {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    hr{
        display: none;
    }
    #gallery h2 {
        grid-column:1/-1;
    }
    figure {
        display: block;
    }
    
}
    
/* Contact Form */
#formElements {
    display:grid;
    row-gap: .5em;

}
#contact {
    padding: 1rem;
    max-width: 600px;
    margin: 2rem auto;

}

fieldset {
    border: 2px solid #b6c3a2;
    margin-top:1em;
    margin-bottom:1em;
}

legend {
    background-color: #b6c3a2;
    color: #272727;
    padding: .5em;
}
#contact input, #contact textarea, #contact select, #contact button {
    padding: .5em;
    font-size: 1rem;

}
#contact ul {
    list-style:none;
    padding:0px;
}
#contact li {
    margin: 1rem;
}
#contact button {

    background-color: #b6c3a2;
    color: #272727;
    border: 1px solid #1b3c96;
    max-width: 400px;
    width: 50%;
    justify-self: center;

}