.container
{
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  space-between;
    width:            100%;
    min-width:        100%;
    height:           100vh;
    max-height:       100vh;
    /*outline:          1px black dotted;*/
    background-color: var(--color-palette-licorice);

}

.navbar__logo
{
    position:  absolute;
    top:       50%;
    left:      0;
    height:    100%;
    transform: translate(0%, -50%);
}

.navbar
{

    position:        relative;
    z-index:         9999;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    width:           100%;
    max-height:      10vh;
    padding:         1rem;
    /*border:          10px solid black;*/
    /*outline:         solid blue 1px;*/

}

.navbar__inner-desktop
{
    display:                    flex;
    flex-direction:             row;
    justify-content:            space-between;
    width:                      50%;
    border-radius:              var(--default-border-radius);
    /*outline:                    dotted black 1px;*/

    padding:                    0.3rem;
    padding-right:              1rem;
    padding-left:               1rem;
    background-color:           rgba(33, 8, 12, 0.3);
    box-shadow:                 0 0px 40px 10px rgba(33, 8, 12, 1);;
    /*backdrop-filter:            blur(20px);*/
    color:                      var(--color-palette-white-smoke);

    transition-property:        box-shadow;
    transition-duration:        0.4s;
    transition-timing-function: linear;

}

.navbar__inner-desktop:hover
{
    box-shadow: 0 0px 120px 30px rgba(224, 224, 224, 0.3);

}

.navbar__inner-desktop-item-container
{
    display:         flex;
    /*width:   50%;*/
    justify-content: center;
    /*outline:         solid 1px white;*/

}

.navbar__inner-desktop-item
{
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;

    opacity:         100%;
    font-size:       1rem;
}

.navbar__inner-handheld
{
    position:         relative;
    display:          flex;
    flex-direction:   row;
    align-items:      center;
    justify-content:  center;

    width:            fit-content;
    height:           100%;
    border:           none;
    background-color: transparent;
    color:            var(--color-palette-white-smoke);
    font-size:        2rem;
    letter-spacing:   1rem;
}

#menu-slide
{
    position:                  fixed;
    top:                       0;
    left:                      100%;
    z-index:                   7;
    flex-direction:            column;

    width:                     50vw;
    height:                    100vh;
    outline:                   solid black 1px;
    background-color:          white;

    /*transform: translateX(-587px) ;*/
    opacity:                   60%;
    transition:                transform 0.25s ease-out;
    touch-action:              pan-y;
    border-top-left-radius:    var(--default-border-radius);
    border-bottom-left-radius: var(--default-border-radius);
}

.home-slide-button-container
{
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: start;
    width:           100%;
    min-height:      4rem;
}

#home-slide-button
{
    height: 100%;
    color:  var(--color-palette-licorice);
}

.backdrop
{
    position:       fixed;
    inset:          0;
    z-index:        88;
    background:     rgba(0, 0, 0, 0.35);
    opacity:        0;
    transition:     opacity 0.2s ease;
    pointer-events: none;
    touch-action:   pan-y;

}

.backdrop--visible
{
    display:        flex;
    opacity:        1;
    pointer-events: auto;
}

.backdrop--invisible
{
    display: none;
}

.menu-slide--dragging
{
    transition: none !important;
}

.navbar__inner-handheld button
{
    height:           100%;
    border:           none;
    background-color: transparent;
    color:            var(--color-palette-white-smoke);
    font-weight:      100;
    font-size:        2rem;
    letter-spacing:   2rem;
}

.navbar__inner-handheld button img
{
    height: 100%;

}

.navbar__inner-handheld button:focus-visible
{

}

.navbar__dropdown
{
    position:         fixed;

    top:              40%;
    left:             50%;

    z-index:          6;
    display:          flex;
    gap:              7%;
    border-radius:    var(--default-border-radius);

    padding:          2rem;
    background-color: rgba(33, 8, 12, 0.6);

    box-shadow:       inset 0 5px 180px -80px rgba(224, 224, 224, 100), 0 0px 40px 10px rgba(33, 8, 12, 1);;
    backdrop-filter:  blur(20px);
    color:            var(--color-palette-white-smoke);
    font-size:        var(--font-size-navigation);
    transform:        translate(-50%, -50%); /* Pull it back by half its own size */

}

.floating_justified_text-container
{
    z-index:         10;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-around;
    width:           100%;
    /*padding:         13rem;*/
    padding:         1rem;
    user-select:     none;

}

.floating_justified_text-wrapper
{
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-around;
    width:           90%;
}

.floating_justified_text
{
    z-index:         10;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-around;
    width:           50%;
}

.floating_text
{
    display:         flex;

    align-items:     center;
    justify-content: center;
    color:           var(--color-palette-white-smoke);
    font-weight:     300;
    font-size:       5rem;
}

.explore_footer_container
{
    z-index:         100;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    color:           var(--color-palette-white-smoke);
}

.explore-text
{
    display:                   flex;
    align-items:               center;
    justify-content:           center;
    color:                     #3d000f;
    animation-name:            text-blink;
    animation-duration:        1s; /* acts as a unit scale for progress */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction:       alternate;
}

.explore-icon
{
    width:                     100px;
    height:                    100px;
    min-height:                0;
    object-fit:                contain;
    background-color:          #3d000f; /* this is the "fill" color */
    mask:                      url("../assets/deco_explore.svg") no-repeat center / contain;
    animation-name:            explore-blink;
    animation-duration:        1.2s; /* acts as a unit scale for progress */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction:       alternate;
}

@keyframes text-blink
{
    to
    {
        color: var(--color-palette-white-smoke);
    }
}

@keyframes explore-blink
{
    to
    {
        background-color: var(--color-palette-white-smoke);
    }

}

.navbar__dropdown-section-item-container
{
    position:        relative;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    width:           100%;
    min-height:      3rem;
}

.navbar__dropdown-section
{
    display:         flex;

    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;

    width:           10rem;

    font-size:       2rem;

}

.navbar-dropdown-menu-column-element-wrapper
{
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;

    width:           100%;
    /*outline:          solid purple 1px;*/

}

.menu-burger
{
    pointer-events: none;
}

.navbar-dropdown-menu-column-element-text-container
{
    display:         flex;
    align-items:     center;
    justify-content: left;

    width:           100%;
    /*outline:          dashed blue 1px;*/
    font-weight:     bold;
}

.navbar-dropdown-menu-column-element-text
{
    display:         flex;
    align-items:     center;
    justify-content: center;

    font-weight:     300;
}

.dropdown_chevron_container
{
    position:        absolute;
    top:             50%;
    left:            0;

    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    transform:       translate(-100%, -50%);

    /*outline:          dotted darkgreen 2px;*/
}

.navbar__dropdown-section-item-container:hover .dropdown__chevron
{
    opacity:   100%;
    transform: translateX(0%);

}

.dropdown__chevron
{
    width:                      100%;
    height:                     100%;
    /*outline:                    solid 2px crimson;*/
    opacity:                    0;
    transform:                  translateX(-30%);
    transition-property:        transform, opacity;
    transition-duration:        0.1s;
    transition-timing-function: linear;
}

.dropdown__section-column-container
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    height:          100%;
    padding-top:     15%;
}

.first_column
{

    display:         flex;
    flex-direction:  column;
    justify-content: space-between;

    width:           400px;
    font-size:       1.3rem;

}

.dropdown__section-heading
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.7rem;

}

.hero__container
{
    position:        absolute;
    /*top: 50%;*/
    /*t*/
    z-index:         1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100vh;
}

.hero__container img
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    object-fit:      cover;
}

.dropdown__section-item
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    font-size:       1rem;
}

@media screen and (width < 1280px)
{
    /* Go into handheld mode (mobile/tablet) */
    .navbar__inner-handheld
    {
        display: flex;
    }

    .navbar__inner-desktop
    {
        display: none;
    }

    .navbar
    {
        justify-content: flex-end;
    }

    .navbar__logo
    {
        opacity: 0;
    }

    .menu-burger
    {
        opacity: 1;
    }

}

@media screen and (width >= 1280px)
{
    /* Go out of handheld mode (mobile/tablet) */
    .navbar__inner-handheld
    {
        display: none;
    }

    .navbar__logo
    {
        opacity: 1;
    }

    .menu-burger
    {
        opacity: 0;
    }

    .navbar__inner-desktop
    {
        display: flex;
    }

    .navbar
    {
        justify-content: center;
    }

    #menu-slide
    {
        display: none;
    }
}