/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		
	font-size: 1em;
    line-height: 1.4em;
}


body {
	
	background-color: #278C7B;
    
}


#container {
    width: 80%;
    padding:10px;
    background-color: #c7d1c9;
    margin:auto;
    border: 1px solid #123254;
	
}

main { 
 padding: 20px;
  margin-bottom: 20px;
    font-family: "Syne Mono", serif;
  font-weight: 400;
 font-size: 24px;
    flex-wrap: wrap;
  font-style: normal;
  color:#1b4b7e;

}

img { 
width:100%;
    height:auto;
}
 
figure.responsive {
    position: relative;
    padding-bottom: 56.25%;  
    height: 0px;
    overflow: hidden;
    max-width: 100%;
}

figure.responsive iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


header, footer { padding: 5px;
    color: #1b4b7e;}

a {
    
    color:#278C7B

}






/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */



/* Minimum width for laptops. */
@media all and (min-width: 769px) {
	
    body { 
    background:#123254;
    }
    
    header{ color:#278C7B;}
    
    main {
        font-size: 20px;
        color:#278C7B;
    }
    
    a {
    
    color:#123254;

}
	
	
} /* closes 769px+ */




/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
    body { 
        background:#123254;
    }
    header {
       color: #c7d1c9;
    }
    
    #container{ 
    background:#278C7B;}

    main {
        display: flex;
        color: #c7d1c9;
    }

    section,figure:not(.responsive) {
        flex: 1 0 0%;
        padding: 10px;
    }

    main > figure.responsive {
        flex: 1 0 0%;
        padding: 10px;
        position: relative;
        width: 100%; 
        height: 0; 
        padding-bottom: 56.25%; 
    }

    main > figure.responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
 
	
	
} /* closes 1024px+ */