@charset "utf-8";
/*
    This is one of the primary stylesheets
    that defines the layout of the Tech
    Tutorials website.

    ╔══════════════════════╗
	║Header & Footer Layout║
	╚══════════════════════╝
*/
header, footer {text-align: center}
/*
    ╔═══════════╗
	║Body Layout║
	╚═══════════╝
*/
body {
    flex-flow: column wrap;
    padding: 20px;
    margin: 5%; /* Sets size of margin and padding */
    min-height: 970px;
    min-width: 500px; /* Sets size of height and width  */
    max-width: 850px; /* so content isn't cut out of body. */
}
/*
    ╔════════════════╗
	║Paragraph Layout║ For tutorials and About page.
	╚════════════════╝
*/
p {
    margin-left: 150px;
    padding: 50px;
}
/*
    ╔═════════════════╗
	║Navigation Layout║
	╚═════════════════╝
*/
nav#nav {
    margin-left: 0;
    margin-right: 0;
    padding: 15px;
}
nav#nav a {padding: 20px;}

div#list nav ul li {
    list-style: none; /* Removes those pesky bullets. */
    padding-bottom: 10px;
    position: relative; /* Moves the nav list left */
    left: -20px; /*  where the bullets used to be. */
}
h2#list_head {margin: 20px 0 10px 10px} /* Scoots header over a bit */
/*
    ╔═══════════════╗
	║Div Grid Layout║ For the homepage.
	╚═══════════════╝
*/
div#list {
    width:15%;
    float: left /* Floats the list of articles */
}

div.row {
    width:75em;
    float: left;   /* Floats the featured articles */
    display: -webkit-flex;
    display: flex; /* Flexes the featured articles */
}
div#content::after { /* Clears floats after the grid. */
    clear: both;
    content: "";
    display: table;
}
div {overflow: hidden} /* This is so the images don't overflow. */

figure.feature {margin:2px} /* Spaces out the featured items. */
/*
    ╔═══════════╗
	║Form Layout║ For the Contact page.
	╚═══════════╝
*/
form { /* Flexes the form. */
    display: -webkit-flex;
    display: flex;
    overflow: auto;
}
form#contact_form fieldset {
    width: 500px;
}
textarea { /* Sets the size of large text boxes. */
    margin-top:10px;
    height:100px;
    width:95%;
}
input {float:right} /* Sets the text boxes apart. */
label {float:left}
/*
    ╔════════════════════╗
	║Image & Video Layout║
	╚════════════════════╝
*/
#feat2,#feat3 {width:270px}
#feat1,#feat4 {width:620px} /* Sets the sizing of images */

img.social {height: 20px} /* Makes the social icons smaller */

#about,#contact { /* Flexes and sizes the images on the about/contact pages. */
    display:flex;
    width: 690px;
}
.step_img, video {
    max-height: 500px;
}
img, video {max-width: 100%} /* Images not flexed have at most 100% width. */