@charset "UTF-8";
/* CSS Document */

/** Universal formatting **/
* {box-sizing:border-box;}
html, body {width:100%; height:100%; margin:0; padding:0;}
body {display:grid; grid-template-columns: 100%; grid-template-rows:1fr auto 100px 1fr; background: black; font-size:15px; line-height:1.5em; color:white; grid-gap:50px;}
header {grid-row:2/3; display:flex; justify-content:flex-start; padding:0; margin:0;}
header > img {width:33%;}
main {grid-row:3/4; align-content: center; text-align: center; padding:0; margin:0;}
h1 {font-size: 50px; font-family: 'Black Ops One', cursive; letter-spacing: 2px;}
h2 {font-size:40px; font-family: 'Black Ops One', cursive; letter-spacing: 2px;}
h3 {font-size:20px; font-family: 'Black Ops One', cursive; letter-spacing: 2px;}
h4 {font-size:15px; font-family: 'Black Ops One', cursive; letter-spacing: 2px;}
footer{margin:0; padding:0; text-align: center; grid-row:4/5; display:grid; grid-template-rows:1fr auto;}
footer > p {margin: 0; padding: 0.5em; grid-row:2/3;}
footer > P > a, footer > P > a:visited {display: inline-block; margin:0; padding:0.25em 0.5em; color:darkgray; border:1px solid darkgray; text-decoration: none; text-transform: uppercase; font-family: 'Black Ops One', cursive; letter-spacing: 2px; line-height: 1em;}
footer > P > a:hover {color:antiquewhite; border-color: antiquewhite;}

.foot, .hop{display:none;}

.break{display:inline-block;}
/*** Screens 750px and wider ***/
@media screen and (min-width:800px){
body {grid-template-columns: 1fr 750px 1fr; grid-template-rows:1fr 250px 100px 1fr;}
header {grid-column:2/3;}
main {grid-column:2/3;}
footer{grid-column:2/3;}
header > img {width:250px;}

	}