body {
    height: 100vh;
    margin: 0;
    background:
            linear-gradient(to left,
            #e51050 0%,
            #ba0c41 25%,
            #0f1928 50%,
            #29b1bc 75%,
            #34e7f5 100%);
    background-blend-mode: lighten;
    font-family: "Dongle", sans-serif;


}
.wdxl-lubrifont-sc-regular {
    font-family: "WDXL Lubrifont SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.dongle-regular {
    font-family: "Dongle", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.dongle-bold {
    font-family: "Dongle", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
h1.glitch {
    color: white;
    font-family: "WDXL Lubrifont SC", sans-serif;
    font-weight: 800;
    position: relative;
    font-size: 72px;
    padding: 20px;
    background-color: rgba(15, 25, 40, 0.4);
    border-radius: 20px;
}
.wrapper h1.glitch::before, .wrapper h1.glitch::after {
    padding: 20px;
    color: white;
    content: "2025";
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
}
.wrapper h1.glitch::before {
    left: 3px;
    text-shadow: -5px 0 #e51050;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.wrapper h1.glitch::after {
    left: -3px;
    text-shadow: 5px 0 #34e7f5;
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes glitch-animation-1 {
    0% {
        clip: rect(88px, 350px, 27px, 30px);
    }
    5% {
        clip: rect(55px, 350px, 40px, 30px);
    }
    10% {
        clip: rect(32px, 350px, 28px, 30px);
    }
    15% {
        clip: rect(150px, 350px, 38px, 30px);
    }
    20% {
        clip: rect(111px, 350px, 41px, 30px);
    }
    25% {
        clip: rect(99px, 350px, 62px, 30px);
    }
    30% {
        clip: rect(39px, 350px, 58px, 30px);
    }
    35% {
        clip: rect(77px, 350px, 146px, 30px);
    }
    40% {
        clip: rect(147px, 350px, 23px, 30px);
    }
    45% {
        clip: rect(145px, 350px, 116px, 30px);
    }
    50% {
        clip: rect(142px, 350px, 46px, 30px);
    }
    55% {
        clip: rect(92px, 350px, 43px, 30px);
    }
    60% {
        clip: rect(120px, 350px, 64px, 30px);
    }
    65% {
        clip: rect(94px, 350px, 21px, 30px);
    }
    70% {
        clip: rect(24px, 350px, 36px, 30px);
    }
    75% {
        clip: rect(37px, 350px, 9px, 30px);
    }
    80% {
        clip: rect(97px, 350px, 103px, 30px);
    }
    85% {
        clip: rect(54px, 350px, 89px, 30px);
    }
    90% {
        clip: rect(83px, 350px, 101px, 30px);
    }
    95% {
        clip: rect(91px, 350px, 138px, 30px);
    }
    100% {
        clip: rect(35px, 350px, 93px, 30px);
    }
}
@keyframes glitch-animation-2 {
    0% {
        clip: rect(20px, 350px, 132px, 30px);
    }
    5% {
        clip: rect(78px, 350px, 96px, 30px);
    }
    10% {
        clip: rect(144px, 350px, 124px, 30px);
    }
    15% {
        clip: rect(125px, 350px, 87px, 30px);
    }
    20% {
        clip: rect(65px, 350px, 11px, 30px);
    }
    25% {
        clip: rect(150px, 350px, 125px, 30px);
    }
    30% {
        clip: rect(10px, 350px, 49px, 30px);
    }
    35% {
        clip: rect(121px, 350px, 79px, 30px);
    }
    40% {
        clip: rect(128px, 350px, 14px, 30px);
    }
    45% {
        clip: rect(44px, 350px, 54px, 30px);
    }
    50% {
        clip: rect(145px, 350px, 110px, 30px);
    }
    55% {
        clip: rect(56px, 350px, 76px, 30px);
    }
    60% {
        clip: rect(121px, 350px, 112px, 30px);
    }
    65% {
        clip: rect(43px, 350px, 104px, 30px);
    }
    70% {
        clip: rect(5px, 350px, 10px, 30px);
    }
    75% {
        clip: rect(48px, 350px, 137px, 30px);
    }
    80% {
        clip: rect(81px, 350px, 66px, 30px);
    }
    85% {
        clip: rect(65px, 350px, 73px, 30px);
    }
    90% {
        clip: rect(114px, 350px, 44px, 30px);
    }
    95% {
        clip: rect(96px, 350px, 63px, 30px);
    }
    100% {
        clip: rect(63px, 350px, 2px, 30px);
    }
}

@media (max-width: 750px) {
    .logo {
        width: 500px;
    }
}

@media (max-width: 510px) {
    .logo {
        width: 400px;
    }
}