:root {
    --bg-yellow: #fcf434;
    /* --bg-yellow: #ffef41; */
    --light-yellow: #fff374;
    --lighter-yellow: #fff9b1;

    --black: #000000;
    --purple: #9C59D1;
    --white: #ffffff;

    --lesbian-palette1: #d52d00;
    --lesbian-palette2: #ef7627;
    --lesbian-palette3: #ff9a56;
    --lesbian-palette4: #ffffff;
    --lesbian-palette5: #d162A4;
    --lesbian-palette6: #b55690;
    --lesbian-palette7: #a30262;

    --vermell-catalunya: #da121A;
    --blau-catalunya: #0f47af;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: "Comic Neue", "Comic Sans MS", cursive;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-yellow);
    overflow-x: hidden;
}

header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 25pt 15pt 15pt 15pt;
}

h1 {
    display: inline-block;
    text-align: center;
    padding: 5pt 10pt 5pt 10pt;
    margin: 0;
    border-radius: 999px;
    border: solid 2px var(--light-yellow);
    text-decoration: none;
    text-transform: none;
    cursor: context-menu;
    color: var(--black);
    box-shadow: 0 0 10px var(--black);
    animation: breathe 5s ease-in-out infinite;
}

.yellow-gradient {
    background: linear-gradient(90deg, var(--light-yellow), var(--bg-yellow), var(--light-yellow));
}

h1:active {
    animation: none;
    transform: scale(0.95) rotate(1deg);
}

h1:hover {
    animation: none;
    transform: scale(1.2) rotate(1deg);
    font-family: inherit;
}

.button-row {
    display: flex;
    /* background: white; */
    padding: 10pt 20pt 10pt 20pt;
    margin-top: 20px;
    justify-content: space-evenly;
    gap: 15px;
}

button,
.button {
    font-family: inherit;
    display: inline-block;
    padding: 5pt 10pt 5pt 10pt;
    border-radius: 999px;
    box-shadow: 0 0 10px var(--black);
    border: solid 2px var(--light-yellow);
    z-index: 1;
    background: var(--bg-yellow);
    animation: breathe 3s ease-in-out infinite;
}

.button:nth-of-type(1) {
    animation-delay: 0s;
}

.button:nth-of-type(2) {
    animation-delay: 0.6s;
}

.button:nth-of-type(3) {
    animation-delay: 1.2s;
}


.lesbian-button:hover {
    cursor: pointer;
    animation: spin 1s;
    box-shadow: 0 5px 20px var(--black);
    transform: scale(1.2);
    background:
        linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4)),
        linear-gradient(180deg,
            var(--lesbian-palette1) 0%, var(--lesbian-palette1) 14.285%,
            var(--lesbian-palette2) 14.285%, var(--lesbian-palette2) 28.57%,
            var(--lesbian-palette3) 28.57%, var(--lesbian-palette3) 42.855%,
            var(--lesbian-palette4) 42.855%, var(--lesbian-palette4) 57.14%,
            var(--lesbian-palette5) 57.14%, var(--lesbian-palette5) 71.425%,
            var(--lesbian-palette6) 71.425%, var(--lesbian-palette6) 85.71%,
            var(--lesbian-palette7) 85.71%, var(--lesbian-palette7) 100%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1.2);
    }

}

@keyframes breathe {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    margin: 18px 0;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

.trippy-lesbian {
    animation:
        floaty 6s ease-in-out infinite,
        lesbian-shadow-gradient 6s ease-in-out infinite;
}

@keyframes lesbian-shadow-gradient {
    0% {
        text-shadow:
            -2px -4px 1px color-mix(in srgb, var(--lesbian-palette4) 30%, transparent),
            2px 4px 1px color-mix(in srgb, var(--lesbian-palette7) 30%, transparent);
    }

    25% {
        text-shadow:
            -2px -4px 1px color-mix(in srgb, var(--lesbian-palette3) 30%, transparent),
            2px 4px 1px color-mix(in srgb, var(--lesbian-palette6) 30%, transparent);
    }

    50% {
        text-shadow:
            -2px -4px 1px color-mix(in srgb, var(--lesbian-palette2) 30%, transparent),
            2px 4px 1px color-mix(in srgb, var(--lesbian-palette5) 30%, transparent);
    }

    75% {
        text-shadow:
            -2px -4px 1px color-mix(in srgb, var(--lesbian-palette1) 30%, transparent),
            2px 4px 1px color-mix(in srgb, var(--lesbian-palette4) 30%, transparent);
    }

    100% {
        text-shadow:
            -2px -4px 1px color-mix(in srgb, var(--lesbian-palette4) 30%, transparent),
            2px 4px 1px color-mix(in srgb, var(--lesbian-palette7) 30%, transparent);
    }
}

@keyframes floaty {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(-0.6deg);
    }

    50% {
        transform: translateY(2px) rotate(0.4deg);
    }

    75% {
        transform: translateY(-3px) rotate(-0.2deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Slight phase offset for each paragraph*/
.trippy-lesbian:nth-of-type(1) {
    animation-delay: 0s;
}

.trippy-lesbian:nth-of-type(2) {
    animation-delay: 0.6s;
}

.trippy-lesbian:nth-of-type(3) {
    animation-delay: 1.2s;
}

main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 140px);
    padding: 36px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    box-sizing: border-box;
    /* background: black; */
}

.container {
    background: var(--bg-yellow);
    box-shadow: 0 0 10px var(--black);
    border: solid 2px var(--light-yellow);
    border-radius: 20px;
    padding: 20px 30px 20px 30px;
    z-index: 2;
}

footer {
    position: relative;
    bottom: 10px;
    font-size: 14px;
    left: 0;
    white-space: nowrap;
    animation: news-slide 10s linear infinite;
}

@keyframes news-slide {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes background-horizontal-slide {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}