/*
This is a good layout for a mobile-first CSS template.
Following this flow will minimize the number of styles you need to write and will ensure you are thinking, designing and developing mobile-first.
Most of your styles get written like standard CSS, but for your mobile presentation. Generally speaking, a good mobile presention will stretch out nicely for larger screens.

Sometimes, when we stretch out to larger screens, we need to make minor tweaks for the larger devices -- you can make these tweaks in the tablet media query, or if the issue exists on desktop only, the desktop media query.
You will find this is far easier than the opposite task of using CSS to cram your desktop experience into a mobile device.
*/
/*********************************************************************
 LOADS IN A NICE RESET TO ENSURE ALL BROWSERS HAVE THE SAME BASE STYLES
*********************************************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');

/*********************************************************************
  YOUR MOBILE/BASE STYLES GO HERE
*********************************************************************/
* {
    box-sizing: border-box;
}

html, body {
    /* Sets default font-size to 16px, ensuring 1em = 16px; */
    font-size: 16px;
}

body {
    background-color: oldlace; /* Sets the background color to oldlace on a phone*/
    font-family: Inter, sans-serif; /* Should call the imported font Inter. Sets sans-serif as the backup font */
} 

figure {
    max-width: 650px; /* Sets the maximum width of the figure box */
}

img {
    max-width: 100%; /* Sets the image size at 100 percent of the maximum figure width */
}

figcaption {
    color: saddlebrown;
}

.byline {
    margin-bottom: -15px; /* Decreases the space between the byline and the date */
}

h4 {
    color: saddlebrown; /*Sets the color of the subheading to navy */
    font-style: italic;
}

.main {
    margin: 20px;
    max-width: 750px; /*Sets the maximum width of the main div on a phone */
    padding: 20px;

}

.chart {
    margin: 20px;
    max-width: 750px; /*Sets the maximum width of the chart on a phone */
    background-color: white; /* Sets the background color of the chart to white */
    padding: 20px; /* Increases the size of the white space around the chart */
}


/*********************************************************************
  YOUR TABLET/DESKTOP STYLES GO HERE
*********************************************************************/
@media(min-width: 681px) {
    /* Any adjustments for tablets and larger go here.
    Note these styles will be applied to anything 681px or larger -- so tablet AND desktop */

    body {
        background-color: gainsboro; /*Sets the background color to gainsboro on a tablet/desktop */
    }

    figcaption {
        color: navy;
    }

    .main {
        max-width: 850px; /*Sets the maximum width of the main div on a tablet/desktop */
        margin: auto;
    }

    .chart {
        max-width:850px; /* Sets the maximum width of the chart on a tablet/desktop */
        margin:auto;
    }

    h4 {
    color: navy; /*Sets the color of the subheading to navy */
    }
}

/*********************************************************************
  YOUR DESKTOP-ONLY STYLES GO HERE
*********************************************************************/
@media(min-width: 729px) {
    /* Any adjustments for desktop and larger go here.
    Note these styles will be applied to anything 729px or larger -- so desktop */
}