html, body {
     scroll-behavior: smooth;
}

/* General cosmetics */
body {
     margin: 0;
     color: white;
     background-color: rgb(10, 10, 20);
}

p {
     margin: 0;
     padding: 1vw;
     font-size: 1.4vw;
     font-family: "Roboto Condensed", sans-serif;
}

h1, h2, h3 {
     font-family: "Roboto Slab", serif;
}

/* Hero section */
.hero {
     height: 50vh;
     position: relative;
     overflow: hidden;
     margin-bottom: 10vw;

     .hero-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
     }

     .hero-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          color: lime;
          font-size: 4vmin;
          text-shadow: 2px 2px 0 rgb(0, 153, 51), -2px 2px 0 rgb(0, 153, 51), 2px -2px 0 rgb(0, 153, 51), -2px -2px 0 rgb(0, 153, 51);

          h2 {
               font-size: 2vmin;
               color: white;
               text-shadow: none;
          }
     }
}

/* Menu box */
.menu {
     position: fixed;
     left: 0;
     top: 50%;
     transform: translateY(-50%) translateX(-100%);
     z-index: 10;
     background-color: rgb(0, 51, 102);
     border: solid .5vw rgb(51, 102, 153);
     text-align: center;
     width: 20vw;
     max-height: 100%;
     padding: 2vw;
     transition: all 500ms;
     font-family: "Roboto Slab", serif;

     &.extend {
          transform: translateY(-50%) translateX(0)
     }

     ul {
          list-style-type: none;
          padding: 0;
          margin: 0;
     }

     li {
          margin-bottom: 3vw;
          font-size: 1.6vw;
          transition: all 400ms; 
     }

     a {
          display: block;
          transition: all 200ms;
          color: white;
          text-decoration: none;

          &:hover, &.active {
               color: lime;
               text-decoration: underline;
          }
     }
}

/* Menu toggle utton */
.menu-button {
     position: fixed;
     left: 0;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     background-color: rgb(0, 51, 102);
     border: solid .5vw rgb(51, 102, 153);
     border-radius: 10vw;
     width: fit-content;
     padding: 1vw 1vw 1vw 5vw;
     transition: all 500ms;
     z-index: 9;
     
     &:hover {
          transform: translateX(-45%) translateY(-50%);
     }

     &.extend {
          transform: translateX(-45%) translateY(-50%);
          left: 20vw;

          div {
               transition: all 500ms;
               background-color: rgb(255, 153, 0);
          }

          .bar1 {
               transform: translateY(1vw) rotate(-45deg);
          }

          .bar2 {
               opacity: 0;
          }

          .bar3 {
               transform: translateY(-1vw) rotate(45deg);
          }
     }

     div {
          background-color: lime;
          width: 3vw;
          height: .5vw;
          margin: .5vw;
          transition: all 500ms;
     }
}

/* Content boxes */
.box {
     background-color: rgb(0, 51, 102);
     border: solid .5vw rgb(51, 102, 153);
     width: 60vw;
     margin: 0 auto 10vw;
     filter: brightness(.4);
     transition: all 800ms;

     &.in-view {
          filter: none;

          .swiper-button-next, .swiper-button-prev {
               color: rgba(0, 255, 0, .6);
               &:hover {
                    color: lime;
                    scale: 1.6;
               }
          }

          .swiper-pagination-bullet {
               background: rgba(255, 153, 0)
          }
     
          .swiper-pagination-bullet-active {
               background: rgba(128, 128, 128);
               background: rgb(255, 153, 0);
          }

          .desc {
               h2 {
               color: lime;
               text-shadow: 2px 2px 0 rgb(0, 153, 51), -2px 2px 0 rgb(0, 153, 51), 2px -2px 0 rgb(0, 153, 51), -2px -2px 0 rgb(0, 153, 51);
               }
          }

          .pros-cons {
               h3 {
                    color: rgb(255, 153, 0);
               }
          }
          
     }
}

/* Separates the content from the gallery */
.content {
     display: flex;
}

/* Text section of box */
.text {
     display: flex;
     flex-direction: column;
     width: 50%;
}

/* Main image section of box */
.page-img {
     width: 50%;

     img {
          max-width: 100%;
     }
}

/* Main text of box */
.desc {
     h2 {
          text-align: center;
          background-color: rgb(51, 102, 153);
          margin: 0;
          padding: 1vw;
          font-size: 3vw;
          color: white;
          /* color: lime; */
          /* text-shadow: 2px 2px 0 rgb(0, 153, 51), -2px 2px 0 rgb(0, 153, 51), 2px -2px 0 rgb(0, 153, 51), -2px -2px 0 rgb(0, 153, 51); */
          
          &:hover {
               text-decoration: underline;
          }
     }

     a {
          text-decoration: none;
     }
}

/* Pros & Cons section of the box */
.pros-cons {
     display: flex;
     font-size: 1.6vw;
     padding: 1vw;

     h3 {
          color: white;
          /* color: rgb(255, 153, 0); */
          margin: 0;
     }
}

.pros {
     width: 50%;
}

.cons {
     width: 50%;
}

/* Image gallery with swiper function */
.gallery {
     border-top: solid .5vw rgb(51, 102, 153);

     .swiper-slide {
          img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               object-position: 50% 50%;
          }
     }

     .swiper-button-next, .swiper-button-prev {
          margin: 0 2vw;
          scale: 1.5;
          color: gray
          /* color: rgba(0, 255, 0, .6);
          &:hover {
               color: lime;
               scale: 1.6;
          } */
     }

     .swiper-pagination-bullet {
          height: 1.5vw;
          width: 1.5vw;
          background: rgb(128, 128, 128);
          /* background: rgba(255, 153, 0) */
     }

     .swiper-pagination-bullet-active {
          background: rgba(128, 128, 128);
          /* background: rgb(255, 153, 0); */
     }
}

/* Viewport width modifiers */

/* Slim view */
@media only screen and (max-width: 800px) {

     /* Text */
     p {
          font-size: 1.4em;
     }

     /* Hero */
     .hero {
          margin-bottom: 300px;

          .hero-text {
               font-size: 30px;

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

     /* Menu box */
     .menu {
          width: 75%;
          height: 100%;
          border: solid 5px rgb(51, 102, 153);

          ul {
               transform: translateY(50%);
          }

          li {
               font-size: 2em;
               margin-bottom: 50px;
          }
     }

     /* Menu toggle button */
     .menu-button {
          border: solid 5px rgb(51, 102, 153);
          padding: 10px 10px 10px 50px;
          border-radius: 1000px;

          &.extend {
               left: 75%;

               .bar1 {
                    transform: translateY(10px) rotate(-45deg);
               }
          
               .bar3 {
                    transform: translateY(-10px) rotate(45deg);
               }
          }

          div {
               width: 30px;
               height: 5px;
               margin: 5px;
          }
     }

     /* Boxes */
     .box {
          width: 100%;
          margin: 0 0 300px;
          border: solid 5px rgb(51, 102, 153);
     }

     .content {
          flex-direction: column
     }

     .text {
          width: 100%;
     }

     .page-img {
          width: 100%;
          border-top: solid 5px rgb(51, 102, 153);
          border-bottom: solid 5px rgb(51, 102, 153);
     }

     .desc {
          h2 {
               font-size: 3em;
          }

          p {
               padding: 10px;
          }
     }

     .pros-cons {
          font-size: 1.6em;
          padding: 10px;
     }

     .gallery {
          .swiper-button-next, .swiper-button-prev {
               margin: 0 20px;
               scale: 1;
          }

          .swiper-pagination-bullet {
               height: 10px;
               width: 10px;
          }
     }
};