html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
  background: #884444;
}

p {
  margin: 0;
}

a {
  color: white;
}

#app {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 70% 30%;
  justify-items: start;
  align-items: start;
  align-self: stretch;
}

#styleBar {
  width: 100%;
  height: 100%;
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  background: #444444;
  overflow-y: scroll;
}

#mainArea {
  display: flex;
  flex-direction: column;
}

#pageTitle {
  margin: 5px;
  font: 50pt serif;
}

#titleBar {
  display: flex;
  width: 100%;
  height: 100%;
  background: #884444;
}

#canvasDiv {
  width: 100%;
  height: 100%;
}

#footerDiv {
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  display: flex;
  justify-content: space-evenly;
}

#drawingArea {
  height: 100%;
  width: 100%;
}

.imageButtonGroup {
  display: flex;
  flex-wrap: wrap;
}

.imageButton {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 5px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  border-radius: 10%;
}

.buttonImage {
  width: 100px;
  border-radius: 30%;
}

.wideButtonImage {
  width: 200px;
  border-radius: 30%;
}

.buttonText {
  margin-top: 0.5em;
}

.IBselected {
  background: #884444;
}

#styleTools,
#styleCanvas,
#styleElement,
#styleExport {
  padding: 10px;
  flex-grow: 0;
}

#styleSpacer {
  flex-grow: 1;
}

input {
  margin: 4px;
}

.buttonGroup {
  display: flex;
  gap: 10px;
  flex-flow: wrap;
  padding-bottom: 1em;
}

.customCheckButton {
  flex: 1 1 10rem;
  /* padding: 0.5rem; */
  /* background: lightblue; */
  border-radius: 20px;
  display: flex;
  align-items: center;
  border: 3px solid white;
}

.selectedCB {
  background: #884444;
}

.customCheckButtonText {
  padding: 0.3rem;
  padding-left: 0;
}

.CBicon::before {
  content: "\2610";
  position: relative;
  display: inline-block;
  font-size: 3rem;
  padding: 0.5rem 1rem;
}

.selectedCB .CBicon::before {
  content: "\2611";
}

.customButton {
  display: inline-block;
  padding: 1.5em;
  margin-right: 10px;
  color: white;
  background-color: #884444;
  border-radius: 10px;
  border: 0;
  transition: background 100ms ease-in-out, transform 100ms ease-in-out;
}

.customButton:hover {
  background: #703a3a;
}

.customButton:active {
  transform: scale(0.99);
}