:root {
  --c1: hsl(0, 0%, 65%);
  --c2: hsl(310, 60%, 80%);
  --c3: hsl(180, 30%, 75%);
  --c4: hsl(0, 100%, 100%);
  --c5: hsl(0, 100%, 100%);
  --c6: hsl(0, 100%, 100%);
  --gameWidth: 40%;
  --gameHeight: 70%;
}
div {
  margin: auto;
}
textarea {
  resize: none;
  outline: none;
  width: 400px;
  height: 500px;
  margin: auto;
  overflow: auto;
}
#ColorPickerOverlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 4;
}
#ColorPicker {
  width: 95%;
  height: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: var(--c1);
  border-radius: 20px;
  border: var(--c3) 1px solid;
  overflow-y: scroll;
}
input {
  margin-top: 50px;
  margin-bottom: 25px;
  width: 100%;
  border: none;
}
button {
  max-width: 200px;
  max-height: 200px;
  display: block;
  border-radius: 5px;
  border: var(--c2) 1px solid;
  background-color: var(--c2);
  padding: 10px;
}
button:nth-child(even) {
  border: var(--c3) 1px solid;
  background-color: var(--c3);
}
button:nth-child(4) {
  border: var(--c4) 1px solid;
  background-color: var(--c4);
}
#hexInput {
  margin-top: 0px;
  max-width: 100px;
}
#ranges {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.colorSquare {
  width: 100px;
  height: 100px;
  outline: 1px solid black;
  margin: 5px;
}
#sampleButtons {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  flex-direction: column;
}
#sample {
  background-color: #ffffff;
  grid-column: 2;
  grid-row: 3;
  margin: auto;
}
#colorBank {
  grid-column: 1/4;
  grid-row: 4;
  width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  padding: 25px;
  margin: auto;
}
.smallButton {
  width: 70px;
  max-height: 40px;
  display: inline;
  margin: auto;
}
#overwriteOverlay {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}
#overwrite {
  width: 400px;
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: var(--c1);
  border-radius: 10px;
  border: #e3c9df 1px solid;
}
#hueDiv {
  width: 100%;
  height: 50px;
  background-image: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}
#satDiv {
  --hue: 180;
  width: 100%;
  height: 50px;
  background-image: linear-gradient(
    to right,
    hsl(var(--hue), 0%, 50%),
    hsl(var(--hue), 10%, 50%),
    hsl(var(--hue), 20%, 50%),
    hsl(var(--hue), 30%, 50%),
    hsl(var(--hue), 40%, 50%),
    hsl(var(--hue), 50%, 50%),
    hsl(var(--hue), 60%, 50%),
    hsl(var(--hue), 70%, 50%),
    hsl(var(--hue), 80%, 50%),
    hsl(var(--hue), 90%, 50%),
    hsl(var(--hue), 100%, 50%)
  );
}
#lightDiv {
  width: 100%;
  height: 50px;
  background-image: linear-gradient(
    to right,
    hsl(0, 0%, 0%),
    hsl(0, 0%, 10%),
    hsl(0, 0%, 20%),
    hsl(0, 0%, 30%),
    hsl(0, 0%, 40%),
    hsl(0, 0%, 50%),
    hsl(0, 0%, 60%),
    hsl(0, 0%, 70%),
    hsl(0, 0%, 80%),
    hsl(0, 0%, 90%),
    hsl(0, 0%, 100%)
  );
}
.det {
  z-index: 2;
  position: absolute;
  top: 125px;
  left: 50%;
  background-color: var(--c1);
  height: var(--gameHeight);
  width: var(--gameWidth);
  overflow: auto;
  padding: 20px;
  border: var(--c1) 5px dashed;
  border-radius: 0px 20px 20px 0px;
}
#bodydet {
  z-index: 3;
}
#detNav {
  position: absolute;
  left: 50%;
  top: 100px;
  display: flex;
  flex-direction: row;
  justify-content: left;
}
#creaturedet {
  background-color: var(--c5);
  position: absolute;
  top: 125px;
  right: 50%;
  padding: 20px;
  height: var(--gameHeight);
  width: var(--gameWidth);
  z-index: 1;
  border: var(--c1) 5px dashed;
  border-radius: 20px 0px 0px 20px;
}
#creature {
  height: 100%;
}
svg {
  left: 100px;
  margin: auto;
  width: 100%;
  height: 100%;
}
#randomizers {
  display: flex;
  flex-direction: row;
  justify-content: left;
}