/* TO GET AN IDEA OF THE CSS YOU WILL LIKELY BE USING, SEE THE LISTS BELOW. */

        /* 
        
        Spacing 

            - padding (shorthand and/or specific properties like padding-bottom, etc.)

            - margin, (shorthand and/or specific properties like margin-top, etc.)

            - letter-spacing, word-spacing, line-height

            - width, max-width, min-width
            - height, max-height, min-height

        Typography 

            - font-family, font-size, font-style, font-weight

            - text-decoration, text-align

            - color

            - text-shadow, text-transform

        Box, Layout and Border 

            - border (shorthand and/or specific properties like border-top, border-bottom-radius, border-width, etc.)

            - box-shadow

            - display, float, align-items, align-content

            - grid-template-columns, grid-column-gap

            - transform

        Other

            - :nth()-child (to target specific child elements)

            - :focus, :hover, :active (to target link states)

            - @font-face or @import (to import typefaces)

        */


/* ------ START WRITING YOUR CODE BELOW ------ */


@font-face{
    font-family:sans-serif;
    src: url(../fonts/sans-serif/lato-regular.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face{
    font-family:serif;
    src: url(../fonts/serif/robotoslab-regular.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
}

html{ 
    font-size:10px;
    background-color:white;
}

body{
    margin:auto;
    color:black;
    padding: 1rem;
    
}

header{
    margin-bottom:2rem;
    margin-top:2rem;
    padding-bottom:2rem;
}

h1{
    text-align:center;
    color:darkslateblue;
    font-size:4rem;
    font-family:"serif";
    
}

h1 span{
    background-color:darkslateblue; 
    color: white;
    padding-left:1rem;
    padding-right:1rem;
}

h2{
    font-size:2.2rem;
    margin-top:5rem;
    margin-bottom:2rem;
    margin-left:6rem;
    font-weight:100;
    font-family:"serif";
    color:darkslateblue;
}

h3{
    font-size:2rem;
    font-family:"serif";
    font-weight:100;
    color:darkslateblue;
}

.article-image{
    float:left;
    margin-right:2.5rem;
    margin-left:0;
    margin-bottom:.75rem;
    width:40%;
    
}

p, li{
    line-height:2.2rem;
    font-size:1.7rem;
    font-family:"sans-serif";
}

nav{
    border:1rem solid darkslateblue;
    background-color:#8FB0D0;
}

nav a{
    text-decoration:none;
}

nav ul{
   text-align:center;
}

nav li{
    display:inline;
    margin:5rem;
    font-size:2rem;
}

nav a:hover{
    color:#8FB0D0;
    background-color:darkslateblue;
    padding-top:1rem;
    padding-bottom:1rem;
}

main{
    padding-left:2%;
    padding-right:2%;
}



aside{
    float:right;
    margin:0 1.5%;
    width: 30%;
    border-left:.2rem darkslateblue solid;
    padding-left:.9rem;
}

aside img{
    width:75%;
}

aside a{
    font-size:.5rem;
    text-decoration:none;
    color:black;
}

aside a:hover{
    font-size:.7rem;
}

.main-section{
    float:left;
    margin:0 1.5%;
    width:63%;
}

.subsection>figure{
    Width:20%;
    display:inline-block;
} 

.fig1{
    width:100%;
}

.fig2{
    width:100%;
}

.fig3{
    width:100%;
}

figcaption{
    font-size:1rem;
    padding:.5rem;
    margin:0;
    background-color:#8FB0D0;
}

button{
    background-color:darkslateblue;
    color:white;
    text-align:center;
    font-size:3rem;
    border-radius:1.2rem;
    margin-bottom:1.2rem;
}

footer>p{
    padding-top:1.5rem;
    clear:both;
    overflow:auto;
    margin:3% 2%;
    border-top: 1px solid #333;
    font-size:.75rem;
    color:black;
    text-align:right;
}