/* For Mobile Device */
@media (width <=767px) {

   #main {
      padding-top: 10px;
      overflow-x: hidden;
   }

   nav {
      width: 104%;

      h1 {
         /* background-color: blue; */
         width: 50%;
         padding-left: 26px;
      }

      h2 {
         font-weight: 500;
         /* background-color: blue; */
         height: 100%;
         display: none;
      }

      #menubar {
         display: block;
         /* background-color: red; */
         font-size: calc(26px / 16px * 1rem);
         font-weight: bold;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   }

   #center {
      width: 100%;
      height: 80%;
      /* background-color: red; */

      #content {
         width: 100%;
         height: 100%;
         /* background-color: blue; */

         #overlay {
            width: 100%;
            height: 30%;
            background-color: rgba(0, 0, 0, 0.305);

            #over-top {
               width: 100%;
               height: 70%;
               /* background-color: yellow; */

               h1 {
                  font-size: 34px;
               }

               h2 {
                  display: none;
               }

            }

            #over-bottom {
               width: 100%;
               height: 30%;
               /* background-color: blue; */

               h2 {
                  font-size: 18px;
               }
            }
         }
      }
   }

#scroll {
   width: 100%;
   height: 40vh;
   white-space: nowrap;
   overflow-x: hidden;
   overflow-y: hidden;

   .container {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 2vw;
      animation-name: scroll-anime;
      animation-duration: 8s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;

   }

   img {
      width: 13%;
      height: 96%;
      border-radius: 50%;
      object-fit: cover;
      object-position: top;
      margin-inline: 1.5vw;
   }

}

@keyframes scroll-anime {
   from {
      transform: translateX(0%);
   }

   to {
      transform: translateX(calc(-100% - 8px));
   }
}

}