:root {
  --main-bg-color: rgb(0, 0, 0);
  --margin-bg-color: rgb(10, 10, 10);

  --title-text-color: rgb(200, 200, 200);
  --subtitle-text-color: rgb(99, 99, 99);

  --button-bg-color: rgb(207, 62, 36);
  --button-text-color: rgb(255, 255, 255);
  --button-bg-gradient: linear-gradient(to right, #1A2980 0%, #26D0CE  51%, #1A2980  100%);
  --button-disabled-bg-gradient: linear-gradient(to right, #6d6d6d 0%, #3a3a3a  51%, #1d1d1d  100%);

  --element-bg-color: rgb(22, 22, 22);
  --element-border-color: rgb(33, 33, 33);
  --element-text-color: rgb(66, 66, 66);

  /* --light-bg-color: rgb(255, 255, 255);
  --light-primary-text-color: rgb(66, 66, 66);
  --light-secondary-text-color: rgb(99, 99, 99); */

  --light-bg-color: rgb(66, 66, 66);
  --light-primary-text-color: rgb(200, 200, 200);
  --light-secondary-text-color: rgb(150, 150, 150);

  --page-margin: 10px;
  --animation-duration: 0.5s;
  --animation-timing: ease-in-out;

  --footer-height: 150px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;

  font-family: sans-serif;
  font-size: 0.9rem;
  color: var(--title-text-color);
  background-color: var(--main-bg-color);

  -webkit-touch-callout: none !important;
  touch-action: none;
}

#page {
  margin: var(--page-margin) var(--page-margin);
  /* display: flex;
  flex-direction: column; */
}

#canvas-container {
  position: relative;
  flex-grow: 1;
  height: calc(100% - var(--footer-height));
}

footer {
  flex-grow: 0;
  height: var(--footer-height);
}

#canvas {
  z-index: 1;

  width: 100%;
  height: 100%;
  object-fit: contain;

  transition-duration: var(--animation-duration);
  transition-timing-function: ease-in-out;

  /* prevent long touch */
  -webkit-user-select: none !important;
  user-select: none;
}

canvas#overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;

  width: 100%;
  height: 100%;
  object-fit: contain;

  -webkit-user-select: none !important;
  user-select: none;
  pointer-events: none;
}

#introduction {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;

  width: 100%;
  height: 100%;
  
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#introduction-contents {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#introduction div {
  margin-bottom: 1rem;
}


#controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 1rem;

  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
}

button {
  background: none;
  border: none;
}

button#load,
button#save {
  min-width: 100px;
  padding: 1rem 2rem;
  color: var(--button-text-color);
  background: var(--button-bg-color);
  background-image: var(--button-bg-gradient);
  background-size: 200% auto;
  transition: 0.5s;

  font-weight: bold;
  text-transform: uppercase;

  border-radius: 2rem;
  border: none;
  margin: 0.5rem;

  user-select: none;
}


button#load:active,
button#save {
  background-position: right center; /* change the direction of the change here */
}

button#save.disabled {
  color: var(--subtitle-text-color);
  background-image: var(--button-disabled-bg-gradient);
}


button.control {
  margin-right: 12px;
  width: 48px;
  height: 48px;
  border: 2px solid var(--button-text-color);
  border-radius: 24px;
}

button.control:active {
  background-color: var(--button-text-color);
}

button#radius {
  margin-left: 12px;
  width: 48px;
  height: 48px;
}

#blur-radius-control {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.control-row {
  display: flex;
  flex-direction: row;
  margin: 5px 0;
}

/*
  Custom range slider styling.
*/

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  position: relative;
  background: transparent; /* Otherwise white in Chrome */
  overflow: hidden;
  border-radius: 12px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 10px;
  background: var(--button-text-color);
  cursor: pointer;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  box-shadow: none;
  background: none;
  border-radius: 10px;
  border: 2px solid var(--button-text-color);
}

.hidden {
  display: none;
}

#offscreen {
  position: absolute; 
  top: -10000px; 
  visibility: hidden;
}

#offscreen.debug {
  z-index: 1000;
  bottom: 0;
  left: 0;
  top: 0;
  visibility: visible;
}