/*  Media Query Breakpoint for Desktop */
/*@media only screen and (min-width: 1025px) and (max-width: 1440px) { */
    
    html, body {
        width: 100%;
        background-color: rgba(255, 255, 255, .48);
        /*background-color: #EEE;*/
    }
    @font-face {
        font-family: "IndieFlower";
        src: url("css/IndieFlower-regular.ttf");
    }

    @font-face {
        font-family: "ClimateCrisis";
        src: url("css/ClimateCrisis-Regular-VariableFont_YEAR.ttf");
        
        }
    article {
        display: block;
        clear: both;
        margin-top: 5%;
    }
    aside {
        overflow: hidden;
    }
    banner {
        background-image: url(heroimage.png);
        background-size: cover;
        position: relative;
        width: 100%;
        height: 45vh;
    }
    #box1 {
        background-image: url(goldenagecircle.png);
        background-size: cover;
    }
    #box2 {
        background-image: url(silveragecircle.png);
        background-size: cover;
        
    }
    #box3 {
        background-image: url(bronzeagecircle%202.png);
        background-size: cover;
    }
    #box4 {
        background-image: url(wolverine.jpg);
        background-size: cover;
    }
    caption {
        display: block;
        clear: both;
        text-align: left;
    }
    #closex1 {
        font-family: Tahoma;
        font-size: 1em;
        font-weight: 300;
        display: block;
        color: white;
        box-shadow: gray 2px 2px 4px;
        padding: 0.5em;
        border: 2px;
        border-style: solid;
        width: 1em;
        border-radius: 4px;
        border-color: indianred;
        background-color: indianred;
    }
    #closex1:hover {
        color: indianred;
        background-color: yellow;
        border-color: yellow;
        cursor: pointer;
    }
    .closeMe {
        animation-name: fadeout;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }
    .close {
        display: none;
    }
    @keyframes fadeout {
        from {
            display: block;
            opacity: 1;
        } to {
            display: none;
            opacity: 0;
        }
    }
    #desktop {
        display: block;
    }
    @keyframes animateside {

        from {
                    transform: translateX(-1000px);
                    opacity: 0;
                }
                to {
                    transform: translateX(300px);
                    opacity: 1;
                }
    }
    #epilogue {
        width: 80%;
        padding-right: 10%;
        padding-left: 10%;
    }
    figcaption {
        display: block;
        float: none;
        clear: both;
        padding: 0;
        margin-bottom: 5%;
        margin-top: 0;
        text-align: center;
    }
    figcaption a {
        font-family: sans-serif;
        font-size: 1em;
        color:blue;
        text-decoration:underline;
        text-decoration-style: dotted;
        text-decoration-color: darkblue;
        transition: all .2s ease-out;
        padding: 3px;
        background: linear-gradient(to bottom,
            rgba(255, 194, 102, 0) 0%,
            rgba(255, 194, 102, 0) 50%,
            rgba(255, 194, 102, 1) 50%,
            rgba(255, 194, 102, 1) 100%);
        background-repeat: no-repeat;
        background-size: 100% 200%;        
    }
    figcaption a:hover {
        color:black;
        background-position: 0 100%;
    }
    #filler {
        width: 80%;
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        padding-right: 9%;
        margin-right: 1%;
        overflow: hidden;
        display: block;
        float: none;
        clear:both;
        z-index: 24;
        position: relative;
        transform: translateY(-600px);
    }
    #filler h2 {
        display: block;
        float: none;
        clear: both;
        opacity: 1;
    }
    #filler p {
        opacity: 1;
    }
    #comicsdisplay {
        display: block;
        float: none;
        clear: both;
        height: 30%;
        width: auto;
    } 
    .firstimages {
        float: left;
        width: 35%;
        margin-right: 10%;
    }
    flex-container {
        flex-shrink: 1;
    }
    footer {
        clear: both;
        margin-top: 400px;
        display:block;
        background-color: skyblue;
        column-count: 2;
        column-width:auto;
        padding-left: 3%;
        padding-right: 3%;
    }
    .formats {
            width: 80%;
            margin-left: 1%;
            padding-left: 9%;
            padding-right: 10%;
            padding-right: 9%;
            margin-right: 1%;
    }
    .gallery {
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        padding-right: 9%;
        margin-right: 1%; 
    }
     #game {
        display: block;
        height: 800px;
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        padding-right: 9%;
        margin-right: 1%;
    }
    h1 {
        font-family: "Climate Crisis";
        color: white;
        text-shadow: black 2px 2px;
        font-size: 3em;
        width: 40%;
        margin-left: 25%;
        position: relative;
        display: block;
        top: 150px;
        left: -300px;
    }
    h2 {
        font-family: "Indie Flower", cursive;
        font-size: 3em;
        position: relative;
        display: block;
        padding-top: 15%;
        border-top: 4px;
        border-top: skyblue;
        border-top-style: solid;
        text-align: center;
    }
    h3 {
        font-family: "Indie Flower", cursive;
        font-size: 2em;
        position: relative;
        display: inline-block;
        margin-left: 5em;
        text-align: center;
    }
    #herocape1 {
        position: absolute;
        display: block;
        z-index: 1;
        top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape2 {
        position: absolute;
        display: block;
        z-index: 2;
            top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape3 {
        position: absolute;
        display: block;
        z-index: 3;
            top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape4 {
        position: absolute;
        display: block;
        z-index: 4;
            top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape5 {
        position: absolute;
        display: block;
        z-index: 5;
            top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape6 {
        position: absolute;
        display: block;
        z-index: 6;
             top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    #herocape7 {
        position: absolute;
        display: block;
        z-index: 7;
            top: -70vh;
        right: 100px;
        flex-shrink: 1;
    }
    header {
        background-image: url(heroimage.png);
        background-size: cover;
        position: relative;
        width: 100%;
        height: 45vh;
        z-index: 0;
    }
    #heropic {
        position: absolute;
        z-index: 8;
        right: 200px;
        top: -5vh; 
        flex-shrink: 1;
    }
    #headerlogo {
        transform: translate3d(150%, 5%, 0);
        width: 15%;
    }
    #history {
        display: inline-block;
        z-index: 0;
        margin-left: 10%;
        margin-right: 10%;
    }
    .historyimg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: black 2px 2px 2px;
        transform: translate3d(0, 0, 0);
        transition: width, height;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
        display: inline-block;
        float: left;
        z-index: 4;
        position: absolute;
        background-size: cover;
    }
    .historyimg:hover {
        cursor: pointer;
        width: 200px;
        height: 200px;
    }
    .historytext {
        display: none;

    }
    .historytext1 {
        background-color: yellow;
        border: 2px;
        border-style: solid;
        border-color: black;
        border-radius: 6px;
        box-shadow: gray 2px 2px 4px;
        display: block;
        padding: 5%;
        opacity: 0;
        width: 40%;
        animation-name: fadein;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        z-index: 3;
        left: 300px;
        position: absolute;
    }
    @keyframes fadein {
        from {
            opacity: 0;
        } to {
            opacity: 1;
        }
    }
    .historytext2 {
        background-color: yellow;
        border: 2px;
        border-style: solid;
        border-color: black;
        border-radius: 6px;
        box-shadow: gray 2px 2px 4px;
        display: block;
        padding: 5%;
        opacity: 0;
        width: 40%;
        animation-name: fadeout;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        z-index: 3;
        left: 300px;
        position: absolute;
    }
    @keyframes fadeout {
        from {
            opacity: 1;
        } to {
            opacity: 0;
        }
    }
    #howtoread {
        border-top: 4px;
        border-color: skyblue;
        border-style: solid;
        border-right: 0;
        border-left: 0;
        width: 80%;
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        padding-right: 9%;
        margin-right: 1%;
    }
    #htext1 {
        display: inline-block;
        float: left;
        padding-left: 10%;
    }
    #htext2 {
        display: inline-block;
        float: left;
        padding-left: 10%;
    }
    #htext3 {
        display: inline-block;
        float: left;
        padding-left: 10%;
    }
    #htext4 {
        display: inline-block;
        float: left;
        padding-left: 10%;
    }
    .illustration {
        display: inline-block;
        width: 500px;
        height: auto;
        margin: 10%;
        float: left;
        transform: translate3d(0, 0, 0);
        border-radius: 25px;
        border: 2px;
        border-style: solid;
    }
    img {
        transform: translate3d(0, 0, 0);
        display: inline-block;
        float: left;
    }
    .images {
        display: inline-block;
        float: left;
        margin: 1%;
    }
    #instructionButton {
        width: 100px;
        height: 100px;
        background-color: indianred;
        color: white;
        font-family: "Climate Crisis";
        text-align: center;
        font-size: 14pt;
        box-shadow: gray 2px 2px 4px;
        z-index: 30;
        margin-left: 250%;
        padding: 1%;
        
    }
    #instructionButton:hover {
        cursor: pointer;
        background-color: yellow;
        color: indianred;
    }
    #instructions {
        z-index: 10;
        border: 1px;
        color: white;
        border-style: solid;
        border-radius: 50px;
        border-color: black;
        box-shadow: gray 4px 4px 8px;
        overflow: auto;
        background-color: skyblue;
        padding-left: 5%;
        padding-right: 5%;
        text-align: center;
        transform: translate3d(0, 0, 0);
        position: absolute;
        animation-name: animateside;
        animation-duration: 2s;
       animation-timing-function: ease-in-out;
        display: none;
    } 
    .lastgraph {
        padding-bottom: 10%;
        border-bottom: 4px;
        border-bottom-color: skyblue;
        border-bottom-style: solid;
    }
    #firsthalf {
        width: 45%;
        float: left;
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        overflow: hidden;
    }
    #secondhalf {
        width: 80%;
        height: auto;
        margin-left: 1%;
        padding-left: 9%;
        padding-right: 10%;
        padding-right: 9%;
        margin-right: 1%;
        overflow: hidden;
    }
    #nav {
        width: 100%;
        height: 10vh;
        background-color: skyblue;
        position: relative;
        text-decoration: none;
        list-style: none;
        color: white;
    }

    p {
        font-family: Tahoma, sans-serif;
        font-size: 1em;
        display: block;
        float: none;
        clear:both;
    }
    #outershell {
        position: relative;
    }
    .panel {
        display: inline-block;
        float: left;
        width: 35%;
        margin-top: 1%;
        padding:  0;
        border: 2px;
        border-style: solid;
        border-radius: 25px;
    }
    #panelsequence {
        display: block;
    }
    #parallax {
        border: 2px;
        border-style: solid;
        height: 700px;
        width: 35vw;
        background-size: cover;
        background-repeat: no-repeat;
        float: right;
        position: relative;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
        animation-name: skyblend;
        animation-duration: 20s;
        animation-timing-function: ease-in-out; 
        animation-iteration-count: infinite;
        z-index: 1;
        display: block;
        top: -700px;
        bottom: 0;
    }
    #capeanimation {
        transform: translate3d(330px, -200px, 0);
        display: block;
        animation-name: capeanimation;
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(.16,.49,1,.44);
        animation-iteration-count: infinite;
        background-repeat: no-repeat;
        height: 100vh;
        position: relative;
    }
    @keyframes capeanimation {
        0% {
            background-image: url(herocape1.png)
        }
        8.3% {
            background-image: url(herocape2.png)
        }
        16.6% {
            background-image: url(herocape3.png)
        }
        24.9% {
            background-image: url(herocape4.png)
        }
        33.2% {
            background-image: url(herocape5.png)
        }
        41.5% {
            background-image: url(herocape6.png)
        }
        49.8% {
            background-image: url(herocape7.png)
        }
        58.1% {
            background-image: url(herocape6.png)
        }
        66.4% {
            background-image: url(herocape5.png)
        }
        74.7% {
            background-image: url(herocape4.png)
        }
        82% {
            background-image: url(herocape3.png)
        }
        90.3% {
            background-image: url(herocape2.png)
        }
        100% {
            background-image: url(herocape1.png)
        }

    }
    #city {
        height: 500px;
        width: 35vw;
        overflow: hidden;
        position: relative;
    }
    .cityscroll {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background-position: center;

    }
    #layer1 {
        background-image: url(citylayer1.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        position: fixed;
        height: 800px;
        width: 35vw;
        opacity: 1;
        transform: translate3d(0, 500px, 0);
        z-index: -4;
        overflow: hidden;
    }
    #layer2 {
        background-image: url(citylayer2.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        position: fixed;
        width: 35vw;
        height: 800px;
        z-index: -3;
        opacity: 1;
        transform: translate3d(0, 500px, 0);
        overflow: hidden;
    }
    #layer3 {
        background-image: url(superhero.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        position: fixed;
        width: 35vw;
        height: 2000px;
        z-index: -1;
        opacity: 1;
        transform: translate3d(0, 0, 0);
        overflow: hidden;
        
    }
    #layer4 {
        background-image: url(citylayer4.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        position: fixed;
        width: 35vw;
        z-index: -2;
        height: 2000px;
        opacity: 1;
        transform: translate3d(0, 0, 0);
         overflow: hidden;
        
    }
    @keyframes skyblend {
        0% {
            background-image: url(bgyellow1.png);
        }
        25% {
            background-image: url(bgyellowgradient2.png);
        }
        50% {
            background-image: url(backgroundred3.png);
        }
        75% {
            background-image: url(bgredgradient4.png);
        }
        100% {
            background-image: url(bgblue5.png);
        }
    }
    .secondimages {
        float: left;
        width: 35%;
        margin-left: 10%;
    }
    #splashimage {
        display: block;
        width: 90%;
        border: 4px;
        border-style: solid;
    }
    .slideshow {
        width: 300px;
        height: 300px;
        display: inline-block;
    }
    #tabletSmartphone {
        display: none;
        border: 1px;
        border-style: solid;
        border-radius: 6px;
        background-color: skyblue;
        box-shadow: black 2px 2px 2px;
        padding-left: 10%;
        top: 100px;
        animation-name: animateside;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
    }
    .titlesection {
        display: block;
        width: 100%;
        clear: both;
    }

    /* slider */

            .content {
              float: left;
              width: 550px;
              height: 350px;
              white-space: normal;
              background-repeat: no-repeat;
            }
            #itemOne {
              background-color: indianred;
              background-image: url(covergoldenage.png);
                background-size: cover;

            }

            #itemTwo {
              background-color: gold;
              background-image: 
                url(coversilverage.png);
                background-size: cover;
            }

            #itemThree {
              background-color: skyblue;
               background-image: url(coverbronzeage.png);
                background-size: cover;
            }

            #itemFour {
              background-color: indianred;
              background-image: 
                url(covermodernage.png);
                background-size: cover;
            }
            .wrapper {
              width: 2200px;
              transform: translate3d(0, 0, 0);
              transition: transform .5s ease-in-out;
            }
            .contentContainer {
              width: 550px;
              height: 350px;
              border: 5px solid black;
              overflow: hidden;
            }

    /*slider nav*/
            #navLinks {
              text-align: center;
              width: 550px;
            }
            #navLinks ul {
              margin: 0px;
              padding: 0px;
              display: inline-block;
              margin-top: 6px;
            }
            #navLinks ul li {
              float: left;
              text-align: center;
              margin: 10px;
              list-style: none;
              cursor: pointer;
              background-color: #CCCCCC;
              padding: 5px;
              border-radius: 50%;
              border: black 5px solid;
            }
            #navLinks ul li:hover {
              background-color: #FFFF00;
            }
            #navLinks ul li.active {
              background-color: #333333;
              color: #FFFFFF;
              outline-width: 7px;
            }
            #navLinks ul li.active:hover {
              background-color: #484848;
              color: #FFFFFF;
            }




    /*nav style */
    .navitem {
            color: white;
            text-decoration-line: none;
            text-decoration: none;
            display: inline-block;
        }
        nav ul {
            text-decoration: none;
            list-style: none;
        }
       nav ul li {
            text-decoration: none;
            list-style: none;
            padding-right: 40px;
            font-family: "Climate Crisis";
            font-size: 1em;
            text-shadow: 2px 2px black;
            transition: scale 0.5s ease-out;
            display: inline-block;
            transform: translate3d(0, 0, 0);
            position: relative;
            z-index: 1;
            bottom: 2em;
           margin-top: 3.5em;
        }
        .navitem:hover {
            color: yellow;
            text-shadow: 4px 3px black;
            transform: translate3d(0, 0, 0);
            transform: scale(1.25);
        }
        #navlogo {
            width: 70px;
            padding-top: 20px;
            display: none;
        }
        #navlogo:hover {
            background-color: yellow;
            border-radius: 60%;
            border: 2px;
            border-color: yellow;
            border-style: solid;
            padding-right: 0;
        }

    #therest {
        transform: translateY(-800px);
    }
    /*scrolling effect */
    html{
        scroll-behavior: smooth;
    }

    .myBtn {
       /* display: none;     comment this out at first*/
        position: fixed;
        bottom: 20px;
        left: 30px;
        z-index: 99;
        font-family: Tahoma, sans-serif;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: indianred;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
        box-shadow: gray 2px 2px 4px;
    }

    .myBtn:hover {
        background-color: skyblue;
    }

    .menu {
        display: none;
    }
    #close {
        display: none;
    }

    /*animate links */
    

     /*  body links*/
    p a {
        font-family: sans-serif;
        font-size: 1em;
        color:blue;
        text-decoration:underline;
        text-decoration-style: dotted;
        text-decoration-color: darkblue;
        transition: all .2s ease-out;
        padding: 3px;
        background: linear-gradient(to bottom,
            rgba(255, 194, 102, 0) 0%,
            rgba(255, 194, 102, 0) 50%,
            rgba(255, 194, 102, 1) 50%,
            rgba(255, 194, 102, 1) 100%);
        background-repeat: no-repeat;
        background-size: 100% 200%;

    }

    p a:hover {
        color:black;
        background-position: 0 100%;
    }


    /*canvas pages*/
    #eastern {
        background-image: url(eastern.png);
        background-size: cover;
        display: inline-block;
        float: left;
        border:2px;
        border-style: solid;
    }
    #western {
        background-image: url(western.png);
        background-size: cover;
        display: inline-block;
        float: left;
        border:2px;
        border-style: solid;
    }

/*game */


     #gamebg {
                position: absolute;
                z-index: 1;
                border: 1px solid gray;
                border-radius: 15px;
                background-image: url(droblivion.png);
                background-size: cover;
                margin-left: 20%;
    }

    #gamefg {
                position: absolute;
                z-index: 2;
                border: 1px solid gray;
                border-radius: 15px;  
                margin-left: 20%;
    }












/*  Media Query Breakpoint for Tablet */
@media only screen and (min-width: 641px) and (max-width:1024px) { 




    /* hamburger menu */
    .menu{
        font-size: 2em;           
        position: fixed; /* needed to stay in one place */
        z-index: 13;      /* needed to keep this in front of scrolling content */
        padding: 5px;
        transition: all .1s ease-out; /* control the animation of the hover effect */
        display: block;
        overflow: auto; 
    }
    .menu:hover{
        color:indianred; /* change text color on hover */
        cursor: pointer; /* Change cursor to pointer on hover */            
        transform: scale(1.5);  /* scale icon 1.5 times on hover */
    }
    li#close{
        padding: 8px;
        color: white;
    }

    li#close:hover{
        cursor:pointer;
        color:red;
    }

        
    /* main stylings */
    

    aside {
        display: none;
    }
    #capeanimation {
        transform: scale3d(50, 50, 50);
        bottom: 250px;
        left: 50px;
    }
    #close {
        display: block;
        margin-top: 1em;
        top: 0em;
        left: -2em;
    }
    .continuingtext {
        display: block;
        width: 90%;
        float: none;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
    }
    #desktop {
        display: none;
    }
    #filler {
        display: block;
        transform: translateY(0);
    }
    #firsthalf {
        width: 90%;
        float: left;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
    }
    .firstimages {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    .format {
        width: 90%;
        float: none;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
    }
    h1 {
        font-size: 2em;
        margin-left: 40%;
        position: relative;
        display: block;
        top: 100px;
        left: -300px;
    }
    
    h2 {
        text-align: center;
    }
    header {
        flex-shrink: 1;
        background-size: cover;
        height: 35vh;
    }
    #headerlogo {
        transform: translate3d(150%, 5%, 0);
        width: 15%;
    }
    .illustration {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    #instructionButton {
        display: block;
        margin-left: 150%;
    }
    #instructionButton:hover {
        cursor: pointer;
        background-color: yellow;
        color: indianred;
    }
    
    .menu {
        display: block;
        background-color: skyblue;
        color: yellow;
        top: 10%;
        box-shadow: gray 2px 2px 4px;
        border-radius: 4px;
    }
   .myBtn {
        display: none;
    }
    
    #nav {
        display: none;
        height: 400px;
        width: 200px;
        border-radius: 8px;
        box-shadow: gray 2px 2px 4px;
        position: fixed;
        top: -10px;
        z-index: 13;
        left: -1000px;
        animation: animateNav 0.75s ease-in-out;
            animation-name: animateNav;
            animation-duration: 0.75s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
    }
    #nav li {
        padding-bottom: 1em;
        margin: 0;
    }
    #navlogo {
        display: block;
    }
    #parallax {
        display: none;
    }
    #secondhalf {
        width: 90%;
        float: none;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
        clear: both;
        float: none;
        display: block;
    }
    .secondimages {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    #tabletSmartphone {
        display: block;
        border: none;
        box-shadow: none;
    
    }
   /* #therest {
        transform: translateY(0px);
    }*/
    
}
    @keyframes animateNav {     
            from {
                transform: translateX(-300px);
                opacity: 0;
            }
            to {
                transform: translateX(1000px);
                opacity: 1;
            }
    }












/* Media Query Breakpoint for Smartphone */ 
@media only screen and (min-width: 320px) and (max-width: 640px) { 
    
    
    #eastern, #western {
        width: 90%;
        padding-right: 5%;
        padding-left: 5%;
        display: block;
            
    }
    /* hamburger menu */
    .menu{
        font-size: 2em;           
        position: fixed; /* needed to stay in one place */
        z-index: 13;      /* needed to keep this in front of scrolling content */
        padding: 5px;
        transition: all .1s ease-out; /* control the animation of the hover effect */
        display: block;
        overflow: auto; 
    }
    .menu:hover{
        color:indianred; /* change text color on hover */
        cursor: pointer; /* Change cursor to pointer on hover */            
        transform: scale(1.5);  /* scale icon 1.5 times on hover */
    }
    li#close{
        padding: 8px;
        color: white;
    }

    li#close:hover{
        cursor:pointer;
        color:red;
    }

        
    /* main stylings */
    

    aside {
        display: none;
    }
    #capeanimation {
        display: none;
    }
    #close {
        display: block;
        margin-top: 1em;
        top: 0em;
        left: -2em;
    }
    .contentContainer {
        width: 90%;
        padding-right: 5%;
        padding-left: 5%;
    }
    #desktop {
        display: none;
    }
    #firsthalf {
        width: 90%;
        float: none;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
    }
    .firstimages {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    flex-container {
        width: 641px;
    }
    .gallery {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
        display: block;
    }
    h1 {
        font-size: 1.5em;
        width: 20%;
        position: relative;
        display: block;
        left: 5%;
        top: -40%;
        transform: translateY(-40%);
        margin-left: 35%;
    }
    h2 {
        text-align: center;
        padding-left: 0;
        margin-left: 0;
        width: 70%;
    }
    h3 {
        text-align: center;
        padding-left: 0;
        margin-left: 0;
        width: 70%;
        left: -100px;
    }
    header {
        background-size: cover;
        background-repeat: no-repeat;
        height: 35vh;
    }
    #headerlogo {
        width: 40%;
        transform: translateX(30%);
    }
    .illustration {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    .instructions {
        display: none;
    }
    .historytext {
        display: block;
        background-color: yellow;
        border: 3px;
        border-style: solid;
        border-radius: 5px;
        padding: 1%;
    }
    .historytext1 {
        display: none;
    }
    .historytext2 {
        display: none;
    }
    .box1 {
        display: none;
    }
    main {
        width: 80%;
        float: none;
        padding-left: 10%;
        padding-right: 10%;
        margin-left: 0;
        margin-right: 0;
      
    }
    .menu {
        display: block;
        background-color: skyblue;
        color: yellow;
        top: 10%;
        box-shadow: gray 2px 2px 4px;
        border-radius: 4px;
    }
   #myBtn {
        display: none;
    }
    
    #nav {
        display: none;
        height: 400px;
        width: 200px;
        border-radius: 8px;
        box-shadow: gray 2px 2px 4px;
        position: fixed;
        top: -10px;
        z-index: 13;
        left: -1000px;
        animation-name: animateNav2;
            animation-duration: 0.75s;
            animation-timing-function: ease-in-out;
    }
    #nav li {
        padding-bottom: 1em;
        margin: 0;
    }
    #navlogo {
        display: block;
    }
    #parallax {
        display: none;
    }
    #secondhalf {
        width: 90%;
        float: none;
        padding-left: 5%;
        padding-right: 5%;
        margin-left: 0;
        margin-right: 0;
    }
    .secondimages {
        display: block;
        width: 100%;
        float: none;
        clear: both;
        margin: 1%;
    }
    #tabletSmartphone {
        display: block;
        border: none;
        box-shadow: none;
    
    }
    #therest {
        transform: translateY(0px);
    

    }
    #game {
        display: none;
    }

}
        @keyframes animateNav2 {
         
            from {
                transform: translateX(-1000px);
                opacity: 0;
            }
            to {
                transform: translateX(100px);
                opacity: 1;
            }

}