body {
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
    font-family: Arial, sans-serif;
  }
.topnav {
  position: fixed;
  width: 100vw;
  overflow: hidden;
  background-color: #596A9B;
  top: 0;
  z-index: 2;
}
.topnav #myLinks {
  display: none;
}
.topnav a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a.icon {
  background-color: #3A3743;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid black;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.active {
  background-color: #596A9B;
  color: white;
}
  header{
    width: 100vw;
    height: 20vh;
    background-color: #3A3743;
    margin-top: 47px;
    text-align: center;
  }
  h1{
    color: #ddd;
    padding-top: 20px;
  }
  h2{
    color: #ddd;
    font-size: 30px;
  }
  .slideshow{
    display: none;
  }
  button{
    display: none;
  }
  .grid-container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 400px) 300px;
    grid-template-areas: "a"
                         "b"
                         "c"
                         "d"
                         "e"
                         "f";
    grid-row-gap: 15vh;
    grid-column-gap: 3%;
    width: 100%;
    margin-top: 5%;
  } 
  .container img{
    height: 70%;
    width: 100%;
    border-radius: 15%;
  }
  .container div{
    margin-left: 10%;
    margin-top: 10%;
  }
  .a{
    grid-area: a;
  }
  .b{
    grid-area: b;
  }
  .c{
    grid-area: c;
  }
  .d{
    grid-area: d;
  }
  .e{
    grid-area: e;
  }
  footer {
    width: 100vw;
    background-color: #3A3743;
    color: white;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    grid-area: f;
  }


  @media screen and (min-width: 600px) {
    h1{
      font-size: 45px;
    }
    .slideshow{ 
      display: block; 
    } 
    .slideshow img{ 
      width: 100vw;
      height: 40vh;
    }
    .button{
     display: flex;
     height: 60px;
     width: 96vw;
     margin-left: 2vw;
     margin-top: 17vh;
     position: absolute;
     justify-content: space-between;
    }
    .button button {
     width: 60px;
     background-color: whitesmoke;
     border: 1px solid black;
     color: rgb(6, 5, 5);
     padding: 5px 5px;
     text-align: center;
     font-size: 50px;
     z-index: 1;
     border-radius: 50%;
     display: block;
 }
 .button button:hover {
   background-color: black;
   color:white;
   border: 1px solid white;
}
    .grid-container{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 600px) 100px;
    grid-template-areas: "a b"
                         "c d"
                         "e ..."
                         "f f";
    }
    .container img{
      height: 20vh;
      border-radius: 15%;
      border: 1px solid black;
      box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.2);
    }
}

    @media screen and (min-width: 769px) {
      .topnav a.icon{
        margin-right: 18px;
      }
        header {
        font-size: 80px;
      }
      .slideshow{
        aspect-ratio: 4/3;
      }
      .slideshow img{
        height: 90%;
      }
      .button{
        display: none;
      }
      .grid-container{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 50vh) 80vh;
        grid-template-areas: "a ..."
                             "... b"
                             "c ..."
                             "... d"
                             "e ..."
                             "f f";
      }
      .container{
        aspect-ratio: 4 / 4;
      }
      .container img{
        height: 50%;
        width: 100%;
      }
      footer{
        bottom: 0;
      }
    }