:root {
    --gradient-speed: 10s;

    --color-primary: #ffd38c;
    --color-secondary: #e83f5e;
    --color-tertiary: #f39400;
    --color-quaternary: #3c3c3b;
    --color-quinary: #e48f94;
    --color-background: #f5f5f5;
    --background-gradient: radial-gradient(circle at 50% 50%, var(--color-primary) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, var(--color-secondary) 0%, transparent 70%),
        radial-gradient(circle at 80% 20%, var(--color-tertiary) 0%, transparent 70%),
        radial-gradient(circle at 10% 20%, var(--color-quinary) 0%, transparent 70%),
        radial-gradient(circle at 90% 80%, var(--color-quaternary) 0%, transparent 60%);

    --shadow: 0 0 80px 80px rgba(0, 0, 0, 0.18);

    --animation: fluid var(--gradient-speed) ease-in-out infinite alternate;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--color-quaternary);
}

body {
    display: flex;
    flex-direction: column;

    background-color: var(--color-quaternary);

    background-image: var(--background-gradient);

    background-size: 400% 400%;

    animation: var(--animation);
}

@keyframes fluid {
    0% {
        background-position: 0% 50%, 100% 50%, 50% 0%, 50% 100%, 0% 0%;
    }

    33% {
        background-position: 100% 30%, 0% 70%, 20% 100%, 80% 0%, 100% 100%;
    }

    66% {
        background-position: 30% 100%, 70% 0%, 100% 40%, 0% 60%, 50% 50%;
    }

    100% {
        background-position: 100% 50%, 0% 50%, 50% 100%, 50% 0%, 100% 0%;
    }
}

@font-face {
    font-family: 'Poppins-Bold';
    src: url('../assets/Poppins-Bold.ttf.woff') format('woff'),
        url('../assets/Poppins-Bold.ttf.svg#Poppins-Bold') format('svg'),
        url('../assets/Poppins-Bold.ttf.eot');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'Poppins-Bold';
}