/*SUPER HEADER PORTION OF STYLES*/

.super-header {
    background-color: black;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    height: 20px;
    width: 100vw;
    z-index: 11;
}

.super-header > div {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 980px;
}

.super-header-buttons {
    z-index: 11;
    height: 20px;
}

.super-header-menus {
    z-index: 10;
    background-color: transparent;
    align-items: flex-start;
    pointer-events: none;
}

@media screen and (max-width:980px) {
    .super-header > div {
        width: 100vw;
    }
}

.super-header-buttons > button {
    height: 100%;
    border: none;
    flex: 1;
    pointer-events: all;
    cursor: pointer;
}

.header-g {
    background-color: #44e537;
}
.header-g:hover {
    background-color: #76ff69;
}
.header-y {
    background-color: #fad019;
}
.header-y:hover {
    background-color: #ffff4b;
}
.header-c {
    background-color: #38dadd;
}
.header-c:hover {
    background-color: #6affff;
}
.header-m {
    background-color: #dd3894;
}
.header-m:hover {
    background-color: #ff65c7;
}
.header-o {
    background-color: #ec813b;
}
.header-o:hover {
    background-color: #ffb36d;
}
.header-b {
    background-color: #3d5ed2;
}
.header-b:hover {
    background-color: #6f90ff;
}
.header-r {
    background-color: #e2383b;
}
.header-r:hover {
    background-color: #ff6a6d;
}

.super-header-menus > ul{
    top: 20px;
    flex: 1;
    list-style: none;
    background-clip: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100vh;
    transition: max-height 0.2s ease-in-out;
}

.super-header-menus > ul > li{
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
    white-space: nowrap;
    font-family: monospace;
    font-size: 1.5rem;
}

@media screen and (max-width:730px) {
    .super-header-menus > ul > li{
        font-size: 1rem;
    }
}

.super-header-menus > ul > li:first-child {
    font-weight: bold;
    text-align: center;
}

.super-header-menus > ul > li > a{
    display: block;
    text-decoration: none;
    color: black;
    pointer-events: all;
}

.super-header-menus > ul > li > a:hover{
    text-decoration: underline;
}


.menu-g {
    background-color: #44e537;
}
.menu-g > li:has(a:hover) {
    background-color: #76ff69;
}
.menu-y {
    background-color: #fad019;
}
.menu-y > li:has(a:hover) {
    background-color: #ffff4b;
}
.menu-c {
    background-color: #38dadd;
}
.menu-c > li:has(a:hover) {
    background-color: #6affff;
}
.menu-m {
    background-color: #dd3894;
}
.menu-m > li:has(a:hover) {
    background-color: #ff65c7;
}
.menu-o {
    background-color: #ec813b;
}
.menu-o > li:has(a:hover) {
    background-color: #ffb36d;
}
.menu-b {
    background-color: #3d5ed2;
}
.menu-b > li:has(a:hover) {
    background-color: #6f90ff;
}
.menu-r{
    background-color: #e2383b;
}
.menu-r > li:has(a:hover) {
    background-color: #ff6a6d;
}