#nav-space,
nav {
    transition: box-shadow .3s ease-out;
    max-height: 64px;
    height: 7vh;
    padding: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    box-shadow: inset 0 -1px 0 rgba(var(--color-background) / 0), 0 -1rem 1rem -.9rem rgba(0 0 0 / 1);
}

@keyframes backgroundMove {
    0% {
        background-position: top left;
    }

    100% {
        background-position: top right;
    }
}

nav:before {
    transition: opacity .3s ease-in;
    content: ' ';
    display: inline-block;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/clouds1.svg);
    background-repeat: repeat-x;
    z-index: -1;
    background-position: top left;
    animation: backgroundMove 60s linear infinite;
    pointer-events: none;
    opacity: 0;
}

nav:after {
    transition: opacity .3s ease-in;
    content: ' ';
    display: inline-block;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/clouds2.svg);
    background-repeat: repeat-x;
    z-index: -1;
    background-position: top left;
    animation: backgroundMove 80s linear infinite;
    pointer-events: none;
    opacity: 0;
}

.showMenu nav:before,
.showMenu nav:after {
    opacity: .8;
}

.fixed-top nav {
    box-shadow: inset 100vw 0 0 #fcfcfc, inset 0 -1px 0 rgba(var(--color-background) / 1), 0 .1rem 2rem -1.5rem rgba(0 0 0 / 1);
}

.showMenu nav {
    box-shadow: inset 0vw 0 0 #fcfcfc, inset 0 -1px 0 rgba(var(--color-background) / 0), 0 .1rem 2rem -1.5rem rgba(0 0 0 / 0);
}

#nav-space {
position: relative;
background: none;
}

nav img {
    display: block;
    max-width: calc(100vw - 10rem);
}

nav #back,
nav #menu,
nav a {
    display: inline-block;
    max-height: 64px;
    height: 7vh;
}

nav #back,
nav #menu {
    transition: all .3s ease-out;
    aspect-ratio: 1;
    position: absolute;
    top: .5rem;
    cursor: pointer;
    border-radius: 1rem;
    background: rgba(255 255 255 / 0);
}

nav #back {
    left: .5rem;
    display: none;
}

nav #menu {
    right: .5rem;
}

nav #menu:before {
    transition: all .3s ease-out;
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: .2rem;
    background: rgb(var(--color-dim-green));
    box-shadow: 0 -.6rem 0 rgb(var(--color-dim-green)), 0 .6rem 0 rgb(var(--color-dim-green));
    width: 20px;
    border-radius: .2rem;
}

nav #back:before {
    transition: all .3s ease-out;
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) translate(-.25rem,-.4rem) rotate(-45deg);
    height: .2rem;
    background: rgb(var(--color-dim-green));
    width: 20px;
    border-radius: .2rem;
}

nav #back:after {
    transition: all .3s ease-out;
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) translate(-.25rem,.4rem) rotate(45deg);
    height: .2rem;
    background: rgb(var(--color-dim-green));
    width: 20px;
    border-radius: .2rem;
}

nav #menu:hover:before {
    background: rgb(var(--color-green));
    box-shadow: 0 -.6rem 0 rgb(var(--color-green)), 0 .6rem 0 rgb(var(--color-green));
}

nav #back:hover:before,
nav #back:hover:after {
    background: rgb(var(--color-green));
}

nav #back:hover,
nav #menu:hover {
    background: rgba(255 255 255 / .8);
}

.wrap-menu {
    display: inline-block;
    width: 100%;
    max-width: 1024px;
}

#logo {
transition: all .3s ease-out;
float: left;
}

#menu-items {
display: inline-block;
float: right;
height: 64px;
line-height: 64px;
}

#menu-items a {
margin: 0 .7rem;
font-weight: 500;
}

#menu-items a: last-of-type {
margin-right: 0;
}

#menu {
display: none !important;
}

.hlcolor {
    color: rgb(var(--color-red-dark));
}

/* SMARTPHONE */

@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .wrap-menu {
        text-align: center;
    }

    #logo {
    float: initial;
    }

    #back ,
    #menu {
        display: inline-block !important;
    }

    #menu-items {
        transition: transform .3s ease-out;
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        margin: initial;
        transform: translateX(100vw) translateX(-50%) translateY(0%);
        float: none;
    }

    .showMenu #menu-items {
        transform: translateX(0vw) translateX(-50%) translateY(230%);
    }

    .showMenu #back {
        transform: translateX(-100vw);
    }

    .showMenu #menu {
        background: #fff;
        box-shadow: inset 0 0 0 2px rgba(var(--color-green) / 1);
    }

    #menu-items a {
    display: block;
    margin: .7rem .5rem !important;
    }
}