:root {
    /* Backgrounds */
    --bg-color: #141924;
    --bg-color2: #1B202C;  /* Secondary background */
    --navbar-bg-color: #202a40;
    --navbar-bg-color2: #181F2E;

    /* Text colors */
    --white-1: #E6EAF3;
    --white-2: #cfd4e1;
    --white-3: #C7D0E0;  /* Profile section title */
    --white-4: #A0ABBD;  /* Profile section text */

    --black-1: #131415;
    --black-2: #0b0c0c;

    --blue-1: #0b94be;
    --blue-2: #0066FF;
    --blue-3: #004196;
    --blue-4: #113B73;
    --purple-1: #8c00ff;
    --green-1: #00ae48;
    --yellow-1: #A8AE00;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

/* COLORS */

.text-white-1 {
    color: var(--white-1);
}

.text-white-2 {
    color: var(--white-2);
}

.text-white-3 {
    color: var(--white-3);
}

.text-white-4 {
    color: var(--white-4);
}

.text-black-1 {
    color: var(--black-1);
}

.text-black-2 {
    color: var(--black-2);
}

.text-blue-1 {
    color: var(--blue-1);
}

.text-blue-2 {
    color: var(--blue-2);
}

.text-blue-3 {
    color: var(--blue-3);
}

.text-blue-4 {
    color: var(--blue-4);
}

.text-purple-1 {
    color: var(--purple-1);
}

.text-green-1 {
    color: var(--green-1);
}

/* HOVER COLORS */

.texth-white-1:hover {
    color: var(--white-1);
}

.texth-white-2:hover {
    color: var(--white-2);
}

.texth-white-3:hover {
    color: var(--white-3);
}

.texth-white-4:hover {
    color: var(--white-4);
}

.texth-blue-1:hover {
    color: var(--blue-1);
}

.texth-blue-2:hover {
    color: var(--blue-2);
}

.texth-blue-3:hover {
    color: var(--blue-3);
}

.texth-blue-4:hover {
    color: var(--blue-4);
}

.texth-purple-1:hover {
    color: var(--purple-1);
}

.texth-green-1:hover {
    color: var(--green-1);
}

html {
    background-color: var(--bg-color);
    font-family: 'Source Sans Pro';
    padding: 0;
    margin: 0;
}

body {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: unset;
    color: unset;
}

.hidden {
    visibility: hidden;
}

#nav-bar {
    display: flex;
    gap: 50px;
    justify-content: space-between;
    margin: 0;
    padding: 10px 10%;
    height: 60px;
    
    background-color: var(--navbar-bg-color2);
    border-bottom: solid 1px var(--blue-4);
}

.nav-bar-left {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: auto;
    flex: 0.5 1 auto;
}

.nav-bar-left #nav-bar-icon {
    height: 45px;
    align-self: center;
}

#nav-bar-icon img {
    height: 100%;
    border-radius: 15%;
}

.nav-bar-left a {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: auto;
    flex: 0.5 1 auto;
    
}

.nav-bar-left a > span {
    font-size: 1.5em;
    font-weight: 800;
    text-align: left;
    align-self: center;
    flex: 1 0 180px;
    
    line-height: 1;
}

#nav-bar-lang-switcher {
    flex: 0 1 60px;
    height: 30px;
    padding: 5px;
    border-radius: 5px;
    align-self: center;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    cursor: pointer;
    border: 2px solid transparent;
    
    position: relative;
}

#nav-bar-lang-switcher:hover,
#nav-bar-lang-switcher.clicked {
    background-color: var(--bg-color2);
    border: 2px solid white;
}

#nav-bar-lang-switcher img {
    height: 30px;
}

#nav-bar-lang-switcher .current-lang {
    display: flex;
    font-size: 1em;
}

#nav-bar-lang-switcher .current-lang span {
    position: relative;
    top: 20%;
    left: 10%;
    color: var(--white-1);
}

#nav-bar-lang-switcher .lang-menu:not(.show) {
    display: none;
    background-color: var(--bg-color);
}

#nav-bar-lang-switcher .lang-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0px;
    padding: 6px 0px;
    background-color: var(--navbar-bg-color);
    border-radius: 5px;
}

#nav-bar-lang-switcher .lang-menu a {
    padding: 4px 8px;
    display: flex;
    gap: 10px;
    color: var(--white-1);
    transition: color 0s;
}

#nav-bar-lang-switcher .lang-menu a:hover {
    color: var(--blue-1);
    background-color: rgba(255, 255, 255, 0.05);
}

#nav-bar-lang-switcher .lang-menu a span {
    align-self: center;
    font-size: 1.2em;
    font-weight: bold;
}

#nav-bar-menu-button {
    display: none;
}

#nav-bar-menu {
    flex: 0.35 1.5 0;
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;

    color: var(--white-1);
    font-size: 1.2em;
    
    font-weight: 600;
    gap: 25px;
}

#nav-bar-menu * {
    align-self: center;
    transition: color .3s;
}

/* 950- SCREEN */
@media (max-width: 950px) {
    header {
        background-color: var(--navbar-bg-color);
    }
    
    #nav-bar {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        padding: 8px 0px;
        margin: 0 0;
        height: 50px;
        
        z-index: 1;
    }
    
    #nav-bar .nav-bar-left {
        display: flex;
        justify-content: flex-start;
        
        gap: 0px;
        
        font-size: .9em;
    }
    
    #nav-bar-icon {
        display: flex;
        justify-content: center;
        gap: 20px;
        height: 50px;
        margin-left: 5%;
    }
    
    #nav-bar-icon a {
        display: none;
        text-align: center;
        align-self: center;
        font-family: 'Source Sans Pro';
        font-size: 1.5em;
        color: black;
        font-weight: 800;
    }
    
    #nav-bar-lang-switcher .lang-menu {
        background-color: var(--navbar-bg-color);
        z-index: 2;
    }
    
    #nav-bar-lang-switcher .lang-menu a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    #nav-bar-menu-button {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        margin-right: 5%; 
    }
    
    #nav-bar-menu-button button {
        width: 50px;
        height: 50px;
        background-color: var(--bg-color);
        color: var(--white-1);
        border: none;
        border-radius: 15%;
    }
    
    #nav-bar-menu-button button span {
        font-size: 2.5em;
        font-weight: 600;
        display: flex;
        justify-content: center;
    }
    
    #nav-bar-menu-button button:hover {
        cursor: pointer;
        background-color: var(--bg-color2);
        transition: background-color 0s;
    }
    
    #nav-bar-menu {
        position: absolute;
        top: 67px;
        left: 0px;
        width: 100%;
        
        display: flex;
        flex-direction: column;
        gap: 0px;
        background-color: var(--bg-color2);
        
        z-index: 0;
        transition: all 1s;
        
    }

    #nav-bar-menu:not(.show) {
        top: -153px;
        visibility: hidden;
        z-index: -1000;
    }
    
    #nav-bar-menu > a {
        padding: 15px 0px;
        width: 100%;
        transition: background-color .2s;
    }
    
    #nav-bar-menu a:hover {
        background-color: var(--navbar-bg-color);
    }

    main {
        transition: all 1s;
    }
    
    main.nav-menu-margin {
        margin-top: 220px;
    }
}