:root {
    --gay-erasure: 1
}

@font-face {
    font-display: swap;
    font-family: 'RubikBold';
    font-style: bold;
    font-weight: 600;
    src: url('./fonts/rubik-v28-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
}

body {
    background-color: rgb(20, 20, 60);
    /* background: linear-gradient(145deg, rgb(30, 30, 80), rgb(0, 0, 0)); */

    padding: 5px calc(5px + 5%);

    color: white;
    text-align: center;
    font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif;
}

html {
    min-height: 100%;
}

h1 {
    font-size: 3rem;
}

p {
    font-size: 1.2rem;
}

#yaoiButton {
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, var(--gay-erasure)) 0%,
        rgba(255, 154, 0, var(--gay-erasure)) 10%,
        rgba(208, 222, 33, var(--gay-erasure)) 20%,
        rgba(79, 220, 74, var(--gay-erasure)) 30%,
        rgba(63, 218, 216, var(--gay-erasure)) 40%,
        rgba(47, 201, 226, var(--gay-erasure)) 50%,
        rgba(28, 127, 238, var(--gay-erasure)) 60%,
        rgba(95, 21, 242, var(--gay-erasure)) 70%,
        rgba(186, 12, 248, var(--gay-erasure)) 80%,
        rgba(251, 7, 217, var(--gay-erasure)) 90%,
        rgba(255, 0, 0, var(--gay-erasure)) 100%
    );
    background-size: 300px auto;
    background-position-x: 0px;
    /* border: 2px white solid;
    padding: 10px; */
    display: inline-block;
    -webkit-text-stroke: white 3px;
    font-size: 5rem;
    animation-name: slidebg;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    font-weight: bold;

    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#yaoiButton:hover {
    transform: scale(1.1);
}

#yaoiButton > div {
    display: inline-block;

    animation-name: float;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-fill-mode: both;
}

#yaoiButton > div:nth-child(2) {
    animation-delay: 0.25s;
}

#yaoiButton > div:nth-child(3) {
    animation-delay: 0.5s;
}

#yaoiButton > div:nth-child(4) {
    animation-delay: 0.75s;
}

.post {
    background-color: black;
    border: 2px gray solid;
    text-align: left;
    padding: 5px 16px;
    width: 600px;
    margin: auto;
}

img {
    width: 100%;
    border-radius: 16px;
    margin: 16px auto;
    object-fit: cover;
}

@keyframes float {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
    }
}

@keyframes slidebg {
    from {
        background-position-x: 0px;
    }

    to {
        background-position-x: 300px;
    }
}