@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: block;
    background: #000;
    min-height: 100vh;
}

/* Menu */
.neon-menu {
    width: 100%;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    animation: fadeDown 1.5s ease forwards;
}

.neon-menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.neon-menu a {
    text-decoration: none;
    font-size: 1.2em;
    color: #c19bf5;
    text-shadow: 0 0 10px #8338ec, 0 0 20px #8338ec;
    position: relative;
    transition: 0.3s;
}

.neon-menu a:hover {
    color: #fff;
    text-shadow: 0 0 15px #c19bf5, 0 0 25px #c19bf5;
    transform: scale(1.15);
}

/* Navbar animation */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    margin-top: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    position: relative;
}

.content h2 {
    color: #fff;
    font-size: 8em;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.content h2:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #8338ec;
}

.content h2:nth-child(2) {
    color: #c19bf5;
    animation: animate 4s ease-in-out infinite;
}
/* Espace entre le titre et le bouton */
.yt-wrapper {
    margin-top: 120px;
    display: flex;
    justify-content: center;
}

/* Style du bouton YouTube */
.yt-button {
    padding: 15px 40px;
    font-size: 1.4em;
    color: #fff;
    background: #ff0000;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    /* Effet néon */
    box-shadow: 0 0 10px #ff0000,
                0 0 20px #ff3b3b,
                0 0 30px #ff3b3b;

    transition: 0.3s;
}

/* Hover */
.yt-button:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px #ff3b3b,
                0 0 30px #ff3b3b,
                0 0 45px #ff0000;
}



/* Original animation */
@keyframes animate {
    0%,
    100% {
        clip-path: polygon(
            0% 45%,
            16% 44%,
            33% 50%,
            54% 60%,
            70% 61%,
            84% 59%,
            100% 52%,
            100% 100%,
            0% 100%
        );
    }

    50% {
        clip-path: polygon(
            0% 60%,
            15% 65%,
            34% 66%,
            51% 62%,
            67% 50%,
            84% 45%,
            100% 46%,
            100% 100%,
            0% 100%
        );
    }
}