@import url(global.css);
@import url("https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Boldonse&family=Cal+Sans&family=Metamorphous&display=swap");

/* VÁLTOZÓK */
:root {
  --ash-black: rgb(19, 20, 20);
  --night-bordeaux: #370617ff;
  --black-cherry: #6a040fff;
  --oxblood: #9d0208ff;
  --brick-ember: #d00000ff;
  --red-ochre: #dc2f02ff;
  --cayenne-red: #e85d04ff;
  --deep-saffron: #f48c06ff;
  --orange: #faa307ff;
  --amber-flame: #ffba08ff;

  --title-font: "Metamorphous";
}

/* BODY */

body {
  color: white;
  background-color: black;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
    url(../img/halando-background.png);
    background-size: cover;
}

header {
  text-shadow:
    0.5rem 0.5rem 1rem var(--ink-black),
    0.3rem 0.7rem 0.7rem black;
  font-family: var(--title-font), serif;
  text-shadow: rgba(255, 255, 255, 0.9) 0px 0px 30px;
}

h1 {
  color: white;
  font-family: var(--title-font), serif;
}

.lore {
  background-color: rgb(0, 0, 0);
  text-shadow: 0.1rem 0.1rem 0.5rem rgb(4, 65, 134);
  border-color: rgb(13, 207, 13);
    box-shadow: 0 0 20px rgb(3, 134, 14);
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;

    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(0, 0, 0)),
      url(../img/halando-background.png);
  }
  header {
    text-shadow:
      0.5rem 0.5rem 1rem var(--ink-black),
      0.3rem 0.7rem 0.7rem black;

    text-shadow: rgba(255, 255, 255, 0.9) 0px 0px 30px;
  }
  h1 {
    color: white;
  }
  .lore {
    background-color: rgb(0, 0, 0);

    text-shadow: 0.1rem 0.1rem 0.5rem rgb(3, 97, 39);

    border-color: rgb(13, 207, 13);
    box-shadow: 0 0 20px rgb(3, 134, 14);
  }
}