:root {
    --gray-1: #3f3f3f;
    --gray-2: #32353a;
    --gray-3: #25282c;
    --gray-4: #151618;
    --gray-5: #151618;
    --gray-6: #111111;
    --white-1: #eeeeee;
    --white-2: #a9abb3;
}

body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: var(--gray-6);
}

a {
    color: rgb(255, 255, 255);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: none;
    z-index: 2;
    transition: background-color 0.2 ease-in-out;
}

.overlay.active {
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
}

.inactive {
    background-color: rgba(63, 63, 63, 0.8);
}

.header {
    margin-bottom: 200px;
    z-index: 100;
}

/* For desktop and laptop screens */
@media (min-width: 900px) {
    .header .menu {
        max-height: none;
        display: block;
    }
    .header li {
        float: left;
    }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }
    .header .menu-icon {
        display: none;
    }

    .header {
        border-radius: 0;
        margin: 0;
    }

    .overlay.tabs-visible {
        background-color: rgba(0, 0, 0, 0);
    }
    .inactive {
        background-color: rgba(0, 0, 0, 0);
    }
}