:root {
    /* Colors */
    --color-dark: #333;
    --color-bg: #F5F5F5;
    --color-bg-alt: #F9FAF5;
    --color-green: #50C878;
    --color-orange: #FFA500;

    /* Breakpoints */
    --bp-desktop: 950px;
    --bp-tablet: 640px;
    --bp-mobile: 440px;

    /* Typography */
    --font-h1-desktop: 140px;
    --font-h1-tablet: 100px;
    --font-h1-mobile: 60px;
    --font-big: 10rem;
}

@font-face {
    font-family: 'HelveticaOutline';
    src: url('../fonts/helvetica-outline.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMono';
    src: url('../fonts/roboto-mono.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMonoItalic';
    src: url('../fonts/roboto-mono-italic.otf') format('opentype');
    font-display: swap;
}

.helvetica-outline {
    font-family: 'HelveticaOutline', sans-serif;
}

.roboto-mono {
    font-family: 'RobotoMono', monospace;
}

.roboto-mono-italic {
    font-family: 'RobotoMonoItalic', monospace;
}

.color-green {
    color: var(--color-green);
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 0;
}

#logo h1 {
    font-size: var(--font-big);
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    padding: 0;
    filter: blur(5px);
}

body {
    font-family: 'RobotoMono', monospace;
    color: var(--color-dark);
    background-color: var(--color-bg-alt);
    margin: 0;
    padding: 0;
}

html,
body, 
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#grid {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#gravity-canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}