:root {
    --animation-time: 2s;
}

#byNova svg:not(.developedBy) {
    width: 100%;
    height: auto;
}

#byNova {
    z-index: 9999999;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

#byNova a {
    color: #fff !important;
    text-align: center;
    padding: 10px 4px 13px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

.developedBy {
    width: 150px;
    height: 100%;
    -webkit-transition: all var(--animation-time);
    transition: all var(--animation-time);
    display: inline-block;
    vertical-align: middle;
}

.footer.hovered {
    color: #fff
}

.developedBy .nova-white {
    fill: #000;
}

body.dark-only .developedBy .nova-white {
    fill: rgba(255,255,255,0.7)
}

.developedBy.hovered .nova-white {
    fill: #fff;
}

.byOverlayTop {
    position: fixed;
    top: 0;
    background: #000;
    height: 70%;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    z-index: 9999;
    display: none;
    -webkit-transition: all var(--animation-time);
    transition: all var(--animation-time)
}

.byOverlayTop.animated {
    display: block;
    -webkit-animation: overlayTop var(--animation-time) forwards;
    animation: overlayTop var(--animation-time) forwards;
}

.byOverlayTop.backwards {
    display: block;
    -webkit-animation: overlayTopReverse var(--animation-time) forwards;
    animation: overlayTopReverse var(--animation-time) forwards;
}

.byOverlayBottom.backwards {
    display: block;
    -webkit-animation: overlayBottomReverse var(--animation-time) forwards;
    animation: overlayBottomReverse var(--animation-time) forwards;
}

.byOverlayBottom {
    position: fixed;
    bottom: 0;
    background: #000;
    height: 30%;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 9999;
    overflow: hidden;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    display: none;
    -webkit-transition: all var(--animation-time);
    transition: all var(--animation-time)
}

.byOverlayBottom.animated {
    display: block;
    -webkit-animation: overlayBottom var(--animation-time) forwards;
    animation: overlayBottom var(--animation-time) forwards;
}

@-webkit-keyframes overlayTop {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: -70%;
    }

    15% {
        top: 0%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
        top: 0%;
    }
}

@keyframes overlayTop {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: -70%;
    }

    15% {
        top: 0%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
        top: 0%;
    }
}

@-webkit-keyframes overlayTopReverse {
    0% {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
        top: 0%;
    }

    15%, 100% {
        top: -70%;
    }
}

@keyframes overlayTopReverse {
    0% {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
        top: 0%;
    }

    15%, 100% {
        top: -70%;
    }
}

@-webkit-keyframes overlayBottom {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: -30%;
    }

    15% {
        bottom: 0%;
        width: 100%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        width: 100%;
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@keyframes overlayBottom {
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: -30%;
    }

    15% {
        bottom: 0%;
        width: 100%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    100% {
        width: 100%;
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@-webkit-keyframes overlayBottomReverse {
    0% {
        bottom: 0%;
        width: 100%;
    }

    15%, 100% {
        bottom: -30%;
    }
}

@keyframes overlayBottomReverse {
    0% {
        bottom: 0%;
        width: 100%;
    }

    15%, 100% {
        bottom: -30%;
    }
}

.line {
    position: absolute;
    width: 70%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0%;
    opacity: 0;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition: opacity var(--animation-time)
}

.line.animated {
    -webkit-animation: widthExpand var(--animation-time) cubic-bezier(0, 0.045, 0.355, 1) forwards;
    animation: widthExpand var(--animation-time) cubic-bezier(0, 0.045, 0.355, 1) forwards;
}

@-webkit-keyframes widthExpand {
    0%, 15% {
        opacity: 0;
        -webkit-transform: translateX(-50%) scaleX(0);
        transform: translateX(-50%) scaleX(0)
    }

    70% {
        -webkit-transform: translateX(-50%) scaleX(1);
        transform: translateX(-50%) scaleX(1)
    }

    100% {
        opacity: 1;        
    }
}

@keyframes widthExpand {
    0%, 15% {
        opacity: 0;
        -webkit-transform: translateX(-50%) scaleX(0);
        transform: translateX(-50%) scaleX(0)
    }

    70% {
        -webkit-transform: translateX(-50%) scaleX(1);
        transform: translateX(-50%) scaleX(1)
    }

    100% {
        opacity: 1;        
    }
}

.svg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40%;
}

.svg-wrapper.animated {
    -webkit-animation: nova var(--animation-time);
    animation: nova var(--animation-time);
}

@-webkit-keyframes nova {
    0%, 30% {
        top: 100%;
        width: 10%;
    }

    40% {
        top: 50%;
        width: 20%;
    }

    80%, 100% {
        width: 40%;
    }

    90% {
        width: 30%;
    }
}

@keyframes nova {
    0%, 30% {
        top: 100%;
        width: 10%;
    }

    40% {
        top: 50%;
        width: 20%;
    }

    80%, 100% {
        width: 40%;
    }

    90% {
        width: 30%;
    }
}

.svg-wrapper svg {
    padding: 10px;
}

.shape {
    stroke-linecap: round;
    -webkit-transition: all var(--animation-time);
    transition: all var(--animation-time);
}

.shape:not(.filled) {
    stroke-width: 2px;
    stroke-dashoffset: 270;
    stroke-dasharray: 270;
    fill: transparent;
    stroke: #FFFFFF;
}

.shape.letter {
    stroke-width: 0.6;
}

.shape.filled {
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
}

.shape.animated.filled {
    -webkit-animation: fill var(--animation-time) ease-in-out forwards;
    animation: fill var(--animation-time) ease-in-out forwards;
}

.shape.letter, .shape.number {
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
}

.shape.letter.animated {
    -webkit-animation: fill var(--animation-time) ease-in-out forwards;
    animation: fill var(--animation-time) ease-in-out forwards;
}

.shape.number.animated {
    -webkit-animation: fillNumber var(--animation-time) ease-in-out forwards;
    animation: fillNumber var(--animation-time) ease-in-out forwards;
}

.shape.animated {
    -webkit-animation: draw var(--animation-time) ease-in-out forwards;
    animation: draw var(--animation-time) ease-in-out forwards;
}

@-webkit-keyframes fill {
    10% {
        stroke-dashoffset: 650;
    }

    90%,100% {
        stroke-dashoffset: 1300;
    }
}

@keyframes fill {
    10% {
        stroke-dashoffset: 650;
    }

    90%,100% {
        stroke-dashoffset: 1300;
    }
}

@-webkit-keyframes fillNumber {
    10% {
        stroke-dashoffset: 650;
    }

    90%,100% {
        stroke-dashoffset: 1300;
    }
}

@keyframes fillNumber {
    10% {
        stroke-dashoffset: 650;
    }

    90%,100% {
        stroke-dashoffset: 1300;
    }
}

@-webkit-keyframes draw {
    0% {
        stroke-dashoffset: 270;
    }

    90%, 100% { 
        stroke-dashoffset: 540;
    }
}

@keyframes draw {
    0% {
        stroke-dashoffset: 270;
    }

    90%, 100% { 
        stroke-dashoffset: 540;
    }
}

@media (max-width: 1024px) {
    .nova_svg {
        display: none;
    }
}