/* VÁLTOZÓK, MENTÉSEK, IMORTÁLÁS */
:root {
  --deep-space-blue: #012a4aff;
  --yale-blue: #013a63ff;
  --yale-blue-2: #01497cff;
  --yale-blue-3: #014f86ff;
  --rich-cerulean: #2a6f97ff;
  --cerulean: #2c7da0ff;
  --air-force-blue: #468fafff;
  --steel-blue: #61a5c2ff;
  --sky-blue-light: #89c2d9ff;
  --light-blue: #a9d6e5ff;

  --ink-black: #03071eff;
  --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;

  --vanilla-custard: #d0db97ff;
  --emerald: #69b578ff;
  --fern: #3a7d44ff;
  --dark-spruce: #254d32ff;
  --shadow-grey: #181d27ff;

  --tea-green: #c9f2c7ff;
  --light-green: #aceca1ff;
  --muted-olive: #96be8cff;
  --sage-green: #629460ff;
  --evergreen: #243119ff;
}

html {
  margin: 0%;
  height: 100vh;
  background-color: black;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  position: relative;
  margin: 0%;
  height: 100%;
}

.background {
  background-image:
    linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0)),
    url("../img/HeavenlyInferno.png");
    background-position: top;
    background-size: cover;
    height: 100%;
}

/* KONTÉNEREK BEÁLLÍTÁSA, ELHELYEZÉSE */

.container {
  padding-top: 15%;
}

.info-box {
  background-color: rgba(0, 0, 0, 0.562);
  align-self: center;
  width: 50%;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-size: 1.3em;
  font-weight: bold;
  margin: auto;
}

.fraction-buttons {
  font-size: 1em;
  display: flex;
  justify-content: space-around;
  gap: 10vw;
  width: 100%;
  margin-top: 25vh;
}

.button {
  text-decoration: none;
  color: white;
  font-weight: bold;
  background-color: black;
  padding: 20px 50px;
  border-radius: 25px;
  height: 2vh;

  transition: 0.2s;
}
.button:hover {
  scale: 1.2;
}

/* ELEMEK BEÁLLÍTÁSA */

.release-date {
  color: rgb(255, 29, 29);
}

.angyalok {
  background: linear-gradient(
    to right,
    rgb(1, 35, 99) 0%,
    rgb(62, 189, 240) 100%
  );
  border: 1.5px solid rgb(144, 255, 212);
  box-shadow: 0px 0px 40px 20px rgba(113, 250, 255, 0.699);
}

.halandok {
  background: linear-gradient(
    to right,
    rgb(12, 88, 35) 0%,
    rgb(132, 243, 112) 100%
  );
  border: 1.5px solid rgb(195, 255, 138);
  box-shadow: 0px 0px 40px 20px rgb(145, 255, 139, 0.699);
}

.demonok {
  background: linear-gradient(
    to right,
    rgb(107, 0, 0) 0%,
    rgb(255, 102, 42) 100%
  );
  border: 1.5px solid rgb(255, 173, 65);
  box-shadow: 0px 0px 40px 20px rgba(194, 16, 3, 0.699);
}

@media screen and (max-width: 800px) {
  .info-box {
    height: 15vh;
    font-size: 0.6rem;
  }
  .container {
    padding-top: 10%;
  }
  .fraction-buttons {
    scale: 0.8;
    height: 10vh;
    text-align: center;
    line-height: 1.5vh;
    font-size: 0.8rem;
  }
}

@media (prefers-color-scheme: dark) {
  .info-box {
    background-color: rgba(0, 0, 0, 0.562);
    color: white;
  }
  .angyalok {
    background: linear-gradient(
      to right,
      rgb(1, 35, 99) 0%,
      rgb(62, 189, 240) 100%
    );
    border: 1.5px solid rgb(144, 255, 212);
    box-shadow: 0px 0px 40px 20px rgba(113, 250, 255, 0.699);
  }
  
  .halandok {
    background: linear-gradient(
      to right,
      rgb(12, 88, 35) 0%,
      rgb(132, 243, 112) 100%
    );
    border: 1.5px solid rgb(195, 255, 138);
    box-shadow: 0px 0px 40px 20px rgb(145, 255, 139, 0.699);
  }
  .demonok {
    background: linear-gradient(
      to right,
      rgb(107, 0, 0) 0%,
      rgb(255, 102, 42) 100%
    );
    border: 1.5px solid rgb(255, 173, 65);
    box-shadow: 0px 0px 40px 20px rgba(194, 16, 3, 0.699);
  }
  .release-date {
    color: rgb(255, 29, 29);
  }
}


@media screen and (max-width: 600px) {
  .fraction-buttons {
    flex-direction: column;
    text-align: center;
    gap:100px;
    margin:auto;
    margin-top: 10vh;
    width: 80%;
  }
  .info-box {
    width: 80%;
    font-size: 1em;
  }
  .container {
    padding-top: 20%;
  }
}