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

:root {
    --primary-color: #f73878;
    --secondary-color: #5c00dd;

    --primary-color-light: #ff9baa;
    --secondary-color-light: #a36df2;

    --primary-color-dark: #231117;
    --secondary-color-dark: #191928;

    --accent-color: #c369d7;
    --accent-color-dark: #573f5c;

    --background-color: #0c080e;
    --background-color-light: #16101a;
    --background-gradient: linear-gradient(145deg, var(--secondary-color-dark) 0%, var(--background-color-light) 50%, var(--primary-color-dark) 100%);

    --text-color: #fff;
    --text-color-light: rgba(255, 255, 255, 0.85);
    --text-color-lighter: rgba(255, 255, 255, 0.7);

    --font-family: "Quicksand", "Roboto", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    corner-shape: squircle;
}

::selection {
    background-color: rgba(163, 109, 242, 0.75);
    color: white;
    text-shadow: 2px 2px 2px var(--background-color);
}

html,
body {
    scroll-behavior: smooth;

    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    color: var(--text-color);
    font-size: 1rem;

    @media screen and (max-width: 640px) {
        font-size: 0.95rem;
    }

    @media screen and (max-width: 480px) {
        font-size: 0.9rem;
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    background: var(--background-color);
    overflow: hidden;
}

main {
    width: 100vw;
}