body {
  position: relative;
  overflow: hidden;
  font-family: monospace;
  font-size: 15px;
  margin: 0;
}

/***********************/
/*** Triangle & Icon ***/
/***********************/

.triangle {
  position: fixed;
  z-index: 1;
  width: 0;
  height: 0;
  right: 0;
  border-style: solid;
  border-color: transparent whitesmoke transparent transparent;
  margin: 15px;
  cursor: pointer;
}

#settingsTriangle {
  top: 0;
  border-width: 0 40px 40px 0;
}

#infoTriangle {
  bottom: 0;
  border-width: 40px 40px 0 0;
}

.icon {
  position: absolute;
  z-index: 10;
  left: 15px;
  width: 15px;
  height: 15px;
  border-style: solid;
  cursor: pointer;
}

#settingsIcon {
  top: 5px;
  border-width: 4px 4px 0 0;
}

#infoIcon {
  bottom: 5px;
  border-width: 0 4px 4px 0;
}

/***********************/
/******** Modal ********/
/***********************/

.modal {
  position: fixed;
  z-index: 0;
  width: 260px;
  margin: 15px;
  padding: 15px;
  background: whitesmoke;
  box-shadow: 0px 6px 14px -4px black;
}

#settingsModal {
  top: 0;
  right: 0;
}

#infoModal {
  bottom: 0;
  right: 0;
}

#copiedModal {
  top: 0;
  left: 0;
  width: initial;
  padding: 10px;
}

/***********************/
/***** Description *****/
/***********************/

#description {
  padding-bottom: 10px;
}

/***********************/
/****** Checkboxes *****/
/***********************/

#radioButtons {
  padding: 10px 0;
  margin: 10px 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.radioButtonLabel {
  padding-left: 5px;
  padding-right: 50px;
}

/***********************/
/******* Sliders *******/
/***********************/

.colorSection {
  display: flex;
  padding: 10px 0;
}

.label {
  width: 60px;
  font-weight: bold;
}

.slider {
  display: flex;
}

.valueIndicator {
  width: 20px;
  padding: 0 10px;
}

input[type='range'] {
  width: 120px;
}

input[type='range']::-webkit-slider-thumb,
input[type='range']::-webkit-slider-runnable-track {
  cursor: pointer;
}

/***********************/
/******* Buttons *******/
/***********************/

#buttons {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}

button {
  font-family: monospace;
  font-size: 15px;
  cursor: pointer;
}

/***********************/
/***** Color tiles *****/
/***********************/

#colors {
  position: fixed;
  z-index: -1;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tile {
  font-size: 10px;
  word-wrap: break-word;
  color: transparent;
}

.tile:hover {
  display: block;
  color: black;
  cursor: url('copy.svg'), auto;
}