/* BASE COLORS */
:root {
  --fg-color: #D4D400;
  --bg-color: #000000;
}

@font-face {
  font-family: Galderglynn;
  src: url(/assets/galderglynn/Galderglynn_Titling_Bd.otf);
}

/* HTML STYLING */
html {
  margin: 0% 10% 0% 10%;
  background: var(--bg-color);
  color: var(--fg-color);
  font-family: Galderglynn;
  font-size: 200%;
  font-weight: 400;
  font-style: normal;
}

/* HEADER AND FOOTER */
header {
  display: flex;
  flex-direction: column;
}
header>* {
  margin-bottom: 1%;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  /* removes all the pre-configured css */
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
}

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px;
  font-size: 250%;
  font-weight: bold;
}

h2 {
  font-size: 200%;
  font-weight: bold;
}

h3 {
  margin: 0;
  font-size: 150%;
  font-weight: bold;
}

/* MISC */
a {
  color: inherit;
  text-decoration: underline dotted;
}

a:hover {
  text-decoration: underline solid;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

hr {
  border: 1px solid var(--fg-color);
}

/* TABLET VIEW */
@media only screen and (max-width: 900px) {
  /* HTML STYLING */
  html {
    margin: 0% 5% 0% 5%;
    font-size: 175%;
  }

  /* HEADER AND FOOTER */

  /* HEADINGS */
  h1 {
    font-size: 175%;
  }
  h2 {
    font-size: 150%;
  }
  h3 {
    font-size: 125%;
  }
}

/* MOBILE VIEW */
@media only screen and (max-width: 600px) {
  /* HTML STYLING */
  html {
    margin: 0% 5% 0% 5%;
    font-size: 100%;
  }

  /* HEADER AND FOOTER */

  /* HEADINGS */
  h1 {
    font-size: 175%;
  }
  h2 {
    font-size: 150%;
  }
  h3 {
    font-size: 125%;
  }
}