@import url("/css/style.css");

body {
  background-position: center center;
  background-size: cover;
}

/* ethereal article and button */

article.ethereal {
  width: 80%;
  max-width: 120vmin;
  background-color: rgba(24, 28, 37, 0.5);
}

table.ethereal {
  width: 100%;
}

.ethereal td {
  background-color: rgba(24, 28, 37, 0.3);
  text-align: center;
  aspect-ratio: 1 / 1;
  width: 33.33%;
  height: auto;
  position: relative;
}

.ethereal header {
  background-color: transparent;
  backdrop-filter: blur(5px);
  border-style: solid;
  border-width: 0.5px;
  border-color: rgba(25, 25, 25, 0.5);
  text-align: center;
}

.ethereal footer {
  background-color: transparent;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border: none;
  text-align: left;
}

button.ethereal {
  background-color: rgba(19, 22.5, 30.5, 0.6);
  border-color: rgba(19, 22.5, 30.5, 0.6);
  text-align: center;
}

/* menu styles */

.box.puzzle-title {
  top: 5%;
  right: 5%;
  position: fixed;
  margin: 0;
  padding: 0;
  text-align: center;
  justify-content: center;
  height: fit-content;
  width: fit-content;
}

.box.puzzle-content {
  text-align: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.box.container {
  flex-wrap: wrap;
  row-gap: 1.5vmin;
  height: fit-content;
  width: 75%;
  max-width: 75%;
  align-items: center;
}

article.ethereal.container {
  height: fit-content;
  background-color: transparent;
  box-shadow: none;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0%;
}

article.ethereal.subpuzzle {
  background-color: rgba(255, 255, 255, 0.01);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(50, 50, 50, 0.25);
  box-shadow: 1px 1px rgba(25, 25, 25, 0.5);
  backdrop-filter: blur(5px);
  text-align: center;
  width: 40%;
  min-width: fit-content;
  padding: 2.5%;
  margin: 1.5% 3% 1.5% 3%;
}

@media (orientation: portrait) {
  body {
    background-position: center center;
    background-size: cover;
  }

  .box.container {
    margin: 0%;
    padding: 10%;
    height: fit-content;
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  article.ethereal.subpuzzle {
    backdrop-filter: blur(10px);
    margin: 2% 2.5% 2% 2.5%;
    padding: 3%;
  }

  .portrait-align {
    height: fit-content;
  }
}

/* different backgrounds */

body.stars {
  background-image: url("/ethereal/images/nightfall.png");
  background-size: cover;
}

article.stars {
  width: 80%;
  max-width: 120vmin;
  background-color: rgba(24, 28, 37, 0.5);
}

.stars header {
  background-color: rgba(19, 22.5, 30.5, 0.3);
  text-align: center;
}

.stars footer {
  background-color: rgba(19, 22.5, 30.5, 0.3);
  text-align: left;
}

body.ethereal {
  background-image: url("/ethereal/images/ethereal.jpg");
}

body.quartets {
  background-image: url("/ethereal/images/quartets.jpg");
}

body.apocalypse {
  background-image: url("/ethereal/images/apocalypse.jpg");
}

body.tribulation {
  background-image: url("/ethereal/images/tribulation.jpg");
}

body.eschaton {
  background-image: url("/ethereal/images/eschaton.jpg");
}

body.confluence {
  background-image: url("/ethereal/images/confluence.jpg");
}

body.pandemonium {
  background-image: url("/ethereal/images/pandemonium.jpg");
}

body.crystalline {
  background-image: url("/ethereal/images/crystalline.jpg");
}

body.abysm {
  background-image: url("/ethereal/images/abysm.jpg");
}

/* ethereal colors */

.quartets-color {
  background: #9932cc;
  background: linear-gradient(
    90deg,
    rgb(188, 64, 255) 0%,
    rgb(255, 169, 252) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apocalypse-color,
.tribulation-color,
.eschaton-color {
  background: #61befe;
  background: linear-gradient(
    90deg,
    rgb(61, 190, 254) 0%,
    rgb(92, 255, 150) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.confluence-color {
  background: #ff9a5c;
  background: linear-gradient(
    90deg,
    rgba(255, 154, 92) 0%,
    rgb(238, 203, 50) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pandemonium-color {
  background: #ff0d0d;
  background: linear-gradient(
    90deg,
    rgb(255, 30, 150) 0%,
    rgb(255, 99, 99) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.crystalline-color {
  background: #da70d6;
  background: linear-gradient(
    90deg,
    rgba(200, 89, 255, 1) 0%,
    rgba(92, 255, 150, 1) 33%,
    rgba(238, 203, 50, 1) 67%,
    rgba(255, 99, 99, 1) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.abysm-color {
  background: #b48fff;
  background: linear-gradient(
    90deg,
    rgba(180, 143, 255, 1) 0%,
    rgba(66, 132, 255, 1) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* absolute positioning */

.tleft {
  top: 5%;
  left: 5%;
  position: fixed;
}

.bleft {
  bottom: 5%;
  left: 5%;
  position: fixed;
}

.tright {
  top: 5%;
  right: 5%;
  position: fixed;
}

/* horizontal blocks */

span.block {
  display: inline-block;
  width: 0.5vmax;
}

span.long-block {
  display: inline-block;
  width: 2.5vmax;
}