/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
.background-image-wrapper {
  width: 100%;
  height: 1000px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a3/Master_of_the_Brussels_Initials_and_Associates_-_Hours_of_Charles_the_Noble%2C_King_of_Navarre_%281361-1425%29-_fol._242r%2C_Text_-_1964.40.242.a_-_Cleveland_Museum_of_Art.tif?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=original');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 800px;
  opacity: 0.3;
  z-index: -1;
  position: absolute;
}
a img {
  border: 6px solid transparent; /* Creates the transparent border */
  transition: border-color 0.2s; /* Smooths color change if you use hover */
}

.jacquard-24-regular {
  font-family: "Jacquard 24", system-ui;
  font-weight: 400;
  font-style: normal;
}
.eagle-lake-regular {
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
}
.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}
.uncial-antiqua-regular {
  font-family: "Uncial Antiqua", system-ui;
  font-weight: 400;
  font-style: normal;
}
.medievalsharp-regular {
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
}
.unifrakturcook-bold {
  font-family: "UnifrakturCook", cursive;
  font-weight: 700;
  font-style: normal;
}
.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
}
.pirata-one-regular {
  font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.rubik-80s-fade-regular {
  font-family: "Rubik 80s Fade", system-ui;
  font-weight: 400;
  font-style: normal;
}
.jacquarda-bastarda-9-charted-regular {
  font-family: "Jacquarda Bastarda 9 Charted", serif;
  font-weight: 400;
  font-style: normal;
}
.tilt-prism-<uniquifier> {
  font-family: "Tilt Prism", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "XROT" 0,
    "YROT" 0;
}
.monofett-regular {
  font-family: "Monofett", monospace;
  font-weight: 400;
  font-style: normal;
}
.manufacturing-consent-regular {
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
}
.sixtyfour-<uniquifier> {
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}
.micro-5-regular {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.micro-5-charted-regular {
  font-family: "Micro 5 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}
.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.jersey-10-charted-regular {
  font-family: "Jersey 10 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.rubik-broken-fax-regular {
  font-family: "Rubik Broken Fax", system-ui;
  font-weight: 400;
  font-style: normal;
}
.workbench-<uniquifier> {
  font-family: "Workbench", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}
.jacquarda-bastarda-9-regular {
  font-family: "Jacquarda Bastarda 9", serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Jacquarda Bastarda 9";
  font-size: 4rem;
}
h2 {
  font-family: "Sixtyfour";
  font-size: 2rem;
}
h3 {
  font-family: "Workbench";
  font-size: 1rem;
}
h4 {
  font-family: "DotGothic16";
  font-size: 2rem;
}
h5 {
  font-family: "Tilt Prism";
  font-size: 2rem;
}
h6 {
  font-family: "MedievalSharp";
  font-size: 1rem;
}
h7 {
  font-family: "Coral Pixels";
  font-size: 2rem;
}
body {
  background-color: #26291a;
  color: #EECCEE;
  text-align: center;
  transform-origin: top left;
  transform: scale(1);
  font-family:  "Micro 5", system-ui;
}
/* 1. Unvisited link */
a:link {
    color: #a0e8b4;
}

/* 2. Visited link */
a:visited {
    color: #EECCEE;
}

/* 3. Hover state (mouse pointer over it) */
a:hover {
    color: #EECCEE;
}

/* 4. Active state (the exact moment it is clicked) */
a:active {
    color: #EECCEE;