.header {
    position: relative;
    background: none;

    display: flex;
    align-items: center;
}

.header .title {
    padding: 1%;
    padding-left: 2%;
}

.header .menu {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 20%;
    height: 100%;
    min-width: 300px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .menu .menu-label {
    color: var(--main-font-color);
}

.header .menu .submenu {
    height: 100%;
    display: flex;
    align-items: center;
}

.header .submenu .submenu-content {
    position: absolute;
    left: -22%;
    top: 80%;
    z-index: 1;

    background-color: var(--main-submenu-background);
    
    width: 120px;
    height: 120px;
    padding: 3% 10%;
    padding-right: 1%;
    border-radius: 3px;

    display: none;
}

.header .submenu .submenu-content a {
    color: var(--main-submenu-font-color);
}

.header .submenu:hover .submenu-content, .header  .submenu-content:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.header .menu-label.blue {
    color: var(--main-font-active-color);
}

#title {
    cursor: pointer;
}