/* header.css
- main_menu: absolute
- header-left
- header-center
- header-right
*/

header {
     display: flex;
     justify-content: space-between;

     width: 100%;
     height: fit-content;
     padding: 45px;

     border-top: 5px solid var(--wurple);

     transition-delay: 0.1s;
}

/* Main Menu and inner elements */

#main_menu {
     position: absolute;
     top: 0px;
     right: 0;
     display: flex;
     flex-direction: column;

     width: 100vw;
     height: fit-content;
     padding: 0 60px 60px 60px;
     z-index: 1000;

     background-color: var(--wurple);
     opacity: 0;
     transition: 0.15s;
}
#main_menu.active {
     opacity: 1;
}


/* Main part of the Main Menu in the header */
#menu-main {
     display: flex;
     padding: 0 15px 45px 15px;
     margin: 0;
}

#menu-main li {
     list-style: none;
}

#menu-main a {
     font-family: helvetica_black;
     font-size: 1.25rem;
}

#menu-main .sub-menu a {
     font-family: helvetica;
     font-size: 0.75rem;
}
#menu-main .sub-menu li:not(:last-child) {
     margin-bottom: 5px;
}

#menu-main a:hover {
     opacity: 0.75;
}

#menu-main > .menu-item {
     display: flex;
     flex-direction: column;
     width: fit-content;
     margin-right: 60px;
}


#menu-main .sub-menu {
     display: flex;
     flex-direction: column;
     padding: 10px 0 0 0;
}


/* The footer of the menu */

.main_menu-footer {
     display: flex;
     width: 100%;
     height: fit-content;
     background-color: #00000010;
     padding: 15px 30px;
     border-radius: 5px;
}

/* Search Form */
.search-form {
     display: flex;
}
#s {
     background-color: #00000010;
     color: #ffffff;
     border: none;
     outline: none;
     font-family: helvetica;
}



/* Header-Left 
Handling the design and animation of the menu button
*/
#main_menu_button {
     display: flex;
     justify-content: center; align-items: center;

     width: 45px;
     height: 45px;
     border-radius: 2px;
     
     background-color: #ffffff10;
     cursor: pointer;
}
.main_menu_button_line {
     position: absolute;
     width: 20px;
     height: 3px;
     border-radius: 1px;

     background-color: #ffffff;
}
.main_menu_button_line-one {
     transform: translateY(7px);
}
.main_menu_button_line-three {
     transform: translateY(-7px);
}

/* Header-Left when the menu is active */
#main_menu_button.active .main_menu_button_line-two {
     width: 0px;
}
#main_menu_button.active .main_menu_button_line-one {
     transform: scale(0.95) rotate(-45deg) translateY(0px); 
}
#main_menu_button.active .main_menu_button_line-three {
     transform: scale(0.95) rotate(45deg) translateY(0px); 
}



/* Header-Center */
.header-center {
     display: flex;
     align-items: center;
     width: fit-content;
}
#wordmark svg {
     position: relative;
     z-index: 1000;
     height: 35px;
     /* transform: translateX(60px); */
}
/* #wordmark svg > path {
     display: none;
} */



/* Header-Right */
.header-right {
     display: flex;
     align-items: center;
}