.navbar {
    width: 100%;
    height: 54px;

    background: var(--secondary);
    position: fixed;

    z-index: 10;

    -webkit-transition:  0.5s ease-out;
    -moz-transition:  0.5s ease-out;
    -o-transition: 0.5s ease-out ;
    transition:  0.5s ease-out;
}

.navbar .navbar-items {
    width: -moz-fit-content;
    width: fit-content;
    height: 100%;

    margin: 0 auto;
}

.navbar-items ul {
    height: 100%;
    width: 100%;
}

.navbar-items ul li {
    margin: 0 45px;
}

.navbar-items ul li.textual-item {
    position: relative;

    height: 100%;   
}

.navbar-items ul li .circle {
    border: 4px solid var(--primary);
    height: 19px;
    width: 19px;

    border-radius: 50%;

    background: var(--primary);
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}

.navbar-items ul li .circle.active {
    background: none;
}

.navbar-items ul li .circle:hover {
    cursor: pointer;
}

.navbar-items ul li .text {
    width: -moz-fit-content;
    width: fit-content;

    padding: 0 10px;

    font-size: 1.8em;
    color: var(--primary);
}

.navbar-items ul li .text:hover {
    cursor: pointer;
}

.navbar-items ul li .text .wrapper {
    width: -moz-fit-content;
    width: fit-content;

    display: inline-block;
    overflow-x: hidden;
}

.navbar .navbar-items ul li .text span {
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.navbar .navbar-items ul li.textual-item .s {
    position: absolute;

    width: 50px;
    height: 100%;

    background: var(--logo-url-day) no-repeat center;

    opacity: 0;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);

    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;

    z-index: -1;
}

.navbar.alternative {
    background: var(--primary-transparent);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.navbar.alternative .navbar-items ul li .circle {
    border-color: var(--secondary);
    background: var(--secondary)
}

.navbar.alternative .navbar-items ul li .circle.active {
    background: var(--primary);
}

.navbar.alternative .navbar-items ul li .text {
    color: var(--secondary);
}

.navbar.alternative .navbar-items ul li .text .left span {
    -webkit-transform: translate(110%);
    -moz-transform: translate(110%);
    -o-transform: translate(110%);
    transform: translate(110%);
}

.navbar.alternative .navbar-items ul li .text .right span {
    -webkit-transform: translate(-110%);
    -moz-transform: translate(-110%);
    -o-transform: translate(-110%);
    transform: translate(-110%);
}

.navbar.alternative .navbar-items ul li.textual-item .s {
    background: var(--logo-url-night) no-repeat center;
    opacity: 1;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.navbar.alternative .navbar-items ul li .text .stroke-primary {
    -webkit-text-stroke-color: var(--secondary);
}


.navbar svg .back {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.navbar svg .front {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    transition: 0.5s ease-out;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* 
.navbar.alternative svg * {
    stroke: var(--secondary);
} */

body.night .navbar svg .back {
    -webkit-transform: scale(0.25) translate(-63%, -63%) rotate(-135deg);
    -moz-transform: scale(0.25) translate(-63%, -63%) rotate(-135deg);
    -o-transform: scale(0.25) translate(-63%, -63%) rotate(-135deg);
    transform: scale(0.25) translate(-63%, -63%) rotate(-135deg);

    stroke-width: 2.5px;
}

body.night .navbar svg .front {
    -webkit-transform: scale(0.7) translate(30%, 30%) rotate(180deg);
    -moz-transform: scale(0.7) translate(30%, 30%) rotate(180deg);
    -o-transform: scale(0.7) translate(30%, 30%) rotate(180deg);
    transform: scale(0.7) translate(30%, 30%) rotate(180deg);
}




@media only screen and (max-width: 800px){
    .navbar-items ul li {
        margin: 0 20px;
    }
}

@media only screen and (max-width: 550px){
    .navbar-items ul li:nth-child(3) {
        margin: 0px;
    }

    .navbar-items ul li .circle {
        width: 15px;
        height: 15px;

        border-width: 3px;
    }
}

@media only screen and (max-width: 410px){
    .navbar-items ul li {
        margin: 0 10px;
    }
}

@media only screen and (max-width: 320px){
    .navbar.alternative .navbar-items ul li .text {
        font-size: 1.5em;
    }
}