html {
  background: url(../images/map.jpg) no-repeat;
  height: 100%;
}

body {
  font-family: "Kaushan Script", cursive;
  position: relative;
  background: none;
  min-height: 100vh;
  background: url(../images/parch2.jpg);
  border-left: 5px ridge bisque;
  border-right: 5px ridge bisque;
  border-bottom: 5px ridge bisque;
  background-size: cover;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

header {
  padding-top: 2%;
  margin-bottom: 5%;
}

.portrait {
  width: 250px;
  height: auto;
}

.choose-char {
  margin: 0 0.5rem;
  cursor: pointer;
}

.your-char {
  margin: 0 0.5rem;
}

.enemy-char {
  margin: 0 0.5rem;
  cursor: pointer;
}

.locked-enemy {
  margin: 0 0.5rem;
}

.defender-char {
  margin: 0 0.5rem;
  cursor: pointer;
}

.flex-just {
  display: flex;
  justify-content: center;
}

.name-display {
  font-family: "Montserrat Alternates", sans-serif;
  position: absolute;
  top: 3%;
  left: 50%;
  margin-left: -62px;
}

.hp-display {
  font-family: "Montserrat Alternates", sans-serif;
  position: absolute;
  bottom: 6%;
  left: 47%;
  margin-left: -14px;
  color: white;
  font-size: 15px;
}

#attack {
  font-family: "Montserrat Alternates", sans-serif;
  position: absolute;
  left: 34%;
  bottom: 10%;
  border: 5px ridge bisque;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#disabled {
  font-family: "Montserrat Alternates", sans-serif;
  position: absolute;
  left: 34%;
  bottom: 10%;
  border: 5px ridge bisque;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#attack:active {
  transform: translateY(4px);
}

.alerts {
  font-weight: bold;
}

#end-screen {
  font-family: "Montserrat Alternates", sans-serif;
  position: absolute;
  top: -7px;
  left: 5%;
  height: 100.7%;
  width: 90%;
  background: url(../images/win.png) no-repeat;
  background-size: 100%;
}

#defeated {
  position: relative;
  top: 20%;
}

#win-lose {
  position: relative;
  top: 65%;
}

.end-port {
  position: absolute;
  top: 30%;
  left: 37%;
}

#reset-btn {
  top: 77%;
  position: absolute;
  left: 44.5%;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: burlywood;
}

#reset-btn:active {
  transform: translateY(4px);
}