/* Reset CSS Statements */
html, body, div, h1, h2, p, 
em, img, strong, ol, ul, sup,
li, footer, header nav, section{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 
footer, header, nav, section{
	display: block;
}

body{
	line-height: 1;
}

ol, ul{
	list-style: none;
}


/* Layout Statements */
body{
    background-color:gray;
}

#page{
    width:75%;
    margin:0 auto;
    font-family:Arial,sans-serif;
    background-color:white;
}

header{
    background-color:black;
}

/* Responsive Nav Bar */
nav{
    display:flex;
    background-color:black;
}
nav a{
    color:white;
    flex:1;
    padding:1% 3%;
    text-align:center;
    text-decoration:none;
}

footer{
    margin-top:2%;
    background-color:black;
    color:white;
}

/* Make the current page the user is on highlighted */
#current{
    color:black;
    background-color:white;
}

/* Nav element changes color if hovering on it */
nav a:hover{
    background-color:white;
    color:black;
}

/* Typography Statements */
p{
    line-height:1.4em;
    padding:0.5% 3%;
    max-width:70ch; /* Limits width to 70 characters */
}

h1{
    font-size:2em;
    padding:1% 3%;
}

header h1{
    font-size:2.5em;
    color:white;
}

h2{
    font-size:1.5em;
    padding:1.5% 3% 0.5% 3%;
}

sup{
    vertical-align:super;
    font-size:smaller;
}

em{
    font-style:italic;
}

a{
    color:black;
}

a:hover{
    font-weight:bold;
}

/* Image Styling */
img{
    display:block;
    max-width:40%;
    height:auto;
    padding:1% 3%;
}


/* Media Queries: Graceful Degredation Approach */

/* Bigger Images, More Padding, & 2-Column Nav */
@media screen and (max-width: 768px){
    img{max-width:60%;
        padding:2% 3%;}
    
    p{padding:1% 3%;}
    h1{padding:2% 3%;}
    h2{padding:3% 3% 1% 3%;}

    nav{flex-wrap:wrap;}
    nav a{flex-basis:27.33%;}
}

/* Remove Images and Vertical Nav */
@media screen and (max-width: 414px){
    img{display:none;}

    nav a{flex-basis:94%;}
}