body {
  display: flex;
  flex-direction: column;
  gap: 20vw;
  font-size: 1.5vw;
  background-color: #d7e8dd;
}

@media (max-width: 768px) {
  body {
    font-size: 4.5vw;
    margin-top: 15vh;
  }
}

.volante {
  position: fixed;
  margin: 0;
  z-index: 1000;
  pointer-events: none;
}

#sopra {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

#semi {
  display: flex;
  flex-direction: row;
  gap: 1vw;
  padding-top: 1vw;
  padding-left: 1vw;
}

#pile {
  display: flex;
  flex-direction: row;
  gap: 1vw;
  padding-right: 1vw;
  padding-top: 1vw;
}

#sotto {
  display: flex;
  flex-direction: row;
  gap: 1vw;
  justify-content: center;
}

.scala {
  display: flex;
  flex-direction: column;
}

.carta {
  display: flex;
  align-items: center;
  border: 0.2vw solid black;
  border-radius: 0.5vw;
  width: 47px;
  height: 57px;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.scoperta,
#mazzo {
  cursor: pointer;
}

.scala .coperta {
  position: relative;
  margin-top: -45px;
}

.scala .scoperta:not(.scala:first-child) {
  position: relative;
  margin-top: -45px;
}

#sotto > .scala > .scoperta:not(.attaccabile) {
  align-items: baseline;
  margin-bottom: 5px;
}

.seme > *:not(:last-child) {
  display: none;
}

.rossa {
  color: red;
}

.nera {
  color: black;
}