@import url("valid.css");
@font-face {
    font-family: Fractul-Regular;
    src: url(Fonts/Fractul-Regular.otf);
}
@media(min-width:860px){
    body{letter-spacing:1px;}
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--Colorlite);
    font-family:  Fractul-Regular;
}
input{
    font-family:Fractul-Regular;
}
.navigation {
    width: 100%;
    /* height: 6.2vh; */
    height: 48px;
    background-color: var(--ColorDark);
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    font-size: 24px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.navigation * {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation nav {
    height: 100%;
}

.navigation nav ul {
    height: 100%;
    width: fit-content;
    height: 100%;
    margin: 0;
}

.navigation nav ul li {
    height: 100%;
}

.navigation a {
    color: var(--Colorlite);
    padding: 0 16px;
    height: 100%;
    text-decoration: none;
}

@media (min-width:860px) {
    .SelectNav,
    .navigation li:hover {
        background-color: var(--Colorlite);
        position: relative;
    }
    .SelectNav a {
        font-weight: 500;
    }
    .SelectNav a,
    .navigation a:hover {
        color: var(--ColorDark);
    }
    .SelectNav a::after,
    .navigation a:hover::after {
        width: 100%;
        height: 3px;
        content: "";
        display: inline-block;
        background-color: var(--ColorDark);
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

.snapyNav {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 100 !important;
}

.headerMenu {
    display: none !important;
}

@media(max-width:860px) {
    .navigation input {
        display: none !important;
    }
    label {
        /* display: flex; */
        display: inline-block;
        cursor: pointer;
        position: relative;
        width: 25px;
        height: 25px;
        overflow: hidden;
        margin-right: 32px;
    }
    svg {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
    }
    path {
        fill: none;
        stroke: var(--Colorlite);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        --length: 24;
        --offset: -38;
        stroke-dasharray: var(--length) var(--total-length);
        stroke-dashoffset: var(--offset);
        transition: transform 1s ease-in-out 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    circle {
        fill: #fff 3;
        opacity: 0;
    }
    .bergerHolder input:checked+svg .Line1,
    .bergerHolder input:checked+svg .Line3 {
        /* --length: 22.627416998; */
    }
    .bergerHolder input:checked+svg .Line2 {
        --length: 0;
    }
    .bergerHolder .Line1,
    .bergerHolder .Line3 {
        --total-length: 111.2281341553;
        --offset: -50.2281341553;
    }
    .bergerHolder .Line2 {
        --total-length: 99;
    }
    .bergerHolder input:checked+svg path {
        transform: translateX(30px);
    }
    .bergerHolder input:checked+svg .Line1,
    .bergerHolder input:checked+svg .Line3 {
        --offset: -16.9705627485;
    }
    .bergerHolder input:checked+svg .Line2 {
        --offset: -20;
    }
     ::-webkit-scrollbar {
        display: none;
    }
    .navigation * {
        display: unset;
    }
    .navigation {
        width: 100vw !important;
        height: 48px;
        display: unset;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-transform: capitalize;
        /* overflow: hidden ; */
        position: fixed !important;
    }
    .navigation>nav {
        width: 0;
        height: 100vh;
        transition:  .7s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: var(--ColorDark);
        overflow: hidden;
        display: inline-block;
        padding: 0;
        position: absolute;
        top: 48px;
        left: 0;
        z-index: 10;
    }
    .headerMenu {
        box-sizing: border-box;
        width: calc(100% - 24px);
        height: 48px;
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
        color: var(--Colorlite) !important;
        font-weight: bold;
        padding: 0 24px;
        padding-right: 0;
    }
    #berger {
        width: 25px;
        height: 25px;
        margin-right: 32px;
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        outline: none;
    }
    #berger>div {
        width: 25px;
        height: 3px;
        background-color: var(--Colorlite);
        margin: 3px 0;
        display: block;
        position: relative;
        transition: transform 1s ease-out;
        transform-origin: center;
    }
    #berger>div:nth-child(2)::after {
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
        background-color: var(--Colorlite);
        display: inline-block;
        top: 0;
        left: 0;
        transform: rotate(-180deg);
        transition: 1s;
    }
    #berger.opn div:nth-child(2) {
        transform: rotate(-45deg);
    }
    #berger.opn div:nth-child(2)::after {
        transform: rotate(-90deg);
    }
    #berger.opn>div:not(:nth-child(2)) {
        transform: scaleX(0);
    }
    .navigation>#Nav.open {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0;
    }
    .navigation nav ul {
        width: 100%;
        padding: 0;
        display: unset;
    }
    .navigation nav ul li {
        display: block;
        height: fit-content;
        height: -moz-fit-content;
        padding: 16px 0;
        padding-left: 64px;
        box-sizing: content-box !important;
        overflow: hidden;
    }
    .navigation nav ul li a {
        font-size: 37px;
        font-weight: bold;
        display: block;
        transition: .4s ease-out;
        transform: translateY(150%);
    }
    .navigation nav ul li:nth-child(1) {
        margin-top: 24px;
    }
    .SelectNav {
        background: none;
    }
    .SelectNav a {
        color: var(--Colorlite);
    }
    /* nav.open{
        z-index: ;
    } */
    .navigation nav.open ul li a {
        transition-delay: .6s;
        transform: translateY(0%);
    }
    /* @keyframes up {
        from{
            transform: translateY(100%);
        }
        to{
            transform: translateY(0%);
        }
    } */
}