/* 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:#59755e;
    color:#292e2a;
    font-family:"Figtree";
}

header {
    text-align:center;
}

#UQ {
    line-height: 2em;
}

#container {
    background:#edb8b4;
    border: solid black 2px;
    margin:30px;
    padding:10px;
}

main {
    padding:10px;
    background:#3c4b63;
    
}


img {
    width:100%;
    position:relative;
}


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

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

figcaption {
    background:#fff;
    margin:10px;
    position:relative;
    text-align:center;
}

section {
    background:#ccc;
    border:solid black 1px;
    text-align:justify;
    padding:10px;
}

ol {
    width:80%;
}




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



/* Minimum width for laptops. */

/*let your #container almost fill the width of the screen, and make sure it is centered.

Use CSS flexbox to start to align your 3 assets (the flex items) horizontally. For this narrow width, you can choose to align 2 of the asset items, and let the third span the width of the #container.

For this media query, flex-wrap: wrap; might be helpful in your flex container, especially if your 3 assets start to look too crushed together.
*/


@media all and (min-width: 769px) {
	
        /*flex parent*/
    main {
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    
    /*flex items*/

	figure{
		flex: 1 0 30%;
        align-content:center;
	}
	figure img{
		align-items: center;
	}
    
    section{
		flex: 1 1 40%;
        border-radius:5px;
	}
    
    #container {
        width: 80%;
        margin:auto; 
    }
	
} /* closes 769px+ */




/* Minimum width for desktop screens.*/

@media all and (min-width: 1024px) {

    main {
        flex-wrap:nowrap;
        justify-content: flex-start;
    }
    
    section {
		flex: 1 1 50%;
	}
    
    figure {
        flex-basis: 20%;
        align-content: flex-start;
    }
    
} /* closes 1024px+ */