:root {

}

#mobile{
    display: none;
}

#desktop{

}

.navbar_background {
    background-color: var(--page-color);
    justify-self: stretch;
    grid-area: 1 / 1 / 3 / 2;
}

.navbar_top {
    position: sticky;
    top: 0;
    justify-self: stretch;
    align-self: start;
    grid-area: navbar_top;
}

.navbar_top .nav_point{
    border-bottom: 1px solid black;
}

.navbar_bottom {
    position: sticky;
    bottom: 0;
    align-self: end;
    grid-area: navbar_bottom;
}

.navbar_bottom .nav_point{
    border-top: 1px solid black;
}

.database_menu_desktop {
    display: none;
}

.database_menu_mobile {
    display: none!important;
}

.nav_point {
    padding: .75em 0 .75em .75em;
    width: 100%;
    background-color: var(--page-color);
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--text-color);
}

.nav_point span {
    transition: padding-right 0.5s;
    cursor: pointer;
    display: inline-block;
    position: relative;
    color: var(--text-color);
    font-weight: normal;
}

.nav_point span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
}

.nav_point:hover span {
    padding-right: 25px;
    transition: padding-right 0.5s;
}

.nav_point:hover span:after {
  opacity: 1;
  right: 0;
  transition: opacity 0.5s;
}

.nav_selected {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    opacity: 1;
    top: 0;
    right: -20px;
    padding-right: 25px;
}

@media (max-width: 850px) {
    .nav_point {
        font-size: 0.75rem;
        padding: .75em 0 .75em .1em;
    }

    #mobile{
        display: block;
    }

    #desktop{
        display: none;
    }
}

@media (max-height: 770px) and (-webkit-max-device-pixel-ratio: 1) {
    .navbar_bottom {
        position: relative;
    }

    .navbar_top {
        position: relative;
    }
}

@media (max-height: 440px) {
    .navbar_bottom {
        position: relative;
    }

    .navbar_top {
        position: relative;
    }
}