/* 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: Montserrat;
    src: url(../fonts/sans-serif/lato-regular.ttf);
    font-weight:normal;
    font-style:normal;
}

@font-face{
    font-family: Josefinslab;
    src: url(../fonts/serif/josefinslab-regular.ttf);
    font-weight:normal;
    font-style:normal;
}

html{

    font-size:16px;
    font-family: Montserrat, Arial, Arial, Helvetica, sans-serif;
    color:#333;

}

.highlight {
    background-color: red;
    color:white;
    padding: 1rem;
    border-radius: 5px;
}

.article-image {

    float: left;
}

nav ol {

    list-style-type: none;
}

h1 {

    text-align: center;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
}



.subsection figure{
    display: grid;
    grid-gap: 0.5%;

}

aside {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

}