@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --bg-primary: #f9f9f9;
    --bg-secondary: #1e1e1e;

    --font-family: "IBM Plex Mono", monospace;
    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "IBM Plex Mono", monospace;
    background: var(--bg-primary);
}

.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 1rem 1rem;
    width: 100vw;
    height: 100vh;
}

.content {
    position: absolute;
    max-width: 50vw;
    align-items: start;
    flex-direction: column;
    display: flex;
    gap: 1rem;
}

.content > h1 {
    font-size: xx-large;
    color: var(--bg-primary);
}

.content > p {
    font-size: medium;
    color: var(--bg-primary);
}

#gradient-canvas {
    --gradient-color-1: #ff7300;
    --gradient-color-2: #ffd900;
    --gradient-color-3: #ff0000;
    --gradient-color-4: #ff0095;
}

@media only screen and (max-width: 750px) {
    .content {
        max-width: 85vw;
    }

    .content > p {
        font-size: small;
    }

    #gradient-canvas {
        --gradient-color-1: #00b7ff;
        --gradient-color-2: #00ff9d;
        --gradient-color-3: #6200ff;
        --gradient-color-4: #006eff;
    }
}