@font-face {
  /* you can add custom fonts with "@font-face". Here I added 2, one "display" font for titles, and a "regular" font for plain text. */
  font-family: "display";
  src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
}

@font-face {
  font-family: "regular";
  src: url(https://files.catbox.moe/0mpm8l.ttf);
  /* it's calibri */
}

body {
  background-image: url("https://media.istockphoto.com/id/1414203195/vector/seamless-buffalo-check-pattern-in-pastel-brown-and-white-vector-lumberjack-plaid-background.jpg?s=612x612&w=0&k=20&c=dvbQSkCAKI7qoTN6nEh3gXmCt0sbRrezb8k7uWhpMRw=");
  /* add your own image by changing the url, or use a colour with "background-color". You can remove this entire body section if you just want white */
}

img {
  display: block;
  /* block display causes elements to stack vertically on the page */
  margin: 12px auto;
  /* the first value is the top and bottom margins. the second value is the sides, and setting it to "auto" keeps it centered. You'll see this a lot */
}

p { /* text */
  margin: 0 auto;
  padding: 0 15%; /* top, bottom / sides */
  text-align: center;
  color: black;
  font-family: "regular";
}

h1 { /* title */
  margin: 0 auto;
  text-align: center;
  color: brown;
  font-size: 1.5em;
  font-family: "display";
}

a { /* links */
  color: red;
  text-decoration: none;
  /* removes standard underline */
}

a:hover {
  /* styled underline when a link is hovered over */
  text-decoration: underline dashed 1px;
}

hr {
  /* "horizontal rule" aka a lil divider */
  border: none;
  /* this removes the default so we can add our own through "border-top" */
  border-top: dashed gray 1px;
  width: 50%;
  margin: 25px auto;
}

.box {
  /* our custom box container class */
  width: clamp(250px, 70vw, 500px);
  /* you can use any value here, but "clamp" allows your box to scale dynamically; the first value is the minium possible display width (250px), the second the ideal display size (70vw, or 70% of the current screen view width), and the third the maximum upper limit (500px). */
  margin: 0 auto;
  padding: 1em;
  background-color: white;
  border: 2px solid gray;
  border-radius: 5px; /* how round the corners are */
  box-shadow: 0px 5px 10px gray; /* optional */
}

.button {
  /* we can use this class to style links so they look and behave like buttons on carrd, etc. */
  display: block;
  width: 190px;
  margin: 10px auto;
  background: gray;
  border: 1px solid black;
  border-radius: 10px;
  padding: 3px;
  text-align: center;
  font-family: "regular";
  font-size: 1em;
  color: white; /* text colour */
}

.button:hover {
  background: #D3D3D3;
  border: 1px dashed gray;
  color: gray;
  text-decoration: underline wavy;
}