/* General fonts and colors */
body {
     background-image: url(media/background.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

h1 {
     color: #70a0b4;
     text-shadow: 0 0 10px #000000;
     font-weight: 500%;
     font-size: 5.2rem;
     text-align: center;
     font-family: Faculty Glyphic;
}

h2 {
     color: #70a0b4;
     font-weight: 550;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 2rem;
}

h3 {
     color: #c0d6eb;
     font-weight: bold;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 2rem;
     text-align: center
}

p {
     color: #def2ff;
     font-weight: normal;
     font-family: 'Lato';
     font-size: 1.2rem;
     line-height: 170%;
}

a:link {
     color: #65bbcb;
}

a:visited {
     color: #3e7b85;
}

a:hover {
     color: #7ed7e7;
     transition: transform 0.3s ease;
     transform: scale(1.12);
}

a:active {
     color: #61bece;
}

/*Dividers*/
.viewport {
     width: 50%;
     background-color: #0c0f11;
     margin: 0 25% 0;
     padding-bottom: 2%;
}

.h1box {
     padding: 3%;
     background-image: image-set("media/blurred.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.wrapper {
     display: flex;
     justify-content: space-between;
     margin-left: 15%;
     width: 70%;
     padding: 0.5% 0 0.5%;
}

.div1 {
     width: 100%;
}

/*video edits*/
.video {
     display: flex;
     justify-content: center;
     width: 35vw;
     height: 25vw;
     padding: 2px 0 0;
}

.videowrapper {
     display: flex;
     justify-content: center;
     margin-left: 25%;
     width: 50%;
}

/*Swipe gallery (from CLASS 9)*/
.swiper {
     height: 500px;
     width: 72%;
     position: relative;
}

.swiper-slide {
     display: flex;
     justify-content: center;
     align-items: center;
}

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

.swiper-button-next,
.swiper-button-prev {
     color: rgba(173, 191, 218, 0.5);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
     color: rgb(193, 220, 255);
}

.swiper-pagination-bullet {
     height: 12px;
     width: 12px;
     background-color: rgba(153, 178, 214, 0.5);
     /* Light color for bullets */
}

.swiper-pagination-bullet-active {
     background: white;
}

/*Navigation bar*/

header {
     background-color: rgb(19, 30, 39);
     color: rgb(255, 246, 246);
     font-size: 1.2rem;
     display: flex;
     padding: 1% 20vw;
     align-items: center;
}

nav {
     margin-left: auto;

     ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          font-family: Faculty Glyphic;
          font-size: 1rem;

          .nav-item {
               margin-left: 2em;

               a.nav-item-link {
                    color: white;
                    text-decoration: none;

                    &:hover {
                         color: rgb(131, 191, 231);
                         text-decoration: underline;
                    }
               }

               &.has-submenu {
                    position: relative;
                    z-index: +2;

                    &:hover {
                         .sub-menu {
                              display: block;
                         }
                    }

                    &:after {
                         content: '\203A';
                         display: block;
                         transform: rotate(90deg);
                         float: right;
                         margin-left: 0.7em;
                         font-size: 1.2rem;
                    }
               }
          }

          .sub-menu {
               display: none;
               position: absolute;
               top: 100%;
               left: 0;
               background-color: rgb(19, 30, 39);

               .nav-item {
                    margin-left: 0;

                    a.nav-item-link {
                         padding: 0.55rem 1rem;
                         display: inline-block;
                    }
               }
          }
     }
}

.menu-toggle {
     display: none;
}

/*Reviews*/

.review {
     color: #d7e2e9;
     font-weight: normal;
     font-family: 'Lato';
     font-size: 1.1rem;
}

.section {
     height: 80%;
     padding: 4.5vw;
     position: relative;
}

.section>h2 {
     font-size: 3rem;
     font-weight: normal;
}

.section-4 {
     background-image: url(media/blurred2.jpg);
     background-position: center;
     background-size: cover;
}

.sidebar-1 {
     width: 100%;
     height: 25%;
     background-color: #0a0d13;
     padding: 2%;
     margin-top: 5%;
}

.fade-in {
     opacity: 0;
     transform: translateX(-75px);
     transition: all 750ms;
}

.fade-in.in-view {
     opacity: 1;
     transform: translateX(0);
}

/*Media screenings*/
@media screen and (max-width: 1500px) {
     .viewport {
          width: 70%;
          background-color: #0c0f11;
          margin: 0 15% 0;
     }

     .video {
          width: 45vw;
          height: 35vw;
     }
}

@media screen and (max-width: 1200px) {
     h1 {
          font-size: 3.8rem
     }

     .viewport {
          width: 90%;
          background-color: #0c0f11;
          margin: 0 5% 0;
     }
}

@media screen and (max-width: 992px) {
     .menu-toggle {
          display: block;
          font-size: 3rem;
          padding: 1px 5px 10px 5px;
          border: 1px solid rgb(203, 238, 255);
          border-radius: 3px;
          line-height: 0.5;
          margin-left: auto;
          position: relative;
          z-index: 11;
     }


     header {
          padding: 2vw;

          nav {
               display: none;
               position: absolute;
               z-index: 10;
               top: 0;
               left: 0;
               width: 100vw;
               height: 100vh;
               background-color: rgb(17, 32, 44);
               justify-content: center;
               align-items: center;
               margin: 0;

               ul {
                    display: block;
                    font-size: 1.5rem;

                    .nav-item {
                         margin-left: 0;
                         margin-bottom: 0.65em;

                         &.has-submenu:after {
                              display: none;
                         }
                    }

                    .sub-menu {
                         display: block;
                         position: static;
                         margin-left: 2em;

                         .nav-item {
                              margin: 0;

                              a.nav-item-link {
                                   font-size: 1.2rem;
                                   padding: 0;
                              }
                         }
                    }
               }

               &.visible {
                    display: flex;
               }
          }
     }
}

@media screen and (max-width: 850px) {
     h1 {
          font-size: 2.8rem
     }
}


@media screen and (max-width: 650px) {
     h1 {
          font-size: 2.1rem
     }
}