* {
   padding: 0;
   margin: 0;
}

body  {
   width: 100vw;
   height: 100vh;
}

header {
   height: 100px;
   display: flex;
   align-items: center;

   font-size: 2rem;
}

header img {
   margin-left: 25px;
}

#menu-icon {
   position: absolute;
   top: 20px;
   right: 25px;
   z-index: 2;
}

#menu-icon:hover {
   cursor: pointer;
}

#menu-icon #state-2 {
   display: none;
}

#menu {
   display: none;
   background-color: #C3CBFF;
   position: absolute;
   top: 0px;
   right: 0px;
   width: 500px;
   height: 100vh;
   animation: menu 0.3s;
   z-index: 1;
   overflow-y: scroll;
   overflow-x: hidden;
}

@keyframes menu {
   0% {
      width: 0px;
   }

   100% {
      width: 500px;
   }
}

#menu ul {
   margin-top: 80px;
   border-top: 2px solid white;
}

#menu ul li {
   width: 100%;
   padding: 20px;
   list-style-type: none;
   border-bottom: 2px solid white;
   font-size: 2rem;
   font-weight: 400;
   color: black;
   font-family: "Playwrite AR", cursive;
}

#menu ul li:hover {
   cursor: pointer; 
   background-color: #B3BBFC;
   font-size: 2.4rem;
}

#banner {
   width: calc(100% - 50px);
   margin: 0px 25px;
   height: 700px;
   background-image: url("../images/header-bg.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;

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

#banner h1 {
   width: 650px;
   text-align: center;

   font-family: "Allura";
   font-size: 6rem;
   font-weight: bolder;
   margin-bottom: 0;
   margin-top: 0;
   line-height: 1.2;
   letter-spacing: 3px;

   color: white;
}

#content {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

section {
   width: calc(100% - 110px);
   margin-top: 30px;
   background-color: rgb(240, 237, 237, 0.6);
   padding: 30px;
   border: 0px solid black;
   border-radius: 20px;
}

section h1 {
   font-family: Helvetica;
   font-size: 2rem;
   margin-bottom: 10px;
}

section h2 {
   font-family: "Playwrite AR", cursive;
   font-size: 2.0rem;
   letter-spacing: 2px;
}

section p {
   font-family: 'Lato';
   font-size: 1.3rem;
   margin-bottom: 10px;
   letter-spacing: .5px;
   line-height: 1.1;
}

.img-2columns {
   width: calc(100% - 110px);
   display: grid;
   grid-template-rows: 100%;
   grid-template-columns: 50% 50%;
   padding: 30px;
   margin-top: 30px;
   background-color: #C8C5FC;
   border: 0px solid black;
   border-radius: 20px;
}

.img-2columns img {
   justify-self: center; 
   align-self: center;
   width: 80%;
   height: 600px;
   padding: 20px;
   background-color: #f0eded;
   border: 0px solid black;
   border-radius: 20px;
}

#image-area {
   display: flex;
   justify-content: center;
   align-items: center;
}

#image-area img {
   width: 99%;
   height: 600px;
}

footer {
   width: calc(100% - 50px);
   height: 50px;

   display: flex;
   justify-content: center;
   align-items: center;

   font-family: Helvetica;
   font-size: 1.3rem;
}

.item-list {
   margin-left: 20px;
   font-family: Lato;
}

#map {
   width: 100%;
   height: 450px;
}

@media screen and (max-width: 650px) {
   #banner h1 {
      width: 100%;
      word-break:break-word;
   }
}

@media screen and (max-width: 500px) {
   #menu {
      width: 100%;
      background-color: rgba(195, 203, 252, 0.9);
      animation: menu 0.5s;
   }

   @keyframes menu {
      0% {
         height: 0px;
      }

      100% {
         height: 100vh;
      }
   }

   #banner {
      width: 100%;
      margin: 0;
   }

   #banner h1 {
      font-size: 5rem;
   }

   section {
      width: calc(100% - 55px);
   }

   .img-2columns {
      width: calc(100% - 55px);
      grid-template-rows: 50% 50%;
      grid-template-columns: 100%;
      gap: 30px;
   }

   .img-2columns img {
      width: 90%;
   }
}