@media (max-width: 3500px) {

aside { grid-area: aside;}

nav { grid-area: nav;}
main { grid-area: main;}
footer { grid-area: footer;}
section {grid-area: section;}
#screenshotContainer {grid-area: screenshotContainer;}
.canvasSpacer {grid-area: canvasSpacer;}

#wrapper {
  display:grid;
  grid-template:
       "aside nav nav nav canvasSpacer" 150px
       
       "aside main main main canvasSpacer" auto
      
       "section section section section canvasSpacer" 200px
       "screenshotContainer screenshotContainer screenshotContainer screenshotContainer canvasSpacer" auto
       "footer footer footer footer footer" auto
        /20% 20% 20% 20% 20%}
       
#screenshotContainer {
  display: block;
  }

#exitx {
  
  padding-left: 90%;
}


.videoBorder {
  border: none;
}

#parent {
  touch-action: none;

  display: flex;
  flex-wrap: wrap;
  background-color: rgb(255, 254, 254);
  border: solid rgb(54, 53, 53) 20px;
  box-shadow: 10px 10px 5px #aaaaaa ;
  border-radius: 5px;
  padding: 50px;
  margin-top: 20px;
}

.canvasInstruct ul li{
  padding: 20px;
  line-height: 1.em;
  font-size: 3.0em;
  text-align: left;
  margin-left: 40%;
}



h1 {
 
  display: flex;
  justify-content: center;
  font-weight: bold;
  
  text-align: center;
  font-size: 2.5em;

}

h2 {
  display: flex;
  justify-content: center;
 text-align: center;
  font-weight: 100;
 
}

.addCopyBelow {
  padding-top: 40%;
 
}

.addCopyBelow button {
  font-size: 1.0rem;
}


nav {
  text-decoration: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  letter-spacing: 4px;
}

a {
  text-decoration: none;
  color: rgb(94, 93, 93);
  font-size: 1.0em;
  padding-left: 0px;
}

nav a:hover{
  text-decoration: none;
  
  color: red;
  border-bottom: 1px solid red;
}

body {
 
  background-color: white;
  color: #484848;
  font-family: Helvetica;

}

section {
  font-size: 7px;
  text-align: center;
  
}

section h1 {
  font-size: 40px;
  margin-left: 30%;
}

/*-----------------------------------------------Landing Page*/
.scrolling-wrapper-flexbox {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
  /*&::-webkit-scrollbar {
    display: none;            use this for mobile to make scroll disappear
  }*/
}
  .card {
    flex: 0 0 auto;
    
    margin-right: 75px;
    
  }

  .landingPageArterra {
    font-size: 5em;
    margin-top: 0;
    font-family: "Helvetica" ;
  }

  .artCreationDevice {
    font-size: 2.0em;
    margin-top: -100px;
   
  }

.landingUpperLeft {
  flex: 5;
  display: flex;
  flex-direction: column;
 align-items: center;
 padding-left: 100px;
}

.landingVerbage {
padding-left: 5vw;
padding-right: 5vw;
padding-bottom: 1.0vw;
font-size: 1.25em;
font-family: Helvetica;
letter-spacing: 1.25px;
}

.landingScrollVerbage  a:hover {
  background-color: black;
  color: white;
}

.landingScrollVerbage {
  
  padding-left: 5vw;
   letter-spacing: 1.25px;
}

.landingUpperVideo {
  flex: 5;
 margin-right: 250px;
 margin-left: 250px;
 margin-top: 25px;
 
}
video {
  border: solid 7px rgb(32, 31, 31);
  padding: 75px;
  width: 100%;
}

.gamePuzzle {
  font-weight: bold;
  padding-top: 100px;
}


#landingWrapper {
  display: block;
  padding-top: 5vh;
}
  
.landingUpperFlexContainer {
  display: flex;
  
}

.landingPageButton {
  font-size: 1.0em;
  padding:10px 20px 10px 20px;
  border-radius: 30px;
  background-color: #e9e6e6;
  color: #4f4d4d;
  box-shadow: 3px 3px 3px #777;
  border: #9a9797;
  margin-top: 0px;
}

button:hover {
  background-color: black;
  color: white;
}

.aboutArterra {
  display: flex;
  font-size: 1.5em;
  padding-left: 25%;
  padding-right: 25%;
  line-height: 1.5em;
}

/*------------------------------------------Store page--------------------*/

.storeImages {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 10px 10px gray ;
  margin-top: 50px;
 
}

.storeImagePadding {
  
  padding: 80px 30px 40px 30px;
  
  
}

.storeImageAndButtonContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




/*------------------------------------------Tutorial page----------------------------*/

.tutorialGrid {
  padding-left: 10%;
  width: 70%;
}




.videoTutorial {
  width: 1100px;
  height: 620px;
  margin-left: -60px;
  box-shadow: 5px 5px 5px 5px gray;
  border: #131313 solid 10px;
  border-radius: 10px ;
}

.nav2 {
  display: none;
}


/*---------------------------------------------How to purchase page------------------------------*/



* {
  box-sizing: border-box;
}

.columns {
  float: left;
  width: 33.3%;
  padding: 16px;
}

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(58, 57, 57, 0.2)
}

.price .header {
  
  color: white;
  font-size: 25px;
}

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.price .grey {
  background-color: #eee;
  font-size: 20px;
}

.button {
  background-color: #181616;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

.button:hover {
  background-color: #ec6451;
}

.aboutMain {
  margin-top: 75px;
}

/*--------------------------------------Purchase Options-------------*/

.canvasSpacer  {
  display: flex;
  justify-content: center;
  align-items: center;
}


.aboutJpgParagraph {
  font-size: 3em;
margin-top: 80px;
text-align: left;
}

.purchasejpg {
  margin-top: 25px;
  justify-content: baseline;
  
}

.positionAboutPara {
  margin: 0px 0px 0px 250px;

}



#optionsFooter {
  margin-top: 500px;
}

.sizePrice {

  font-size: 1.7rem;
  line-height: 2.5rem;
}

.aspectRatio {
  margin-top: -80px;
  width: 100%;
}

.purchasejpg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*---------------------------------Footer-----------------------------*/

footer {
  background-color: rgb(14, 14, 14);
  color: white;
  width: 100%;
 margin-top: 250px;
 display: flex;
border: #131313 solid 4px;
}



.footerFont{
  color: white;
  line-height: 2.5;
}

.footerFont:hover {
  color: #87cc77;
}

.socialMediaLogos {
  padding-left: 30%;
}

.socialIcon {
  width: 70px;
}

.aspectRatio {
  padding-top: 100px;
  padding-left: 300px;
}

figcaption {
  font-size: 3em;
}

#optionsFooter {
  margin-top: 300px;
}

#optionsFooter2 {
  margin-top: 800px;
}


/*---------------------------------------Cart------------------------*/


}

/*-------------------------------------------------------------------MOBILE---------*/

@media (max-width: 1024px) {
  aside { grid-area: aside;}
  .verbage { grid-area: verbage;}
.nav2 { grid-area: nav2;}
main { grid-area: main;}
section { grid-area: section;}
#screenshotContainer {grid-area: screenshotContainer}
footer { grid-area: footer;}
#wrapper {
  display:grid;
  grid-template:
       "aside nav2 nav2 nav2 nav2" 150px
       "verbage verbage verbage verbage verbage" auto
       "main main main main main" auto
       "section section section section section" auto
       "screenshotContainer screenshotContainer screenshotContainer screenshotContainer screenshotContainer" auto
       "footer footer footer footer footer" auto
        /20% 20% 20% 20% 20%;}

        main {
          display: flex;
          justify-content: center;
          align-items: center;
          
        }

        /*-------------------------mobile Navigation---------------*/
.nav2 {
  display: grid;
}
        body
          body {
  background: #87cc77;
  
  
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
  margin-left: 0px;
  padding-left: -50px !important;
}

#homeNavSpacer {
 margin-left: 50px;
}

#nav2Spacer {
    margin-left: -50px;
}

nav {
  display: none;
}

.canvasInstruct ul li{
  padding: 20px;
  line-height: 1.em;
  font-size: 3.0em;
  text-align: left;
 margin-left: 10px;
}

section h1 {
  font-size: 28px;
  margin-left: 15px;
}

.addCopyBelow {
  padding-top: 20px;
 
  
}
.addCopyBelow button {
  font-size: 1.0rem;
  
}


#screenshotContainer {
  margin-left: -100px;
}

.nav2Exitx {
  padding-left: 85%;
  padding-top: 50px;
  
}

.nav2Exitx a img{
  width: 20px;
}

.exitx {
  padding-left: 500px;
  margin-left: 500px;
}



@keyframes bugfix { from {padding:0;} to {padding:0;}}
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}

#overlay-button {
  position: absolute;
  right: 2em;
  top: 3em;
  padding: 26px 11px;
  z-index: 5;
  cursor: pointer;
  user-select: none;
  span {
      height: 4px;
      width: 35px;
      border-radius: 2px;
      background-color: white;
      position: relative;
      display: block;
      transition: all .2s ease-in-out;
      &:before {
        top: -10px;
        visibility: visible;
      }
      &:after {
        top: 10px;
      }
      &:before, &:after {
          height: 4px;
          width: 35px;
          border-radius: 2px;
          background-color: white;
          position: absolute;
          content: "";
          transition: all .2s ease-in-out;
      }
    }
    &:hover span, &:hover span:before, &:hover span:after {
      background: #333332;
    }
}

input[type=checkbox] {
  display: none;
  
  &:checked ~ #overlay {
    visibility: visible;
  }
  
  &:checked ~ #overlay-button {
    &:hover span, span{
      background: transparent;
    }
    span {
      &:before {
        transform: rotate(45deg) translate(7px, 7px);
        opacity: 1;
      }
      &:after {
        transform: rotate(-45deg) translate(7px, -7px);
      }
    }
  }
}

#overlay {
  height: 100vh;
  width: 100vw;
  background: #ec6451;
  z-index: 2;
  visibility: hidden;
  position: fixed;
  &.active {
    visibility: visible;
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 100vh;
    padding-left: 0;
   
    list-style-type: none;
    li {
      padding: 1em;
      a {
        color: white;
        text-decoration: none;
        font-size: 1.5em;
        &:hover {
          color: #333332;
        }
      }
    }
  }
}

/*-------mistake?
{
            
  margin: 0;
  
  width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}
   ----*/      
          
          @keyframes bugfix { from {padding:0;} to {padding:0;}}
          @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;}}
          
          #overlay-button {
            position: absolute;
            right: 2em;
            top: 3em;
            padding: 26px 11px;
            z-index: 5;
            cursor: pointer;
            user-select: none;
            span {
                height: 4px;
                width: 35px;
                border-radius: 2px;
                background-color: rgb(33, 7, 7);
                position: relative;
                display: block;
                transition: all .2s ease-in-out;
                &:before {
                  top: -10px;
                  visibility: visible;
                }
                &:after {
                  top: 10px;
                }
                &:before, &:after {
                    height: 4px;
                    width: 35px;
                    border-radius: 2px;
                    background-color: rgb(23, 2, 2);
                    position: absolute;
                    content: "";
                    transition: all .2s ease-in-out;
                }
              }
              &:hover span, &:hover span:before, &:hover span:after {
                background: #333332;
              }
          }
          
          input[type=checkbox] {
            display: none;
            
            &:checked ~ #overlay {
              visibility: visible;
            }
            
            &:checked ~ #overlay-button {
              &:hover span, span{
                background: transparent;
              }
              span {
                &:before {
                  transform: rotate(45deg) translate(7px, 7px);
                  opacity: 1;
                }
                &:after {
                  transform: rotate(-45deg) translate(7px, -7px);
                }
              }
            }
          }
          
          #overlay {
            height: 100vh;
            width: 100vw;
            background: #f96753;
            z-index: 2;
            visibility: hidden;
            position: fixed;
            &.active {
              visibility: visible;
            }
            ul {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              text-align: center;
              height: 100vh;
              padding-left: 0;
              list-style-type: none;
              li {
                padding: 1em;
                a {
                  color: white;
                  text-decoration: none;
                  font-size: 1.5em;
                  &:hover {
                    color: #333332;
                  }
                }
              }
            }
          }
        
        

      
        
        .videoTutorial {
          width: 400px;
          height: 300px;
        margin-left: 0px;
        margin-top: 15%;
         border: 10px solid #484848;
        }
       
        .tutorialMain {
          flex-direction: column;
          margin-top: 0px;
        }

       

       .verbage {
        margin-top: 50px;
       }
       
       .mobileLandingLogo {
        width: 175px !important;
       }

       .mobileLogo {
        width: 175px !important;
       }

        .landingUpperFlexContainer {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
        }

        .artCreationDevice {
          font-size: 1.7em;
          margin-top: -100px;
        }

        .landingVerbage {
          font-size: 18px;
          margin-top: 15px;
        }

        .landingUpperVideo {
        display: none;
        }

      .landingPageButton {
          font-size: 14px;
          padding: 10px 10px 10px 10px;
      }

      .landingScrollVerbage {
        font-size: 18px;
      
      }
      
      .landingUpperLeft {
          padding-left: 0px;
      }
      
     .storeImages {
      margin-top: 10px;
      box-shadow: 0px 0px 0px 0px white ;
     }

     .storeImagePadding {
      
      margin-top: 0px;
     }

    
        

        #landingWrapper {
          padding-top: 10px;
        }

        #parent {
          margin-top: 5%;
          border: 7px solid rgb(54, 53, 53);
          padding: 20px;
        }
        
            .aboutArterra {
      display: flex;
      font-size: 1.2em;
      padding-left: 8%;
      padding-right: 8%;
      line-height: 1.5em;
    }

        

        /*-------about page-------------------*/
        .columns {
          width: 100%;
        }
      
        .aboutMain {
          display: flex;
          flex-direction: column;
          margin-top: 10px;
        }

        /*------------footer------------------*/
        .socialIcon {
          width: 40px;
        }

        .socialMediaLogos {
          margin-left: 0px;
          padding-left: 0px;
        }

        footer {
          margin-top: 200px;
        }

        /*---------------Purchase Options-----------*/

        .purchasejpg {
           display: flex;
           flex-direction: column;
        }

        .positionAboutPara {
          margin-left: 15px;
        }

        .aspectRatio {
          padding-left: 0px;
          width: 100%;
        }
        .aspectRatio img {
          width: 100%;
        }

        h1 {
          font-size: 1.65em;
          font-weight: bold;
        }

        #optionsFooter2 {
          margin-top: 100px;
        }

        #optionsFooter {
          margin-top: 100px ;
        }

        figcaption {
          font-size: 2.0em;
        }

        
  
      }