/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
    font-family: "Roboto", sans-serif;
    text-align: center;
    background-color: #75695b;
    color: white;
    
}


html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}



/* Mobile First CSS: we'll design for phone sizes first, then add media queries for larger screens later */

body {
	
	
}


#container {
	padding: 20px;
    
}

figure.responsive {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    height: 0px;
    overflow: hidden;
    max-width: 100%;
    min-width: 60%;
}

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

figure.image, img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

button {
    background-color: black;
    color: white;
    outline-color: white;
}





/* ========================================
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) {
  main {
    max-width: 800px;
    margin: auto;
    padding: 20px;
  }
} /* closes 769px+ */




/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
  main {
    max-width: 1000px;
  }

  section.text {
    font-size: 1.2em;
    line-height: 1.6em;
  }
} /* closes 1024px+ */