* {
    margin: 0;

}

body,
html {
    overflow: hidden;
}

body {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.wrap {
    position: relative;
    flex-grow: 999;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    max-width: 100%;
    overflow: hidden;
}


.wrap::before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    position: absolute;
    background: url('./assets/tex1.png') repeat, rgba(0, 0, 0, 0.3);
    z-index: 5;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}

svg.logo {
    position: relative;
    z-index: 6;
    width: clamp(300px, 50vw, 1200px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 0px 10px #45a5ff) brightness(.8);
    transition: 1s;
}

svg.logo>g>.printery {
    transform-box: fill-box;
    /* you need this for SVGs */
    transform-origin: center center;
    /* moved here */
}

svg.logo:hover,
svg.logo:active {
    opacity: 1;
    filter: drop-shadow(0px 0px 20px white) brightness(2);
}

svg.logo:hover>g>.printery,
svg.logo:active>g>.printery {
    animation: printeryAnimation .5s ease-in-out alternate;
    animation-iteration-count: 3;
}

svg.logo:hover>g>.printery:nth-child(2),
svg.logo:active>g>.printery:nth-child(2) {
    animation-delay: 100ms;
}

svg.logo:hover>g>.printery:nth-child(3),
svg.logo:active>g>.printery:nth-child(3) {
    animation-delay: 200ms;
}

svg.logo:hover>g>.printery:nth-child(4),
svg.logo:active>g>.printery:nth-child(4) {
    animation-delay: 300ms;
}

svg.logo:hover>g>.printery:nth-child(5),
svg.logo:active>g>.printery:nth-child(5) {
    animation-delay: 400ms;
}

svg.logo:hover>g>.printery:nth-child(6),
svg.logo:active>g>.printery:nth-child(6) {
    animation-delay: 500ms;
}

svg.logo:hover>g>.printery:nth-child(7),
svg.logo:active>g>.printery:nth-child(7) {
    animation-delay: 600ms;
}

svg.logo:hover>g>.printery:nth-child(8),
svg.logo:active>g>.printery:nth-child(8) {
    animation-delay: 700ms;
}

@keyframes printeryAnimation {
    50% {
        transform: scale(1.3);
        fill: #8f8e8e;
    }
}





/* STYLES FOR SYNAPSES*/
.cls-1 {
    fill: url(#radial-gradient-8);
}

.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11 {
    mix-blend-mode: color-dodge;
}

.cls-12 {
    opacity: .11;
}

.cls-2 {
    fill: url(#radial-gradient-11);
}

.cls-3 {
    fill: url(#radial-gradient-2);
}

.cls-13 {
    fill: #fff;
}

.cls-4 {
    fill: url(#radial-gradient-6);
}

.cls-5 {
    fill: url(#radial-gradient-3);
}

.cls-14 {
    isolation: isolate;
}

.cls-15 {
    fill: #051122;
}

.cls-16 {
    opacity: .66;
}

.cls-6 {
    fill: url(#radial-gradient);
}

.cls-7 {
    fill: url(#radial-gradient-9);
}

.cls-17 {
    mix-blend-mode: screen;
}

.cls-18 {
    mix-blend-mode: color;
}

.cls-8 {
    fill: url(#radial-gradient-5);
}

.cls-19 {
    opacity: .39;
}

.cls-9 {
    fill: url(#radial-gradient-4);
}

.cls-10 {
    fill: url(#radial-gradient-7);
}

.cls-11 {
    fill: url(#radial-gradient-10);
}

.cls-20 {
    opacity: .58;
}

.cls-21 {
    fill: url(#linear-gradient);
}

.cls-22 {
    opacity: .99;
}

.cls-23 {
    fill: #d1d3d4;
}

g>path.animate,
g>path.animate2 {
    stroke-linecap: round;
    stroke-width: .2;
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
    stroke-linejoin: round;
    animation: spinPath 10s alternate infinite linear;
}

g>path.animate2 {
    animation: spinPath 6s infinite linear;
    animation-delay: 3s;
}

@keyframes spinPath {
    0% {
        stroke-dashoffset: 240;
        stroke: #010527
    }

    10% {
        stroke: #080e42;
    }

    37.5% {
        stroke: #0a0d8d;
    }

    67.5% {
        stroke: #2000ad;
    }

    90% {
        stroke: #200877
    }

    100% {
        stroke-dashoffset: 0;
        stroke: #2230ac;
    }
}

/*END OF STYLES FOR SYNAPSES*/

footer {
    position: absolute;
    text-align: center;
    font-size: clamp(10px, 3vw, 36px);
    width: 100vw;
    height: 5vh;
    line-height: 5vh;
    left: 100vw;
    bottom: 0;
    color: white;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 1s;
}

a:link,
a:visited {
    text-decoration: none;
    color: white;
}

.passion-one-regular {
    font-family: "Passion One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.passion-one-bold {
    font-family: "Passion One", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.passion-one-black {
    font-family: "Passion One", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.showFooterBar {
    left: 0;
}