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

body {
  background-image: url(../images/clouds.jpg);
  background-size: cover;
}

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

.ethereal header,
footer {
  background-color: rgba(19, 22.5, 30.5, 0.8);
  text-align: center;
}

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

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

article.stars {
  width: 80%;
  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;
}

/* ethereal colors */

.quartets-color {
  background: #9932cc;
  background: linear-gradient(
    90deg,
    rgba(153, 50, 204, 1) 0%,
    rgba(218, 112, 214, 1) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apocalypse-color {
  background: #5cffce;
  background: linear-gradient(
    90deg,
    rgba(92, 255, 206, 1) 0%,
    rgba(48, 152, 255, 1) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.confluence-color {
  background: #ff9a5c;
  background: linear-gradient(
    90deg,
    rgba(255, 154, 92, 1) 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;
}

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

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

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

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