@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap');

body {
    font-family: 'JetBrains Mono', system-ui;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #eee;
    font-size: 0.875rem;
    cursor: url("data:image/svg+xml,%3Csvg height='6' width='6' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%23eee' r='4'/%3E%3C/svg%3E") 3 3, auto;
    background-color: #000000;
    display: table-cell;
    vertical-align: middle;
}

html,
body {
    height: 100%;
}

.social {
    display: contents;
    list-style: none;
}

.social .icon {
    position: relative;
    background: rgb(34 255 206 / 77%);
    color: #ffffff;
    border-radius: 20%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 0.95px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social .discord:hover,
.social .discord:hover,
.social .discord:hover {
    background: #9b18f2;
    color: #ffffff;
}

.social .github:hover,
.social .github:hover,
.social .github:hover {
    background: #00b7ff;
    color: #ffffff;
}

.social .youtube:hover,
.social .youtube:hover,
.social .youtube:hover {
    background: #ff0000;
    color: #ffffff;
}

html {
    display: table;
    margin: auto;
}

.Github-Stats {
    margin: 10;
    text-align: center;
    align-content: center;
    font-size: 15px;
    line-height: 1.5rem;
    color: #ffffff;
}

@-webkit-keyframes buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@keyframes buzz {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

.buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz:hover,
.buzz:focus,
.buzz:active {
    -webkit-animation-name: buzz;
    animation-name: buzz;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

.bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bob:hover,
.bob:focus,
.bob:active {
    -webkit-animation-name: bob-float, bob;
    animation-name: bob-float, bob;
    -webkit-animation-duration: .2s, 1.3s;
    animation-duration: .2s, 1.3s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .2s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

.logo {
    margin: auto;
    width: 200px;
    border-radius: 100%;
    -webkit-animation-name: bob-float, bob;
    animation-name: bob-float, bob;
    -webkit-animation-duration: .2s, 1.3s;
    animation-duration: .2s, 1.3s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .2s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

::-webkit-scrollbar {
    width: 0;
}

.glitch {
    position: relative;
    color: white;
    font-size: 3.5em;
    left: 3%;
    letter-spacing: 0.25em;
    animation: glitch-skew 2s infinite linear alternate-reverse;
}

.glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-shadow: -2px 0 #ffae00;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 6s infinite linear alternate-reverse;
}

.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-shadow: -2px 0 #00fff9, 2px 2px #ffae00;
    animation: glitch-anim2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(6px, 9999px, 38px, 0);
        transform: skew(0.64deg);
    }

    5% {
        clip: rect(60px, 9999px, 94px, 0);
        transform: skew(0.24deg);
    }

    10% {
        clip: rect(75px, 9999px, 76px, 0);
        transform: skew(0.58deg);
    }

    15% {
        clip: rect(16px, 9999px, 29px, 0);
        transform: skew(0.59deg);
    }

    20% {
        clip: rect(41px, 9999px, 32px, 0);
        transform: skew(0.15deg);
    }

    25% {
        clip: rect(16px, 9999px, 80px, 0);
        transform: skew(0.62deg);
    }

    30% {
        clip: rect(20px, 9999px, 33px, 0);
        transform: skew(0.65deg);
    }

    35% {
        clip: rect(57px, 9999px, 52px, 0);
        transform: skew(0.06deg);
    }

    40% {
        clip: rect(27px, 9999px, 17px, 0);
        transform: skew(0.87deg);
    }

    45% {
        clip: rect(43px, 9999px, 84px, 0);
        transform: skew(0.07deg);
    }

    50% {
        clip: rect(45px, 9999px, 45px, 0);
        transform: skew(0.82deg);
    }

    55% {
        clip: rect(94px, 9999px, 91px, 0);
        transform: skew(0.85deg);
    }

    60% {
        clip: rect(81px, 9999px, 76px, 0);
        transform: skew(0.39deg);
    }

    65% {
        clip: rect(34px, 9999px, 74px, 0);
        transform: skew(0.09deg);
    }

    70% {
        clip: rect(31px, 9999px, 1px, 0);
        transform: skew(0.16deg);
    }

    75% {
        clip: rect(45px, 9999px, 43px, 0);
        transform: skew(0.22deg);
    }

    80% {
        clip: rect(2px, 9999px, 74px, 0);
        transform: skew(0.51deg);
    }

    85% {
        clip: rect(78px, 9999px, 99px, 0);
        transform: skew(0.04deg);
    }

    90% {
        clip: rect(1px, 9999px, 29px, 0);
        transform: skew(0.92deg);
    }

    95% {
        clip: rect(18px, 9999px, 7px, 0);
        transform: skew(0.93deg);
    }

    100% {
        clip: rect(97px, 9999px, 72px, 0);
        transform: skew(0.69deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(28px, 9999px, 33px, 0);
        transform: skew(0.19deg);
    }

    5% {
        clip: rect(86px, 9999px, 43px, 0);
        transform: skew(0.04deg);
    }

    10% {
        clip: rect(60px, 9999px, 11px, 0);
        transform: skew(0.37deg);
    }

    15% {
        clip: rect(55px, 9999px, 2px, 0);
        transform: skew(0.7deg);
    }

    20% {
        clip: rect(53px, 9999px, 21px, 0);
        transform: skew(0.5deg);
    }

    25% {
        clip: rect(68px, 9999px, 76px, 0);
        transform: skew(0.82deg);
    }

    30% {
        clip: rect(44px, 9999px, 12px, 0);
        transform: skew(1deg);
    }

    35% {
        clip: rect(74px, 9999px, 76px, 0);
        transform: skew(0.05deg);
    }

    40% {
        clip: rect(9px, 9999px, 93px, 0);
        transform: skew(0.64deg);
    }

    45% {
        clip: rect(95px, 9999px, 66px, 0);
        transform: skew(0.09deg);
    }

    50% {
        clip: rect(46px, 9999px, 82px, 0);
        transform: skew(0.74deg);
    }

    55% {
        clip: rect(11px, 9999px, 25px, 0);
        transform: skew(0.01deg);
    }

    60% {
        clip: rect(53px, 9999px, 97px, 0);
        transform: skew(0.81deg);
    }

    65% {
        clip: rect(82px, 9999px, 72px, 0);
        transform: skew(0.6deg);
    }

    70% {
        clip: rect(59px, 9999px, 23px, 0);
        transform: skew(0.34deg);
    }

    75% {
        clip: rect(53px, 9999px, 73px, 0);
        transform: skew(0.64deg);
    }

    80% {
        clip: rect(6px, 9999px, 45px, 0);
        transform: skew(0.02deg);
    }

    85% {
        clip: rect(69px, 9999px, 29px, 0);
        transform: skew(0.69deg);
    }

    90% {
        clip: rect(63px, 9999px, 7px, 0);
        transform: skew(0.25deg);
    }

    95% {
        clip: rect(1px, 9999px, 94px, 0);
        transform: skew(0.02deg);
    }

    100% {
        clip: rect(3px, 9999px, 1px, 0);
        transform: skew(0.73deg);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    10% {
        transform: skew(4deg);
    }

    20% {
        transform: skew(5deg);
    }

    30% {
        transform: skew(0deg);
    }

    40% {
        transform: skew(3deg);
    }

    50% {
        transform: skew(1deg);
    }

    60% {
        transform: skew(-4deg);
    }

    70% {
        transform: skew(0deg);
    }

    80% {
        transform: skew(-3deg);
    }

    90% {
        transform: skew(0deg);
    }

    100% {
        transform: skew(4deg);
    }
}