header {
   z-index: 10;
   position: fixed;
   width: 100%;
   background-color: var(--silver);
   margin: 0px;
   padding: 0px;
}

nav {
   width: 100%;
   height: var(--headerHeight);
   padding: 0px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background-color: var(--night);
}

.navStart {
   width: 30vw;
   height: 100%;
   background-color: var(--color1);
   clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
   color: var(--white);
   transition: all 200ms linear;
}

.navStart:hover {
   background-color: var(--color1alt);
   color: var(--color2);
   text-shadow: 1px 1px 1px black;
}

.navCenter, a.navCenter > * {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   height: 100%;
   pointer-events: auto;
}

.navCollapse {
   color: var(--white);
   display: none;
   font-size: 8vw;
   cursor: pointer;
   width: 25vw;
   height: 100%;
}

.navMain{
   display: flex;
   flex-direction: row;
   opacity: 1;
   width: 45vw;
}
.navCenter {
   padding: 0 2vw;
   white-space: nowrap;
}
.navMain li {
   width: auto;
   display: flex;
   justify-content: center;
   flex: 1 auto;
   position: relative;
}

.navMain * {
   color: var(--white);
   
   transition: color 200ms linear;
}

.navMain a:hover > h2{
   color: var(--color2);
}

.navParent {
   margin: 0px;
   padding: 0px;
   position: relative;
   pointer-events: none;
}

.navParent:hover > a h2 {
   color: var(--color2);
}

.navMain > li:not(:first-child)::before {
   position: absolute;
   display: block;
   content: "";
   width: 1px;
   top: 15%;
   left: 0%;
   height: 70%;
   background-color: var(--gray);
}

ul {
   height: 100%;
   margin: 0px;
   padding: 0px;
}

.navChildren {
   position: absolute;
   opacity: 0;
   top: 0%;
   left: 0%;
   transition: all 100ms linear;
   background: var(--night);
   z-index: -1;
   width: 100%;
   font-weight: 100;
}

.navChildren li {
   height: var(--headerDropdownHeight);
   width: 100%;
}

.navMain, .navChildren {
   list-style: none;
}

.navParent:hover .navChildren {
   opacity: 1;
   left: 0%;
   top: 100%;
   height: auto;
}

.navEnd {
   width: 25vw;
   height: 100%;
   background-color: var(--white);
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
   color: var(--color1);

   transition: all 200ms linear;
}

.navEnd:hover {
   background-color: var(--color2);
   color: var(--color1alt);
   
   text-shadow: 1px 1px 1px black;
}

h1, h2, .scrollButton{
   font-family: "Passion One", sans-serif;
   font-weight: 400;
   font-style: normal;
   letter-spacing: 0.3vw;
   margin: 0px;
   padding: 0px;
   cursor: pointer;
}

.navChildren .navCenter {
   width: 100%;
}

.navStart h1 {
   padding-right: 3.5vw;
   font-size: 4vw;
}

.navEnd h1 {
   padding-left: 3vw;
   font-size: 4vw;
}

h2 {
   font-size: 3vw;
   min-width: auto;
   font-weight: bold;
}

.navChildren h2 {
   font-weight: lighter;
   font-size: 2.5vw;
   letter-spacing: 0px;
}

@media screen and (max-width: 768px) {
   .navCollapse {
        display: flex;
   }
   .navCollapse:hover + .navMain, .navMain:hover{
        display: flex;
   }
   .navMain {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--night);
   }
   .navMain * {
        font-size: 4vw;
   }
   .navChildren h2 {
      font-weight: lighter;
      font-size: 3.5vw;
      letter-spacing: 0px;
   }
   
   .navStart {
        width: 40vw;
        transition: all 200ms linear;
   }
   .navEnd {
        width: 35vw;
        transition: all 200ms linear;
   }
   .navStart h1 {
        font-size: 5vw;
   }
   .navEnd h1 {
        font-size: 5vw;
   }
}