::selection {
    color: #f3f3f3;
    background: blue;
}

body {
    margin: 0;
    padding: 0;
    text-decoration: none;
    background-color: #2563eb;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: #f3f3f3;
    font-family: Outfit, Gadugi;
}

.Menu_Button {
    padding-right: 2vw;
}

    .Menu_Button:hover {
        color: blue;
    }

h1 {
    margin: 0;
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    text-decoration: none;
    color: #f3f3f3;
    font-family: Outfit, Gadugi;
}

.home:hover{
    color: blue;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15vw 0 15vw;
    height: 10vh;
}


.VISUAL_ARTIST {
    margin: 10vh;
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Content {
    margin: 3vh;
    padding: 5vh;
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #f3f3f3;
    font-family: Outfit, Gadugi;
    font-size: 10px;
}




    @keyframes float {
        from, to {
            transform: translateY(-0%);
        }

        50% {
            transform: translateY(-3%);
        }
    }

    @keyframes background-pan {
        from {
            background-position: 1000% center;
        }

        to {
            background-position: 0% center;
        }
    }

    .line {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .word {
        color: white;
        font-size: clamp(2rem, 14vw, 50rem);
        font-family: Outfit, sans-serif;
        margin: 0rem;
        text-transform: uppercase;
        transition: opacity 250ms ease;
        text-align: center
    }

    #text:has(.fancy:hover) .word:not(.fancy:hover) {
        opacity: 0.2;
    }

    .fancy span {
        display: inline-block;
    }

    .fancy > .outer {
        transition: transform 350ms ease;
    }

    .fancy:hover > .outer {
        transition-duration: 800ms;
    }

        .fancy:hover > .outer > .inner {
            animation: float 5s ease infinite;
        }

            .fancy:hover > .outer > .inner > .letter {
                background: linear-gradient( to right, var(--blue), var(--green), var(--blue) );
                background-size: 1000%;
                -webkit-background-clip: text;
                -webkit-text-fill-color: blue;
                animation: background-pan 150s linear infinite;
            }

        .fancy:hover > .outer:nth-child(1) {
            transform: translate(-15%, -30%) rotate(8deg);
        }

        .fancy:hover > .outer:nth-child(2) {
            transform: translate(-15%, -20%) rotate(-6deg);
        }

        .fancy:hover > .outer:nth-child(3) {
            transform: translate(-1%, -20%) rotate(7deg);
        }

        .fancy:hover > .outer:nth-child(4) {
            transform: translate(5%, -35%) rotate(10deg);
        }

        .fancy:hover > .outer:nth-child(5) {
            transform: translate(1%, -15%) rotate(-4deg);
        }

        .fancy:hover > .outer:nth-child(6) {
            transform: translate(7%, -20%) rotate(15deg);
        }

        .fancy:hover > .outer:nth-child(8) {
            transform: translate(-0%, 0%) rotate(0deg);
        }

        .fancy:hover > .outer:nth-child(9) {
            transform: translate(-8%, 10%) rotate(-15deg);
        }

        .fancy:hover > .outer:nth-child(10) {
            transform: translate(-4%, 15%) rotate(9deg);
        }

        .fancy:hover > .outer:nth-child(11) {
            transform: translate(7%, -4%) rotate(-16deg);
        }

        .fancy:hover > .outer:nth-child(12) {
            transform: translate(4%, 5%) rotate(20deg);
        }

        .fancy:hover > .outer:nth-child(13) {
            transform: translate(-14%, 15%) rotate(-15deg);
        }

        .fancy:hover > .outer:nth-child(14) {
            transform: translate(4%, 7%) rotate(14deg);
        }