body {
  font-family: 'Raleway', sans-serif;
  background-color: rgb(122, 29, 0);
}
button {
  font-family: 'Raleway', sans-serif;
}
#dice {
  display: flex;
  font-family: 'Raleway', sans-serif;
}
#top-section {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
.die {
  padding: 0;
  margin: 5px;
  border: 2px solid black;
  width: 40px;
  height: 40px;
  background-color: white;
  z-index: 1;
}
#roll-btn {
  width: 80px;
  float:left;
}
.die.active {
  border: 2px solid rgb(255, 0, 0);
}
.score-div {
  padding: 5px;
  width: 100px;
  border: 1px solid black;
  border-left: none;
}
.score-span {
  padding: 5px;
  width: 50px;
  border: 1px solid black;
  border-right: none;
  text-align: center;
}
#title {
  text-align: center;
}
#bottom-score {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
#reset-btn {
  float: right;
}
#card {
  border: 2px solid black;
  display: flex;
  flex-direction: row;
  width: fit-content;
  background-color: white;
  box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.4);
}
.totals {
  padding: 5px;
  width: 161px;
  border: 1px solid black;
  border-left: none;
  border-right: none;
}
#controls {
  background-color: white;
  margin-top: 5px;
  width: 335px;
  padding: 5px;
  border: 3px solid black;
  height: fit-content;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
}
#page-wrap {
  display: flex;
  flex-direction: column;
}
.row-wrap {
  display: flex;
}
.controlButtons {
  -webkit-appearance: none;
  border-radius: 0;
  color: black;
  border: 1px solid black;
}
#buttons {
  margin-top: 10px;
}

@media (max-width: 630px) {
    body {
      touch-action: pan-x pan-y;
   }
    #page-wrap {
      flex-direction: column;
    }
    #controls {
      margin-left: 0;
    }
  }

@media only screen and (max-device-width: 480px) {
  body {
    margin-top: 2px;
    touch-action: pan-x pan-y;
  }
  #page-wrap {
    flex-direction: column;
  }
  #controls {
    margin-left: 0;
  }
}