:root {
  --maxCanvasWidth: 95vw;
  --offWhite: #F9F3E3;
  --darkBlue: #1F84D1;
  --darkBlueTransparent: #501d11dc;
  --brown: #3F3737;
  --warningRed: #A53733;
  --backgroundBeige: #C6BBAD;
}
html, body {
  margin: 0;
  padding: 0;
  color: var(--offWhite);
}
body{
  background-color: transparent;
  /* background-image: linear-gradient(#4DB5D2, var(--darkBlue)); */
  background-image: url("data/paperTile.png");
}
canvas {
  /* display: block; */
  max-width: var(--maxCanvasWidth);
  max-height: var(--maxCanvasWidth);
  position: -webkit-sticky;
  position: sticky;
  transition: 1s;
  padding: 10px;
}
.areaButton {
  max-width: min(calc(var(--maxCanvasWidth) / 13), 50px);
  font-size: min(calc((var(--maxCanvasWidth) / 35)), 9pt);
  position: absolute;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-weight: bold;
}
.areaButton.disabled{
  pointer-events: none;
  color: rgba(0, 0, 0, 0.24);
}
#centerColumn{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 90vh
}
#canvasContainer{
  position: relative;
}
.undisplayed{
  display: none !important;
}
.modal {
  overflow-y:auto;
}
.modal-content{
  background-color: var(--brown);
  border: none;
  border-radius: 0;
}
.modal-header{
  border: none;
}

.modal-title{
  font-family: 'Caveat', cursive;
  font-size: 24pt;
}
.visually-hidden{
  visibility: hidden;
}
.modal-footer{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  border: none;
}
#navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  background-color: transparent !important;
}
.navbar-brand{
  color: var(--brown) !important;
}
.caveatFont{
  font-family: 'Caveat', cursive;
  font-size: 16pt;
}
.primaryFontColour{
  color: var(--brown) !important;
}
.navbar .btn{
  color: var(--brown);
}
.btn:disabled{
  color: grey;
  background-color: transparent;
  border-color: grey;
}
.btn-primary{
  background-color: var(--brown);
  border-width: 3px;
  border-color: var(--brown) !important;
  border-radius: 0;
  color: var(--offWhite);
  font-size: large;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  padding: 10px 20px 10px 20px;
}
.btn-primary:hover{
  background-color: var(--offWhite);
  color: var(--brown);
}
.btn:focus{
  outline: none !important;
}
.btn:active{
  outline: none !important;
  box-shadow: none !important;
  background-color: grey !important;
}
.btn-primary.negative{
  background-color: var(--offWhite) !important;
  box-shadow: none !important;
  border-color: var(--offWhite) !important;
  color: var(--brown);
}
.btn-primary.negative:hover{
  background-color: var(--brown) !important;
  color: var(--offWhite);
}
.btn-secondary{
  background-color: transparent;
  border-width: 3px;
  border-color: var(--brown);
  border-radius: 0;
  color: var(--brown);
  font-size: large;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  padding: 10px 20px 10px 20px;
}
.btn-secondary.negative{
  border-color: var(--offWhite);
  color: var(--offWhite);
}
.btn-group:not(.hidden){
  display: flex !important;
  direction: rtl;
}
.dropdown-menu{
  background-color: var(--backgroundBeige);
  border-width: 3px;
  border-radius: 0;
  border-color: var(--brown);
}
.dropdown-item{
  color: var(--brown);
}
.dropdown-item:active{
  background-color: var(--brown);
}
.dropdown-item-text{
  color: var(--brown);
}
.dropdown-divider{
  border-color: var(--brown);
}
p{
  color: var(--offWhite);
}
.alert-danger{
  border-radius: 0;
  background-color: var(--warningRed);
  border: none;
  color: var(--offWhite);
}
.hidden{
  display: none !important;
}
.breadcrumb{
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  color: gray;
}
.breadcrumb a{
  color: inherit;
}
.breadcrumb-item.active{
  color: var(--brown) !important;
  font-weight: bolder;
}
#logo{
  padding-top: min(20px, 1vh);
  width: 30vw;
  max-width: 300px;
}
.btn-toggle{
  border-color: var(--offWhite);
  color:var(--offWhite);
}
.btn-toggle.active, .btn-toggle:hover{
  background-color: var(--offWhite) !important;
  color: var(--brown) !important;
  border-color: var(--offWhite) !important;
}
.btn-toggle.active > p{
  color: var(--brown);
}
.btn-toggle:hover > p{
  color: var(--brown);
}
.form-control{
  background-color: var(--offWhite);
}
.form-control:focus{
  background-color: var(--offWhite);
  border-color: var(--offWhite);
}
.close {
  color: #fff; 
  opacity: 1;
}
#characterClassLabel{
  padding-top: 2em;
}