:root {
  --color-primary-light: white;
  --blue: #0000f0;
  --green: #bfff04;
  --body-copy: 1rem;
  --font-primary: "Folsom", sans-serif;
}
/* I downloaded a font from a website and got the syntax for CSS Rule @font-face from https://www.w3schools.com/cssref/atrule_font-face.php */
@font-face {
  font-family: "Folsom";
  src: url("./fonts/folsom-black-web.otf");
}
/* BACKGROUND PATTERN */
/* I wanted to use a background pattern on my page */
/* I found this pattern from CSS Generator: https://css-pattern.com/shuriken/ */
/* Conic-gradient is a gradient that rotates around the center */
/* Conic-gradient takes parameters for the specific angle, position and color */
/* g1-g4 establishes the background layers which are used in the background property */

body {
  font-family: sans-serif;
  font-size: var(var(--heading-copy));
  block-size: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  align-items: center;
  --s: 30px; /* control the size*/
  --c1: #bfff04;
  --c2: #0000f0;

  --c: var(--c1) 25%, #0000 0;

  --_s: /calc(6 * var(--s)) calc(6 * var(--s));
  --g1: var(--_s) conic-gradient(from 45deg at calc(250%/3), var(--c));
  --g2: var(--_s) conic-gradient(from 135deg at 50% calc(250%/3), var(--c));
  --g3: var(--_s) conic-gradient(from 225deg at calc(50%/3), var(--c));
  --g4: var(--_s) conic-gradient(from -45deg at 50% calc(50%/3), var(--c));
  background:
    calc(2 * var(--s)) calc(5 * var(--s)) var(--g4),
    calc(5 * var(--s)) calc(2 * var(--s)) var(--g4),
    0 calc(4 * var(--s)) var(--g3),
    calc(3 * var(--s)) var(--s) var(--g3),
    calc(2 * var(--s)) calc(3 * var(--s)) var(--g2),
    calc(5 * var(--s)) 0 var(--g2),
    var(--s) var(--s) var(--g1),
    calc(4 * var(--s)) calc(4 * var(--s)) var(--g1),
    conic-gradient(at calc(100% / 3) calc(200% / 3), var(--c)) 0 0 /
      calc(3 * var(--s)) calc(3 * var(--s)) var(--c2);
}

h1 {
  display: flex;
  flex-direction: column;
  font-size: 5rem;
  color: var(--green);
}

header,
.intro-section {
  background-color: var(--color-primary-light);
  margin: 2rem 2rem 2rem 0;
  padding: 2rem;
  font-family: var(--font-primary);
}

header > section {
  display: flex;
  justify-content: space-between;
  color: var(--blue);
}

hgroup {
  padding-block: 4rem 6rem;
}

.intro-section {
  margin-block: 10rem;
}

.intro-section > p {
  color: var(--blue);
  padding-block: 5rem;
  text-align: center;
  font-size: 1.2rem;
}

.article-section,
.article-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.article-section {
  flex-direction: column;
  align-items: center;
  padding-block: 2rem;
  margin-block: 8rem;
}

.article-row article {
  background-color: var(--color-primary-light);
  width: 20rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
}

article > p {
  color: var(--blue);
}

footer {
  color: var(--blue);
  background-color: var(--color-primary-light);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.5;
}

footer a {
  font-weight: 700;
}

/* Media Query for small desktops */
/* I pulled these key breakpoints from https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih */
@media (769px <= width <= 1024px) {
  header,
  .intro-section {
    margin: 2rem 6rem 2rem 0;
    padding: 2rem 5rem;
  }
  header > section {
    font-size: 1.5rem;
  }
  hgroup {
    padding-block: 5rem 7rem;
  }
  h1 {
    font-size: 8rem;
  }
  .intro-section > p {
    font-size: 2rem;
  }
  article > p {
    font-size: 1.5rem;
  }
}
/* Media Query for large desktops */
/* I pulled these key breakpoints from https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih */
@media (width >= 1025px) {
  header,
  .intro-section {
    margin: 2rem 8rem 2rem 0;
    padding: 2rem 7rem;
  }
  header > section {
    font-size: 1.75rem;
  }
  hgroup {
    padding-block: 6rem 8rem;
  }
  h1 {
    font-size: 10rem;
  }
  .intro-section > p {
    font-size: 2.5rem;
  }
  article > p {
    font-size: 1.75rem;
  }
}