#landing-container,#nav-container {
    width: fit-content;
    height: fit-content
}

#landing-container #background {
    width: 100vw;
    height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

#landing-container #background img {
    width: 100%;
    height: 100%
}

#nav-container {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column
}

#nav-main,#nav-main #logo {
    height: 64px;
    flex-direction: row
}

#nav-main {
    width: 100%;
    justify-content: space-between
}

#nav-main #logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 24px
}

#nav-main #logo img {
    width: 40px;
    height: 40px
}

#nav-main #text-container {
    display: flex;
    flex-direction: column
}

#nav-main #mobile-button {
    width: 28px;
    height: 28px;
    margin-right: 24px
}

#nav-main #mobile-button img {
    width: 28px;
    height: 28px
}

#nav-main #desktop {
    width: fit-content;
    height: 64px;
    margin-right: 24px;
    display: none;

    align-items: center;
    justify-content: center;
}

#nav-container #mobile {
    width: 100%;
    height: fit-content;
    max-height: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center
}

#nav,#nav-main,.nav-element {
    display: flex;
    align-items: center
}

#nav,#nav a {
    width: fit-content
}

#nav {
    height: fit-content;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 36px
}

#nav a {
    height: 24px;
    padding: 0 32px;
    text-decoration: none;
    color: inherit
}

.nav-element {
    width: 100%;
    height: 100%;
    justify-content: center
}

#landing-content {
    width: 100vw;
    height: calc(100svh - 64px);
    padding-top: 64px
}

#content {
    width: 100vw;
    height: fit-content
}

#landing-container #background img {
    object-fit: cover
}

#landing-container #background {
    overflow: hidden
}

#nav-container #mobile {
    overflow: hidden;
    transition: max-height .4s ease-in-out
}

#nav-container {
    transition: all .4s ease-in-out;
    background-color: #1e1e1e7b;
    color: #fefefe;
    -webkit-box-shadow: 0 0 8px 0 rgba(30,30,30,.2);
    -moz-box-shadow: 0 0 8px 0 rgba(30,30,30,.2);
    box-shadow: 0 0 8px 0 rgba(30,30,30,.2)
}

#nav a,#nav-main #logo #text-container .text {
    font-family: "Roboto";
    font-weight: 450;
    font-size: 13px;
    letter-spacing: 1px
}

#nav-container #mobile #nav a.active,#nav-container #nav-main #desktop #nav a.active {
    color: var(--color-red)!important
}

#nav-container.inside #mobile #nav a.active,#nav-container.inside #nav-main #desktop #nav a.active {
    color: var(--color-yellow)!important
}