:root {
    --border-radius: 25px;
    --inner-border-radius: 15px;
    --border-chonk: 10px;
    --outline-chonk: 2px;
    --extra-chonk: 34px;

    --bg-dim: 0.2;
}

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background-color: black;
}

.background {
    position: fixed;
    background-image: url("sick-background.png");
    background-size: cover;
    background-position: center;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    filter: blur(4px);
    opacity: calc(1 - var(--bg-dim));
    scale: 1.1;
    animation: bgFadeIn .7s ease-out 0s forwards;
}

.center {
    position: fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.player-wrapper {
    background-color: rgba(20, 22, 24, 0.6);
    backdrop-filter: blur(8px);
    border-radius: var(--border-radius);
    min-width: min-content;
    padding: var(--extra-chonk);
    opacity: 0;
    animation: playerFadeIn .5s ease-out .2s forwards;
}

#stream-player {
    aspect-ratio: 16/9;
    min-width: calc(75vw);
    border-radius: var(--inner-border-radius);
}

@keyframes playerFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        opacity: 1;
    }
}

@keyframes bgFadeIn {
    0% {
        transform: scale(1.2);
    }

    100% {
        /*cock*/
    }
}