body {
  background-color: #deedf3;
  font-family: Cambria;
}

#submarine {
  position: absolute;
  left: 2%;
  top: 8%;
  width: 10%;
  height: 15%;
  border: thick solid #444;
  background-color: #062441;
  border-radius: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#oxygen {
  font-size: 4vw;
  font-family: Roboto;
  color: aliceblue;
}

#game--field {
  position: absolute;
  width: 54%;
  height: 54%;
  left: 5%;
  top: 26%;

}

.tile {
  border: solid #444;
  width: 4.5vw;
  height: 9vh;
  float: left;
  margin: calc(1vh - 1px) calc(0.8vw - 1px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.level1 {
  background-color: #62d2e6;
}

.level2 {
  background-color: #1a8da1;
}

.level3 {
  background-color: #095a68;
}

.level4 {
  background-color: #042f36;
}

.empty {
  background-color: rgb(201, 207, 228);
  border-radius: 50%;
}

.chip {
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

.chip--0 {
  background-color: rgb(12, 197, 36);
}

.chip--1 {
  background-color: rgb(202, 32, 32);
}

#winner {
  position: absolute;
  top: 5%;
  left: 30%;
  font-size: 40px;
}

.player {
  position: absolute;
  width: 24%;
  height: 24%;
  right: 3%;
  color: #444;
  background: none;
  font-size: 1.6rem;
  padding: 0.6rem;
  opacity: 85%;
}

#player--0 {
  top: 1%;
}

#player--1 {
  top: 33%;
}

.player--active {
  border: #444 thick solid;
  opacity: 100%;
}

.name {
  height: 30%;
  margin: 0%;
  text-align: center;
  font-size: 2vw;
}

.text-block {
  height: 25%;
  font-size: 1.4vw;
}

.label {
  display: inline-block;
}

.total-score {
  display: inline-block;
}

.treasures {
  display: inline-block;
}

.btn {
  position: absolute;
  width: 20%;
  height: 6%;
  right: 2%;
  color: #444;
  background: none;
  border-color:#444;
  font-size: 1.8vw;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px;
  border-radius: 50rem;
}

#btn--moveup {
  bottom: 24%;
}

#btn--roll {
  bottom: 17%;
}

#btn--take {
  bottom: 10%;
}

#btn--skip {
  bottom: 3%;
}

.dice {
    position: absolute;
    right: 20%;
    bottom: 5%;
    transform: translateX(-50%);
    width: 8vw;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

#dice--0 {
  right: 20%;
}

#dice--1 {
  right: 30%;
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
}