html { /* css for html */
    font-size: 100%; /* makes font size 100% */
}
body { /*css for body */
    background-color: rgb(215, 236, 229); /* changes background color of site */
    margin: 0; /* sets margin to 0 in the body */
    padding: 0; /* sets padding to 0 in the body */
    font-size: 100%; /* makes font size 100% */
    font-family: Arial, Helvetica, sans-serif; /* sets font family that will be used in the body*/
}
.container h1 { /* css for color and font size of all h1 tags in the container */
    font-size: 500%; 
    color:rgb(0, 0, 0); 
}
.section2 h1 { /* css for the h1 element in the section2 div*/
    text-align: center;
    font-size: 500%;
    color:rgb(0, 0, 0);
}
.container h2 { /* css for all h2 tags in the container */
    font-size: 300%; /* sets font size to 300% */
    color:rgb(0, 0, 0); /* changes the color of h2 text */
}
#footer h2{ /* css for the h2 in the footer div */
    text-align: center;
    font-size: 200%;
}
h3,h4,h5,h6 { /* place holder for h3-h6 */
    
}
p { /* css for paragraph elements*/
    color: rgb(0, 0, 0);
    font-size: 200%;
    line-height: 2em; /* changes the line height between text*/
}
.container { /* css for the container div */
    border-radius: 25px; /* changes the radius of corners making them appear more round */
    margin: 0;
    padding: 11%;
}
#heading img{ /* css for image elements in the heading section */
    display: flex; /* changes the image display to flex*/
    margin: auto; /* centers the image*/
    padding: 7% 3% 3% 3%;
}
#menu { /* css for the nav bar*/
    background-color: rgb(255, 255, 255);
    opacity: 80%;
    position: fixed; /* fixes the nav bar to the top of the screen when scrolling*/
    width:100vw;
    box-sizing: content-box;
    padding:20px;
    top:0;  /* margin on top is 0 */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* creates a dropshawdow*/
}
#menu a.bookmark:hover { /* css for nav bar links in the menu div when hovered*/
    background-color: rgb(224, 217, 217);
}
.bookmark { /* css for nav bar links in menu div*/
    width: 200px;
    float: right;
    margin-right: 3%;
    text-decoration: none;/* gets rid of the underline on the links*/
    color: black;
    text-align: center;
    font-size: 150%;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2em; /* changes the line height between text*/
}
.section { /*css for section div aka the about me section */
    background-color: rgb(255, 255, 255);
    border-radius: 15px; /* changes the radius of corners making them appear more round */
    padding: 3% 3% 12% 3% ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.portrait { /* css for portrait in the section div */
    float: left; /* floats the portrait to the left of the div */
    margin: 10px 40px 10px 10px; /* creates a margin for the image in the portrait div */
}
.section2 { /* css for section2 div */ 
    background-color: rgb(255, 255, 255);
    border-radius: 15px; /* changes the radius of corners making them appear more round */
    padding: 3%;
    margin-top: 3em;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* creates a dropshawdow*/
}
.section2 img{ /* css for the image element in the section 2 div*/
    max-width: 50%;    
    margin-left: 25%;
}
.section3 { /* css for section3 div */
    text-align: center;
    margin-top: 3%;
    font-size: 75%;
}
.section3  a { /* css for links in the section3 div*/
    background-color: rgb(255, 255, 255);
    border-radius: 15px; /* changes the radius of corners making them appear more round */
    padding: 2%;
    font-size: 225%;
    text-decoration: none; /* gets ride of the underline of the link */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* creates a dropshawdow*/
    color:rgb(0, 0, 0);
}
.section3 a:hover { /* css for links in section3 when hovered */
    background-color: rgb(224, 217, 217);
}
#footer { /* css for the footer div*/
    background-color: rgb(255, 255, 255);
    padding:20px;
    bottom:0; /* makes the footer go to the bottom of the page */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* creates a dropshawdow */
    opacity: 80%; /* sets opacity of the div */
}
#footer li { /* css for the list in the footer div */
    text-align: center;
    list-style-type: none; /* makes the list icon go away*/
    font-family: Arial, Helvetica, sans-serif; /* sets font family that will be used in the footer */
    font-size: 200%;
}
#footer a{ /* css for the links in the footer div*/
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif; /* sets font family that will be used in the footer */
}