/* fusion-pixel-12px-monospaced-sc-latin-400-normal */
@font-face {
  font-family: 'Fusion Pixel 12px Monospaced SC';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/fusion-pixel-12px-monospaced-sc@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/fusion-pixel-12px-monospaced-sc@latest/latin-400-normal.woff) format('woff');
}

:root {
    --color-background: black;
    --color-heading: white;
    --color-text: rgb(175, 174, 174);
    --color-link: #3697d4;
    --color-link-hover: #90c5ed;
    --light: hsl(210, 2%, 16%);
    --dark: hsl(240, 3%, 6%);
}



html {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: var(1000);

    background-image: radial-gradient(
        ellipse at 60% 60%,
        var(--light) 0%,
        var(--dark) 65%
    );
    background-attachment: fixed;
    overscroll-behavior: none;
}

html, body {
    margin: 0;
    padding: 0;
    /* background-color: var(--color-background); */
}

body { 
    color: var(--color-text);
    font-family: monospace;
    line-height: 1.3;
    padding: 1rem;
}

h1, h2, h3 {
    color: var(--color-heading);
    font-family: 'Fusion Pixel 12px Monospaced SC';
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover)
}

section {
    margin-top: 3rem;
}

#profile-picture {
    height: 200px;
    width: 200px;
    display: block;
    border: 1px solid white;
    margin-bottom: 2rem;
}

@media screen and (min-width: 600px) {
    body {
        padding: 3rem;
    }
}