body.noScroll {
    height: 100vh;
    overflow: hidden;
}
@font-face {
    font-family: "GroteskM";
    src: url("../fonts/HalenoirCompact-Regular.otf") format("opentype");
}

.logoText {
    font-family: "GroteskM";
}

@keyframes scaleLogo {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.4);
    }
}

.text-line text {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: dash 6s infinite alternate ease-in-out both,
        filling 6s infinite alternate ease-in-out both;
    animation-delay: 0s;
}
.text-line .mRed {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: mred 6s infinite alternate ease-in-out both,
        fillingFill 6s infinite alternate ease-in-out both;
    animation-delay: 0s;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes filling {
    0% {
        stroke: #fff;
        fill: #0065b8;
        fill-opacity: 1;
        stroke-width: 1.5;
    }
    60%,
    100% {
        stroke: transparent;
        fill: #0072cf;
        fill-opacity: 1;
        stroke-width: 0.2;
    }
}

@keyframes mred {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillingFill {
    0% {
        stroke: #fff;
        fill: #a71b22;
        fill-opacity: 1;
        stroke-width: 1.5;
    }
    60%,
    100% {
        stroke: transparent;
        fill: #d3222a;
        fill-opacity: 1;
        stroke-width: 0.2;
    }
}

.flip-horizontal-bottom {
    -webkit-animation: flip-horizontal-bottom 6s ease-in-out infinite both;
    animation: flip-horizontal-bottom 6s ease-in-out infinite both;
}

@-webkit-keyframes flip-horizontal-bottom {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }
    100% {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }
}
@keyframes flip-horizontal-bottom {
    0% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }
    100% {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }
}

#mainNavLogo::after {
    content: "";
    display: block;
    height: 30px;
    width: 10px;
    transform: rotate(20deg);
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 0;
    -webkit-animation: slide-right 6s ease-in-out infinite alternate;
    animation: slide-right 6s ease-in-out infinite alternate;
}

.textShadow {
    text-shadow: 4px 2px 2px rgba(8, 0, 255, 0.1);
}
.textGlow {
    color: #ffffff;
    text-shadow: #fff 0px 0px 3px, #fff 0px 0px 15px, #2dd1ff 0px 0px 10px;
}
.titleGlow {
    text-shadow: #fff 0px 0px 2px, #eee 0px 0px 4px, #91e7fe 0px 0px 12px,
        #2dd1ff 0px 0px 14px;
}

.kenburns-top {
    -webkit-animation: kenburns-top 50s ease-out infinite alternate both;
    animation: kenburns-top 50s ease-out infinite alternate both;
}

@-webkit-keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%;
    }
    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}
@keyframes kenburns-top {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%;
    }
    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}

.kenburns-bottom-left {
    -webkit-animation: kenburns-bottom-left 25s ease-out infinite alternate both;
    animation: kenburns-bottom-left 25s ease-out infinite alternate both;
}

@-webkit-keyframes kenburns-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.1) translate(-20px, 15px);
        transform: scale(1.1) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}
@keyframes kenburns-bottom-left {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 16% 84%;
        transform-origin: 16% 84%;
    }
    100% {
        -webkit-transform: scale(1.1) translate(-20px, 15px);
        transform: scale(1.1) translate(-20px, 15px);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
}

.kenburns-bottom-right {
    -webkit-animation: kenburns-bottom-right 5s ease-in-out 1s infinite
        alternate both;
    animation: kenburns-bottom-right 5s ease-in-out 1s infinite alternate both;
}

@-webkit-keyframes kenburns-bottom-right {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 84% 84%;
        transform-origin: 84% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(20px, 15px);
        transform: scale(1.25) translate(20px, 15px);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
}
@keyframes kenburns-bottom-right {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 84% 84%;
        transform-origin: 84% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(20px, 15px);
        transform: scale(1.25) translate(20px, 15px);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
}

.kenburns-top-2 {
    -webkit-animation: kenburns-top-2 5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
        infinite alternate both;
    animation: kenburns-top-2 5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite
        alternate both;
}

@-webkit-keyframes kenburns-top-2 {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%;
    }
    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}
@keyframes kenburns-top-2 {
    0% {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        -webkit-transform-origin: 50% 16%;
        transform-origin: 50% 16%;
    }
    100% {
        -webkit-transform: scale(1.25) translateY(-15px);
        transform: scale(1.25) translateY(-15px);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}

.borderAnimate {
    --border-size: 3px;
    --border-angle: 0turn;
    width: 60vmin;
    height: 50vmin;
    background-image: conic-gradient(
            from var(--border-angle),
            #213,
            #112 50%,
            #213
        ),
        conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
    background-size: calc(100% - (var(--border-size) * 2))
            calc(100% - (var(--border-size) * 2)),
        cover;
    background-position: center center;
    background-repeat: no-repeat;

    animation: bg-spin 3s linear infinite;
    @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
    }

    &:hover {
        animation-play-state: paused;
    }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}
@keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

.textFS {
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5);
}