@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Silkscreen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@media screen and (min-width: 720px) {
html, body{
    background-color: lightgreen;
    width: 100vw;
    height: 100vh;
}

.button{
    background-color: lightgreen;
    border: green solid 3px;
    border-radius: 7px;
    text-decoration: none;
    position: fixed;
    color: green;
    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    text-align: center;
    padding: 15px;
    cursor: pointer;
}

.button:hover {
    background-color: green;
    color: white;
 }

 header {
    background-color: greenyellow;
    width: 30vw;
    height: 10vh;
    position: fixed;
    left: 35vw;
    top: 0vh;
    border: green solid 21px;
    border-radius: 10px;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    text-align: center;
 }

 .images01 {
    width: 14vw;
    height: 25vh;
    position: fixed;
    left: 70.5vw;
    top: 15vh;
    border: green solid 2px;
 }

 .images02 {
    width: 14vw;
    height: 25vh;
    position: fixed;
    left: 70.5vw;
    top: 40vh;
    border: green solid 2px;
 }

 .images03 {
    width: 14vw;
    height: 25vh;
    position: fixed;
    left: 84.5vw;
    top: 40vh;
    border: green solid 2px;
 }

 .images04 {
    width: 14vw;
    height: 25vh;
    position: fixed;
    left: 84.5vw;
    top: 15vh;
    border: green solid 2px;
}

.images05 {
    width: 28vw;
    height: 31vh;
    position: fixed;
    left: 70.5vw;
    top: 65.5vh;
    border: green solid 2px;
}

 main {
    width: 100vw;
    height: 90vh;
    position: fixed;
    left: 0vw;
    top: 15vh;
 }

 section {
    background-color: greenyellow;
    width: 69vw;
    height: 50vh;
    position: fixed;
    left: 0vw;
    top: 15vh;
    border: green solid 3px;
    color: rgb(3, 41, 3);
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    text-align: justify;
    padding: 10px;
 }

 article {
    background-color: green;
    width: 69vw;
    height: 24vh;
    position: fixed;
    left: 0vw;
    top: 69vh;
    border: greenyellow solid 3px;
    color: greenyellow;
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
    text-align: justify;
    padding: 10px;
 }
}

@media screen and (max-width: 720px) {
  
   html, body{
      background-color: lightgreen;
      width: 100vw;
      height: 100vh;
  }
  
  .button{
      background-color: lightgreen;
      border: green solid 3px;
      border-radius: 7px;
      text-decoration: none;
      position: fixed;
      color: green;
      font-family: "Silkscreen", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      text-align: center;
      padding: 15px;
      cursor: pointer;
  }
  
  .button:hover {
      background-color: green;
      color: white;
   }
  
   header {
      background-color: greenyellow;
      width: 30vw;
      height: 10vh;
      position: fixed;
      left: 33vw;
      top: 0vh;
      border: green solid 10px;
      border-radius: 10px;
      font-family: "Orbitron", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      text-align: center;
   }
  
   .images01 {
      width: 28vw;
      height: 20vh;
      position: fixed;
      left: 70vw;
      top: 1vh;
      border: green solid 2px;
   }
  
   .images02 {
      width: 28vw;
      height: 20vh;
      position: fixed;
      left: 70vw;
      top: 41vh;
      border: green solid 2px;
   }
  
   .images03 {
      width: 28vw;
      height: 20vh;
      position: fixed;
      left: 70vw;
      top: 61vh;
      border: green solid 2px;
   }
  
   .images04 {
      width: 28vw;
      height: 20vh;
      position: fixed;
      left: 70vw;
      top: 21vh;
      border: green solid 2px;
  }
  
  .images05 {
      width: 28vw;
      height: 20vh;
      position: fixed;
      left: 70vw;
      top: 81vh;
      border: green solid 2px;
  }
  
   main {
      width: 100vw;
      height: 90vh;
      position: fixed;
      left: 0vw;
      top: 15vh;
   }
  
   section {
      background-color: greenyellow;
      width: 60vw;
      height: 48vh;
      position: fixed;
      left: 0vw;
      top: 15vh;
      border: green solid 3px;
      color: rgb(3, 41, 3);
      font-family: "Concert One", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 10px;
      text-align: justify;
      padding: 10px;
   }
  
   article {
      background-color: green;
      width: 60vw;
      height: 24vh;
      position: fixed;
      left: 0vw;
      top: 69vh;
      border: greenyellow solid 3px;
      color: greenyellow;
      font-family: "Concert One", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 10px;
      text-align: justify;
      padding: 10px;
   }

}