/* Standard CSS file*/
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     font-family: 'Tomorrow';
     background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("images/vertical.png");
     background-size: contain;
     background-repeat: repeat;
     background-position: center;
     color: rgb(255, 246, 246);
}

.veewun {
     width: 190vh;
     margin: 0
}

h1 {
     font-size: 3.8rem;
     color: rgb(255, 0, 0);
     text-shadow: rgb(3, 1, 40) 0 0 25px;
     margin-bottom: 1%;
}

h2 {
     font-size: 3.4rem;
     color: rgb(255, 0, 0);
     margin-bottom: 2%;
     text-shadow: rgb(3, 1, 40) 0 0 15px
}

.title {
     font-size: 2.7rem;
     z-index: 3;
     color: rgb(255, 195, 30);
     text-align: center;
     padding-top: 2%
}

h3 {
     font-size: 2.2rem;
     color: rgb(255, 195, 30);
}

p {
     font-size: 1.2rem;
     margin: 0 5%;
}

.homep {
     text-align: justify;
     text-align-last: center
}

.chartext {
     text-align: left;
     text-align-last: left;
     margin-top: 4%
}

.main-container {
     margin: 0 27%;
     height: 200%;
     background-image: linear-gradient(rgba(143, 0, 0, 1), rgb(94, 0, 30));
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     z-index: 0;
}

.secondary-container {
     padding: 3.5% 7%;
     height: 115vh;
}

/*Home page*/
.navh3 {
     text-align: center;
     margin: 5% 0;
     font-size: 1.8rem;
}

.navcontainer {
     text-align: center;
     margin: 5% 0;
     width: 100%;
     display: flex;
     justify-content: center;
     gap: 2%;
}

.navcontainer2 {
     display: flex;
     justify-content: center;
     flex-direction: column
}


.navbox {
     width: 20vh;
     height: 20vh;
     object-fit: cover;
     object-position: center;
     transition: transform 0.3s ease;
     overflow: hidden;
     /*design*/
     border-width: 0;
}

.navbox:hover {
     transition: transform 0.3s ease;
     transform: scale(1.05);
     overflow: auto
}

.v1text {
     font-size: 1.5rem;
     text-align: justify;
}

.v2text {
     font-size: 0.9rem
}

.gabrieltext {
     font-size: 1rem
}

/* Top banner */
.logobutton {
     background-color: transparent;
     transition: transform 0.3s ease;
     border: none
}

.logobutton:hover {
     transition: transform 0.3s ease;
     transform: scale(1.12);
}

.logoimage {
     width: 170px;
     height: 25px;
     background-color: transparent
}

.hero-image {
     width: 100%;
     height: 300px;
     position: relative;
     box-shadow: 0 5px 200px rgb(0, 1, 44, 0.5);
     background-image: linear-gradient(rgba(100, 0, 0, 0.5), rgba(5, 19, 82, 0.3)), url("images/cover_art.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     margin: 0;
     padding: 0;
     z-index: 1;
}

.hero-text {
     padding: 4%;
     text-align: center;
     margin-top: 0;
}

.hero-subtitle {
     text-shadow: rgb(3, 1, 40) 0 0 25px;
}

/*Character website css*/

.img-desc {
     margin-bottom: 4%;
     padding: 2% 0;
     height: fit-content;
     width: 65%;
}

.imgdiv {
     border-width: 5px;
     border-color: rgb(255, 255, 255);
     border-style: solid;
     padding: 1%;
     float: right;
     width: 25vh;
     height: 35vh;
     margin: auto 3%;
}

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

/* NAVIGATION BAR (All sites)*/
header {
     background-color: rgb(45, 0, 0);
     color: rgb(255, 246, 246);
     font-size: 1.2rem;
     display: flex;
     padding: 2% 20vw;
     align-items: center;
}

nav {
     margin-left: auto;

     ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;

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

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

                    &:hover {
                         color: rgb(255, 174, 43);
                         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(45, 0, 0);

               .nav-item {
                    margin-left: 0;

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

.menu-toggle {
     display: none;
}

@media screen and (max-width: 992px) {
     .menu-toggle {
          display: block;
          font-size: 3rem;
          padding: 1px 5px 10px 5px;
          border: 1px solid rgb(255, 185, 33);
          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(45, 0, 0);
               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;
               }
          }
     }
}

/*Accordion*/
.main {
     margin-top: 4%;
}

.accordion {
     border-bottom: 1px solid #fff0f0;
     float: left;
     margin-top: 4.5%;

     .accordion-header {
          cursor: pointer;

          h3:hover {
               color: rgb(245, 143, 0);
          }

          h3:after {
               content: '\002b';
               float: right;
               font-size: 2rem;
               font-weight: 100;
          }
     }

     .accordion-panel {
          height: 0;
          width: 100%;
          overflow: hidden;
          transition: transform ease 7s;
     }

     &.open {
          .accordion-header {
               color: gold;

               h3:after {
                    content: '\2013';
               }
          }

          .accordion-panel {
               height: fit-content;
               transition: transform ease 100ms;
               margin-bottom: 2%;
          }
     }
}

/*image credits*/
.credits {
     width: 100%;
     background-image: linear-gradient(rgb(116, 0, 29), rgba(143, 0, 0, 1));
     background-repeat: no-repeat;
     background-size: cover;
}

.creditstext {
     margin: 0 5%;
     padding: 2% 0 10%;

     h3 {
          font-size: 1.5rem;
     }
}

a:link {
     color: rgb(255, 244, 149);
     background-color: transparent;
     text-decoration: underline;
}

a:visited {
     color: rgb(255, 59, 92);
     background-color: transparent;
     text-decoration: underline;
}

a:hover {
     color: rgb(255, 255, 255);
     background-color: transparent;
     text-decoration: underline;
}

a:active {
     color: rgb(228, 148, 0);
     background-color: transparent;
     text-decoration: underline;
}

/*Media Queries*/
@media screen and (max-width: 1600px) {

     .main-container {
          margin: 0 20%;
     }

     .secondary-container {
          padding: 3.5% 4%
     }
}

@media screen and (max-width: 1300px) {

     .main-container {
          margin: 0 17%;
     }

     h1 {
          font-size: 3.4rem;
     }

     h2 {
          font-size: 2.7rem
     }
}

@media screen and (max-width: 1300px) {

     .main-container {
          margin: 0 17%;
     }

     h2 {
          font-size: 2.3rem
     }

     h3 {
          font-size: 1.5rem
     }
}

/*Media Queries*/
@media screen and (max-width: 950px) {
     .main-container {
          margin: 0 10%;
     }

     h1 {
          font-size: 2.8rem;
     }

     h2 {
          font-size: 2.3rem;
          text-align: center;
     }

     h3 {
          display: block;
          font-size: 1.5rem;
          margin-top: 5px;
     }

     .img-desc {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0;
          width: 100%
     }

     .chartext {
          text-align: center;
          text-align-last: center;
          margin: 0
     }

     .secondary-container {
          justify-content: center;
          align-items: center;
     }

     .imgdiv {
          display: block;
          margin: 0 15%;
          width: 70%;
          text-align: center;
     }

     .navbox {
          width: 12vh;
          height: 12vh;
     }
}