/* Import font at top */ 

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Squada+One&display=swap');

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	 
	
	/* end reset*/
    

    /* add your css*/

    /*Default CSS (phone)*/

    #wrapper{
        margin-bottom: 2%;
        padding: 1% 2% 1% 2%;
        background-color: #05AFF2;
    }

    hr{
        color: #022873;
    }

    body{
        background-color: #05AFF2;
    }

    #navbar_li{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    nav li{
        display: block;
    }

    nav li a{
        display: block;
        text-align: center;
        text-decoration: none;
        border: 2px solid black;
        font-family: "Squada One", georgia, serif;
    }

    a:link, a:visited{
        color: black;
    }

    a:hover, a:focus{
        color: #33FF35;
    }

    nav li a:link, nav li a:visited{
        color: black;
    }

    nav li a:hover, nav li a:focus{
        color: #33FF35;
    }

    h1{
        font-family: "Squada One", georgia, serif;
        text-align: center;
        font-size: 3em;
    }

    h2{
        font-family: "Squada One", georgia, serif;
        font-size: 2.2em;
        text-align: center;
    }

    h3{
        font-family: "Squada One", georgia, serif;
        font-size: 1.5em;
        text-align: center;
    }

    h4{
        font-family: "Squada One", georgia, serif;
        font-size: 1.2em;
        text-align: left;
        text-indent: 4%;
    }

    figcaption{
        font-family: Lato, arial, sans-serif;
        font-size: 1.1em;
        text-align: center;
    }

    p{
        font-family: Lato, arial, sans-serif;
        font-size: 1.2em;
        padding: 2%;
        text-indent: 6%;
    }

    header p{
        text-align: center;
        padding: 0%;
        text-indent: 0%;
    }

    #concept_image_div{
        display: grid;
        grid-template-areas:
        'imageone imagetwo imagethree'
        ;
    }

    #concept_image1 img{
        border: 1px solid #022873;
        grid-area: imageone;
        display: block;
        margin: auto;
        max-width: 50%;
        transition: transform 0.25s ease;
        cursor: zoom-in;
    }

    #concept_image2 img{
        border: 1px solid #022873;
        grid-area: imagetwo;
        display: block;
        margin: auto;
        max-width: 50%;
        transition: transform 0.25s ease;
        cursor: zoom-in;
    }

    #concept_image3 img{
        border: 1px solid #022873;
        grid-area: imagethree;
        display: block;
        margin: auto;
        max-width: 50%;
        transition: transform 0.25s ease;
        cursor: zoom-in;
    }

    #boss_sprite img{
        max-width: 50%;
        display: block;
        margin: auto;
    }

    iframe{
        margin: 0 auto;
        padding: 1%;
        display: block;
    }

    input[type=checkbox] {
        display: none;
    }

    input[type=checkbox]:checked ~ label > img {
        transform: scale(2.5);
        cursor: zoom-out;
    }

    #song1{
        display: hidden;
    }

    #song2{
        display: hidden;
    }

    #art_assets img{
        margin: 0 auto;
        display: block;
        max-width: 50%;
    }

    #animation_assets img{
        margin: 0 auto;
        display: block;
        max-width: 100%;
    }

    #gifs{
        display: grid;
        grid-template-areas:
        'hope z'
        ;
    }

    #hope img{
        grid-area: hope;
    }

    #zero img{
        grid-area: z;
    }



    /*Tablet CSS*/

    @media only screen and (min-width: 520px) and (max-width: 800px){

    #wrapper{
        padding: 2% 5% 2% 5%;
    }

    .top_of_page{
        visibility: hidden;
    }

    body{
        background-image: url(images/computer_code.jpeg);
    }

    }

    /*Desktop CSS*/

    @media only screen and (min-width: 801px){

    #wrapper{
        padding: 2% 15% 2% 15%;
    }

    .top_of_page{
        visibility: hidden;
    }

    body{
        background-image: url(images/computer_code.jpeg);
    }

    }