body {
    font-family: 'Lora', serif;
    background-color: #8d85ff;
    color: #000000;
}

/*CSS Comment Template*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 1rem;
    color: #000000;
    font-size:40pt;
}

header {
    text-align:center;
}

#hero, footer {
    color:#000000;
    border: 2px solid #000000;
    background-color: #ffffff;
    text-align:center; 
    padding: 10px;
    display: horizontal; 
    background-color: #8d85ff;
    font-size: 22px;
}

/*Hero Section*/

#hero img {
    width: 300px;
}

/*Bio Section*/

#bio {
    font-family: 'Roboto', sans-serif;
    font-size:22pt;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding: 5px;
    color: #000000;
    text-align: justify;
}

/*Hobbies */

#hobbies {
    font-family: 'Roboto', sans-serif;
    font-size:22pt;
    text-align: left;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding: 40px;    
}

#hobbies ul li:nth-child(even) {
    color: #000000;
}

#hobbies ul li:nth-child(odd) {
    color: #0000ff;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*Gallery*/

#gallery {
    border-radius: 1rem;
    border: 2px solid #000000;
    padding: 2rem;
    font-size: 22pt;
}

@media screen and (max-width: 500px) {
    .column {
    width: 100%;
    }
}

#gallery img {
    max-width: 100%;
}

#gallery figure {
    text-align: right;
    font-size: 30px;
}


/* Literature */

#lit {
    border: 2px solid #000000;
    margin-bottom: 2rem;
    padding: 1rem;
    text-align:right; 
    color: #000000;
    font-size: 18pt;
}

#lit div p{
    padding: 0.5rem 0;
    margin: 0 auto;
    text-align:center; 
    text-align: justify;
}

/* Dropcaps */ 

#lit div p:first-child:first-letter {
    color: #ffffff;
    background-image: radial-gradient(#0000ff, #add8e6);
    float: left;
    font-size:1.5em;
    padding: .4em;
    margin-right: .25em;
    line-height: .75;
    border: 4px solid #FFFFFF;
    font-family: "Helvetica";
    text-shadow: 3px 3px 10px #000000;
    box-shadow: 5px 10x 20px #000000;
    border-top-left-radius: .4em;
    border-bottom-right-radius: .2em;
}

@media screen and (min-width: 60em); 

figure {
    display:grid;
    grid-template-columns: 2fr 1fr;
}    

figcaption {
    display:flex;
    font-size: 2rem;
    text-align: center;
    color: #000000;
    margin-bottom: 1rem;
}

figure img{
    width: 100%;
}

/*Picture Hover Efffects*/

.circle img {
    transition: 1s ease;
}
    
.circle img:hover {
    border-radius:50%;
    transition: 1s ease;
}

#lit div {
    clear:both;
    max-width:100;
    columns: 20rem;
    margin: 0.5rem;
}

/* large screen size */

@media  and (min-width: 100em) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

hr {
    display: none;
}

#gallery h2 {
    grid-column: 1/-1;
}

/*Video Section */

#video {
    text-align: center;
    font-size: 30px;
    width: auto;
    height: auto;
    background-color: #8d85ff;
    padding: 2px;
}

body {
    font-family: 'Lora', serif;
    background-color: #ffffff;
    color: #000000;
}

/* Contact Form */

#formElements {
    display: grid;
    width: auto;
    height: auto;
    row-gap: .5em;
    color: #000000;
}

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

fieldset {
    /* border: solid #BDD3FF; */
    border: solid #000000;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 2rem;  
}

legend {
    background-color: #BDD3FF; 
    background-color: #ADD8E6; 
    color: #000000;
    padding: .5em;
}

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

#contact ul {
    list-style:none;
}

#contact li {
    margin: 1rem;
}

#contact button {
    background-color: #BDD3FF;
    color: #ffffff;
    border: 1px solid #0000ff;
    max-width: 400px;
    width: 50%;
    justify-self: center;
    color: #000000;
}

/* hamburger */

/* This navbar is a compromise. It turned out almost completely how I wanted it, but couldn't figure out how to have a black background, only faded transparent one. If I could have figured that out, I would have made the text white instead of black for the hamburger. Additionally, I will revisit this project one day to also have the navbar follow the user as they scroll up and down for easier navigation, though I'm not sure if that breaks any rules of design or not.*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
}

.container{
    width: 90%;
    margin: auto;
}

.navbar{
    width: 100%;
    box-shadow: 0 1px 4px rgb(146, 161, 176 / 15%);
}

.nav-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
}

.navbar .menu-items{
    display: flex;
}

.navbar .nav-container li{
    list-style: none;
}

.navbar .nav-container a{
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.7rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container{
    display: block;
    position: relative;
    height: 60px;
}

.nav-container .checkbox{
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.nav-container .hamburger-lines{
    display: block;
    height: 26px;
    width: 32px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav-container .hamburger-lines .line{
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #000000;
}

.nav-container .hamburger-lines .line1{
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2{
    transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3{
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
}

.navbar .menu-items{
    padding-top: 120px;
    box-shadow: inset 0 0 2000px #000000;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    text-align: center;
}

.navbar .menu-items li{
    margin-bottom: 1.5rem;
    font-size: 5rem;
    font-weight: 1000;
}

.logo{
    position:absolute;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items{
    transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
    transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
    transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
    transform: rotate(-45deg);
}

#logo-img {
    width: 96px;
    height: 96px;
}

/*
#icon img { 
    border: #000000 .1px solid;
}
*/

#blog1pic img {
    max-width: 150px;
}

#article img {
    max-width: 300px;
    max-height: 300px;
}

#article {
    border: 2px solid #000000;
    margin-bottom: 2rem;
    padding: 1rem;
    text-align:left; 
    color: #000000;
    font-size: 18pt
    text-align: justify;
}

.article img {
    transition: 1s ease;
}
    
.article:hover {
    border-radius:50%;
    transition: 1s ease;
}

#article {
    clear:both;
    max-width:100;
    columns: 20rem;
    margin: 0.5rem;
}

#articles {
    border: 2px solid #000000;
    margin-bottom: 2rem;
    padding: 1rem;
    text-align:left; 
    color: #000000;
    font-size: 18pt
    text-align: justify;
}

#video max-width: 300px{
    border: 2px solid #000000;
    margin-bottom: 2rem;
    padding: 1rem;
    text-align:left; 
    color: #000000;
    font-size: 18pt
    text-align: justify;
    
}

#articles iframe {
    max-width: 400px;
}

#video iframe {
    max-width: 400px;
}