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

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 {
	background: #b2e8b2;
	
}


header, footer {
    color: #004d00;
    font-family: 'Anonymous Pro', monospace;
}

header {
    padding-left: 1em;
}

h1{
    font-weight: 700;
    font-size: 8em;
    line-height: .75em;
}

h2{
    font-weight: 400;
    font-size: 4.5em;
    line-height: .9em;
}

footer {
    text-align: right;
    padding-right: 1em;
}

main{
    font-family: Outfit, sans-serif;
    padding: 1em;
    font-weight: 300;
}

button.peaceDove, button.Earth, button.mountain{
    margin-bottom: 15px;
    border: 1px solid #004d00;
    padding: .5em 2em;
    font-size: 3.25em;
    border-radius: 10px;
    box-shadow: 6px 7px 6px green;
    background: #2da0316e;
}

p.handpan, p.spinningRock, p.ground{
    font-size: 1.5em;
    padding-left: 1.55em;
    padding-right: 1em;
    line-height: 1.5em;
}

#container {
	
}

figure.handpanVideo, figure.issLive, figure.maggieDocumentary {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    height: 0px;
    overflow: hidden;
    max-width: 100%;
}

figure.handpanVideo iframe, figure.issLive iframe, figure.maggieDocumentary iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


/* ========================================
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) {
	
	
	
	
} /* closes 769px+ */




/* Minimum width for desktop screens. */
@media all and (min-width: 1024px) {
	
    h1{
        font-size: 10em;
    }
    
    h2{
        text-align: center;
    }
    
	main {
        display: flex;
    }
    
    section {
        flex: 0 1 33%;
    }
    
    button {
        
        align-content: space-between;
    }
	
} /* closes 1024px+ */