@font-face {
    font-family: 'Graph FF Condensed';
    src: url('GraphFFCondensed-Black.woff2') format('woff2'),
        url('GraphFFCondensed-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color: tomato;
    --background:#ffffff;

    --body-copy: 1rem;
    --heading-copy: calc(var(--body-copy) * 2);

    --gutter: 2rem;
    --vertical: 2.5rem;
}

body {
    font-family:'Graph FF Condensed';
    color: var(--color);
    background-color: var(--background);
    font-size: var(--body-copy);
    block-size: 100vh;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    align-items: center;
}

main p {
padding-block-end: 2rem;
}

/* Wanted a cool pattern behind my work */
/* Found this pattern collection: https://css-pattern.com/ */
/* I learned that i can change the CSS styles of the background in the code template */

body {
  --s: 80px; /* control the size*/
  --c1: #ffffff;
  --c2: #dbfff8;
  --c3: #f5f5f5;
  --c4: #fff1f0;
  --c5: #f7f5ff;
  
  --_g: radial-gradient(#0000 70%,var(--c1) 71%);
  background:
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(var(--c2) 25%,var(--c3) 0 50%,var(--c4) 0 75%,var(--c5) 0);
  background-size: var(--s) var(--s);
}

main {
    padding-inline: var(--gutter);
    padding-block: var(--vertical);
    font-size: calc(var(--heading-copy) * 2);
    color: black;
    /* margin-inline: auto;
    text-align: center; */
}

h1 {
    font-size: calc(var(--heading-copy) * 2);
    padding-block-end: 1rem;
}


ul {
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--gutter)
}

.reverse {
    padding-block: var(--vertical);
    color: var(--background);
    background-color: var(--color);
    padding-inline: var(--gutter);
}

footer, hgroup p {
    font-family: sans-serif;
}

a {
    text-decoration-line: underline;
}