@font-face {
  font-family: "Andy";
  src: url(assets/fonts/andy_bold.ttf);
}

* {
  font-family: "Andy", system-font;
  margin: 0;
  padding: 0;
  --purple: #9D70EB;
  --blue: #B5FFFF;
  --pink: #FFADFF;
}

body {
  color: #fff;
  background: repeat url("assets/aether.gif");
  
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

#intro {
  display: flex;
  flex-direction: column;
  margin: 24px 0;
}

#intro h1 {
  font-size: 6em;
  color: var(--purple);
}

#intro p {
  font-size: 2em;
  padding-left: 12px;
  transform: translateY(-1em);
}

.searcher {
  width: 90dvw;
  height: 20dvh;
  background: #fff;
}

#searcher-input {
  width: 100%;
  height: 20%;
  background: #222;
  color: #fff;
  font-size: 2rem;
  padding: 10px 12px;
}

#searcher-picker {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  background: #000;
}

.picker-item {
  width: 100%;
  border-radius: 0;
  text-align: start;
  padding: 8px;
  font-size: 1.7rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;

  background: #222;
  color: #fff;
}

.picker-item:hover {
  background: #555;
  cursor: pointer;
}

.picker-item img {
  max-width: 50px;
  max-height: 50px;
}

#guesses {
  width: 98dvw;

  margin: 90px 0;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
}

#guesses-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  color: var(--purple);
}

#guess-none {
  width: 100%;
  font-size: 3em;
  text-align: center;
  padding: 3rem 0;
}

.guess:hover {
  background: #222;
}

.guess-cell {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.guess-image {
  width: 8%;
  justify-items: center;
  padding: 4px 0;
}

.guess-image img {
  max-width: 60px;
  max-height: 60px;
}

.guess-correct {
  border: 4px solid #0f0;
}

.guess-wrong {
  border: 4px solid #f00;
}

.guess-defence {
  width: 6%;
}

.guess-life {
  width: 7%;
}

.guess-coins {
  width: 12%;
}

.guess-environments {
  width: 30%;
}

.guess-layers {
  width: 25%;
}

.guess-rarity {
  width: 8%;
}

.guess {
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid white;
}

.guess-group {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.coloured {
  color: #000;
  padding: 4px 6px;
  text-align: center;
}

.coloured-red {
  background: #f00;
}

.coloured-yellow {
  background: #ff0;
}

.coloured-green {
  background: #0f0;
}

#victory {
  width: 100dvw;
  height: 100dvh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#victory b:not(#guesses-counter) {
  font-size: 4rem;
}

#guesses-counter {
  font-size: 2rem;
  margin-top: 12px;
}

#victory p {
  font-size: 6rem;
  color: var(--pink);
}

#victory button {
  margin-top: 4rem;
  font-size: 3rem;
  padding: 8px 3rem;
  border-radius: 0;
  color: var(--purple);
  background-color: #000;
  border: 1px solid var(--purple);
}

#victory button:hover {
  color: var(--pink);
  border-color: var(--pink);
  transition: color .3s, border-color .3s;
}

#info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 80px;

  font-size: 2em;
}

#info p {
  background: #000;
}

a {
  color: #9D70EB;
  text-decoration: none;
}

a:hover {
  color: #FFADFF;
  transition: color .325s;
}