@import url("bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Poppins&family=Roboto:ital,wght@0,100;0,300;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;1,200;1,300&display=swap');
body {
    color: rgb(255, 255, 255);
    background: #111;
    font-family: sans-serif;
    overflow: hidden;
}

h1,
h2 {
    margin: 0;
}

a {
    color: #ccc;
}

section {
    padding: 20px;
}

.hero {
    font-size: clamp(40px, 10vw, 100px);
    line-height: 1;
    display: inline-block;
    color: #fff;
    z-index: 2;
    letter-spacing: 7px;
    filter: drop-shadow(0 1px 3px);
}

.demo {
    height: 100px;
    background: #fff;
}

.layers {
    position: relative;
}

.layers::before,
.layers::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
}

.layers::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
}

.layers::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
}

.single-path {
    clip-path: polygon( 0% 12%, 53% 12%, 53% 26%, 25% 26%, 25% 86%, 31% 86%, 31% 0%, 53% 0%, 53% 84%, 92% 84%, 92% 82%, 70% 82%, 70% 29%, 78% 29%, 78% 65%, 69% 65%, 69% 66%, 77% 66%, 77% 45%, 85% 45%, 85% 26%, 97% 26%, 97% 28%, 84% 28%, 84% 34%, 54% 34%, 54% 89%, 30% 89%, 30% 58%, 83% 58%, 83% 5%, 68% 5%, 68% 36%, 62% 36%, 62% 1%, 12% 1%, 12% 34%, 60% 34%, 60% 57%, 98% 57%, 98% 83%, 1% 83%, 1% 53%, 91% 53%, 91% 84%, 8% 84%, 8% 83%, 4% 83%);
}

.paths {
    animation: paths 5s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon( 0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
    }
    5% {
        clip-path: polygon( 0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
    }
    30% {
        clip-path: polygon( 0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
    }
    45% {
        clip-path: polygon( 0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
    }
    76% {
        clip-path: polygon( 0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
    }
    90% {
        clip-path: polygon( 0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
    }
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
        clip-path: none;
    }
}

.movement {
    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
    position: relative;
    animation: movement 8s step-end infinite;
}

@keyframes movement {
    0% {
        top: 0px;
        left: -20px;
    }
    15% {
        top: 10px;
        left: 10px;
    }
    60% {
        top: 5px;
        left: -10px;
    }
    75% {
        top: -5px;
        left: 20px;
    }
    100% {
        top: 10px;
        left: 5px;
    }
}

.opacity {
    animation: opacity 5s step-end infinite;
}

@keyframes opacity {
    0% {
        opacity: 0.1;
    }
    5% {
        opacity: 0.7;
    }
    30% {
        opacity: 0.4;
    }
    45% {
        opacity: 0.6;
    }
    76% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.8;
    }
    1%,
    7%,
    33%,
    47%,
    78%,
    93% {
        opacity: 0;
    }
}

.font {
    animation: font 7s step-end infinite;
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }
    20% {
        font-weight: 500;
        color: #fff;
        filter: blur(0);
    }
    50% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }
    60% {
        font-weight: 700;
        color: #fff;
        filter: blur(0);
    }
    90% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
}

.glitch span {
    animation: paths 5s step-end infinite;
}

.glitch::before {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
    position: relative;
    padding: 200px 0;
    text-align: center;
}

.environment {
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: unset;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
    animation: bgeffect 5000ms infinite;
    opacity: 0.5;
    background: url(https://i1.sndcdn.com/avatars-Ot0oCnYSIqpX1k3N-Ucp6BA-t1080x1080.jpg) center no-repeat;
    background-size: cover;
}

.socials {
    position: relative;
    text-align: center;
    top: -230px;
}

.socials::after {
    z-index: -1;
}

#text {
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    text-shadow: 0px 2px 4px white
}


/* ikonok */

.container {
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 200ms;
}

.icon {
    padding: 20px;
    animation: icon3d 200ms 2;
    transition: 200ms;
    color: #fff;
}

.icon:hover {
    animation: icon3d 300ms infinite;
    transition: 200ms;
}

@keyframes icon3d {
    0% {
        text-shadow: 2px 1px 3px #e0287d, -3px -4px 3px #1bc7fb;
    }
    25% {
        text-shadow: -2px -3px 3px #e0287d, 3px 2px 3px #1bc7fb;
    }
    50% {
        text-shadow: 2px -1px 3px #e0287d, -5px 2px 3px #1bc7fb;
    }
    75% {
        text-shadow: -4px -2px 3px #e0287d, -2px -1px 3px #1bc7fb;
    }
    100% {
        text-shadow: -2px 0 3px #e0287d, 2px -2px 3px #1bc7fb;
    }
}

@keyframes bgeffect {
    0% {
        filter: blur(5px);
    }
    50% {
        filter: blur(8px);
    }
    100% {
        filter: blur(5px);
    }
}

#dctext {
    position: relative;
    width: 100px;
    height: 50px;
    margin-right: 10px;
}


/* Child Text Container */

#dctext span {
    position: absolute;
    bottom: -43px;
    right: -13px;
    background: rgba(0, 0, 0, 0.411);
    color: white;
    margin-top: 2px;
    font-family: sans-serif;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.2s linear;
    transition: visibility 0s, opacity 0.2s linear;
}


/* Hover on Parent Container */

#dctext:hover {
    cursor: pointer;
}

#dctext:hover span {
    width: 100px;
    padding: 6px 16px;
    visibility: visible;
    opacity: 1;
    border-radius: 4px;
    padding-top: 8px;
    padding-right: -8px;
    padding-left: 10px;
}

#dctext:active span {
    width: 100px;
    padding: 6px 16px;
    visibility: visible;
    opacity: 1;
    border-radius: 4px;
    padding-top: 8px;
    padding-right: -8px;
    padding-left: 10px;
}

span {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-shadow: 0px 0px 2px white;
}

#glitchtext {
    font-family: 'Josefin Sans', sans-serif;
}

@keyframes icon3dver2 {
    0% {
        text-shadow: 1px 0px 1px #e0287d, -2px -3px 1px #1bc7fb;
    }
    25% {
        text-shadow: -1px -2px 1px #e0287d, 2px 1px 1px #1bc7fb;
    }
    50% {
        text-shadow: 1px 0px 1px #e0287d, -3px 1px 1px #1bc7fb;
    }
    75% {
        text-shadow: -3px -1px 1px #e0287d, -1px -0px 1px #1bc7fb;
    }
    100% {
        text-shadow: -1px -1 1px #e0287d, 1px -1px 1px #1bc7fb;
    }
}

.hitcount {
    position: relative;
    text-align: center;
    z-index: 1;
    text-shadow: 0px 0px 2px white;
    font-family: 'Josefin Sans', sans-serif;
}

.hitcount::after {
    z-index: -2;
    color: white;
    opacity: 1;
    text-shadow: 0px 0px 2px white;
    font-family: 'Josefin Sans', sans-serif;
}

#visits {
    position: relative;
    text-align: center;
    z-index: 1;
    text-shadow: 0px 0px 2px white;
    font-family: 'Josefin Sans', sans-serif;
    animation: icon3dver2 200ms infinite;
    transition: 200ms;
    color: #fff;
}

#visits::after {
    z-index: -2;
    color: white;
    opacity: 1;
    text-shadow: 0px 0px 2px white;
    font-family: 'Josefin Sans', sans-serif;
}

#mircso {
    width: 20px;
    position: relative;
    top: -14px;
    left: -42px;
}