@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
    --background-dark: #121219;
    --background: #181820;
    --background-light: #2C2C3D;
    --accent: #A793FF;
    --secondary: #FFF2B5;
}

body {
    font-family: "Quicksand", Arial, sans-serif;
    background-color: var(--background);
    text-align: center;
    color: white;
    margin: 0;
}

h2 {
    margin: 10px;
    user-select: none;
}

body.bloody * {
    animation: ImTooBloody 0.1s linear infinite;
}

body.slimey button {
    animation: KingOfMexico 0.5s linear infinite !important;
}

body.slimey {
    background: url("img/king.jpg");
    background-size: cover;
    animation: SheTooSlutty 0.1s linear infinite;
}

body.slimey * {
    font-family: serif !important;
    color: red;
}

@keyframes SheTooSlutty {
    0% {
        background-position-x: 5px;
    }

    49% {
        background-position-x: -5px;
    }

    50% {
        background-position-x: 15px;
    }

    100% {
        background-position-x: -15px;
    }
}


body.slimey * {
    opacity: 0.8 !important;
}

body.im2:not(.bloody) * {
    animation: Banger 2.8s linear;
}

body.im2:not(.bloody) {
    animation: Roc 2.8s linear;
}

body.im2 {
    background-color: black;
}

@keyframes Banger {
    from {
        filter: invert(0%);
    }

    to {
        filter: invert(100%);
    }
}

@keyframes Roc {
    from {
        background: var(--background);
    }

    to {
        background: black;
    }
}


body.im2:not(.bloody) h2 {
    color: red;
    width: 400px;
}

@keyframes ImTooBloody {
    0% {
        opacity: 0;
        filter: invert(500%);
    }

    49% {
        opacity: 0;
        filter: invert(0%);
    }

    50% {
        opacity: 1;
        filter: invert(0%);
    }

    100% {
        opacity: 1;
        filter: invert(50%);
    }
}

@keyframes KingOfMexico {
    0% {
        transform: scale(200%);
        filter: invert(500%);
    }

    100% {
        transform: scale(100%);
        filter: invert(0%);
    }
}

button {
    transition: filter 0.2s ease-out, scale 0.2s ease-out;
    font-family: "Quicksand", Arial, sans-serif;
    box-shadow: var(--background-dark) 15;
    border: var(--background) 2px solid;
    background: var(--background-light);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    padding: 10px;
}

button:hover {
    border-color: var(--accent);
    filter: brightness(150%);
    color: var(--accent);
}

button:active {
    scale: 95%;
}

.box {
    top: 50%;
    left: 50%;
    padding: 15px;
    padding-top: 0;
    position: absolute;
    width: max-content;
    border-radius: 15px;
    transform: translate(-50%, -50%);
    background: var(--background-dark);
    border: var(--background-light) 2px solid;

    transition: margin 0.05s ease-out;
}

.buttons {
    justify-content: center;
    display: flex;
    gap: 5px;
}

#player {
    background-color: var(--background-dark);
    transition: border-color 0.2s ease-out;
    transform: translate(-100%, -100%);
    border: transparent 2px solid;
    left: calc(100vw - 10px);
    top: calc(100vh - 10px);
    border-radius: 10px;
    align-items: center;
    width: max-content;
    position: absolute;
    padding: 10px;
    display: flex;
    gap: 10px;
}

#player:hover {
    border-color: var(--background-light);
}

#player.playing b {
    color: var(--secondary);
}

#img-container {
    border-radius: 5px;
    overflow: hidden;
    width: 50px;
}

#player img {
    transition: filter 0.2s ease-out;
    cursor: pointer;
    width: 100%;
}

#player img:hover {
    filter: brightness(50%);
}

#player i {
    transform: translate(-50%, -50%);
    pointer-events: none;
    position: absolute;
    left: 35px;
    top: 35px;
}

#player div { text-align: left; }

#player div p {
    color: #999;
    margin: 0;
}