/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}

@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");

body {
  background: gold;
  padding: 15px;
  /* Display properties. */
  /*Taken from MDN, works super great, but not super sure of full logic yet*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
  /* end of grid system */
}

h1 {
  font-family: Courgette, cursive;
}

p {
  font-family: HK Grotesk, sans-serif;
}

img {
  width: 200px;
}

p.secret {
  text-decoration: line-through;
  text-decoration-thickness: 5px;
  padding: 15px;
}

p.secret:hover {
  text-decoration: none;
}

figure{
  display:none;
  display: grid;
  grid-auto-rows: minmax(auto, auto);
  color: blue;
}