:root {
  --controls-height: 3em;
  --full: calc(var(--vh, 1vh) * 100);
  --limit: 600px;

  --darkest: #202124;
  --dark: #27292b;
  --middle: #777777;
  --light: #e5e5e5;
  --lightest: #f0f0f0;

  --DARK-lvl2: var(--dark);
  --DARK-background: var(--darkest);
  --DARK-foreground: var(--light);

  --LIGHT-lvl2: var(--lightest);
  --LIGHT-foreground: var(--darkest);
  --LIGHT-background: var(--light);
}

body {
  --lvl2: var(--DARK-lvl2);
  --background: var(--DARK-background);
  --foreground: var(--DARK-foreground);
}

@media (prefers-color-scheme: light) {
  body.themed:not(.dark) {
    --lvl2: var(--LIGHT-lvl2);
    --foreground: var(--LIGHT-foreground);
    --background: var(--LIGHT-background);
  }
}

body.themed.light {
  --lvl2: var(--LIGHT-lvl2);
  --foreground: var(--LIGHT-foreground);
  --background: var(--LIGHT-background);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);

  font-family: sans-serif;
  color: var(--foreground);
  line-height: 1.2;
}

* {
  box-sizing: border-box;
}

.unsupported {
  text-align: center;
}
.unsupported a {
  color: white;
  font-weight: bold;
}

.header-container.error {
  font-weight: bold;
  background: #d64c4f;
}

.container {
  position: relative;
  height: var(--full);

  display: flex;
  flex-direction: column;
}

.contents {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.limit {
  width: 100%;
  max-width: var(--limit);
  margin-left: auto;
  margin-right: auto;
}

.hide {
  display: none !important;
}

.invisible {
  opacity: 0;
}

/** STUFF ABOVE IS STANDARD FRAMEWORK **/

.main {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--controls-height)
}

.controls {
  position: fixed;
  bottom: 0;
  left: 0;
  height: var(--controls-height);
  width: 100%;
}

.controls i {
  --size: 2em;
  --padding: 0.3em;

  position: relative;
  font-size: var(--size);
  padding: 0 var(--padding);
  cursor: default;
}

.controls.help .material-icons {
  font-size: 1em;
  padding-bottom: 1em;
  width: calc((var(--padding) * 4) + var(--size));
  text-align: center;
  margin: 0;
}

.controls.help .material-icons::after {
  content: attr(title);
  position: absolute;
  font-size: 0.8em;
  bottom: -0.1em;
  left: 0;
  width: 100%;
  overflow: visible;
  display: block;
  font-family: sans-serif;
  text-align: center;
}

.palette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--background);
  user-select: none;
  max-width: var(--limit);
  margin: auto;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(var(--lvl2), var(--background) 60%);
  box-shadow: 0 -7px 8px -10px black;
}

/* MENU */

.menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  user-select: none;
  z-index: 10;
}

.menu > ul {
  position: absolute;
  bottom: 0;
  background: var(--background);
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: 5px 5px 0 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.menu > ul > li {
  display: flex;
  align-items: center;
  padding: 20px;
}

.menu > ul > li > i {
  padding-right: 0.5em;
}

.menu > ul > li.meta {
  opacity: 0.75;
  font-weight: bold;
  justify-content: center;
}

/* TOAST STYLE */

.toastify.toastify.toastify {
  width: calc(100% - 20px);
  max-width: var(--limit);
  text-align: center;
}

/* INTRO */

.intro {
  padding: 40px;
  width: 100%;
  text-align: center;
  user-select: none;
}

.intro i {
  font-size: 6rem;
}

.settings {
  padding: 40px 20px;
  width: 100%;
}

.settings .label {
  width: 100%;
  text-align: center;
  opacity: 0.75;
  font-weight: bold;
  margin-top: 26px;
}

.settings .value {
  width: 100%;
  max-width: 360px;
  text-align: center;
  padding: 10px;
  border: 1px solid var(--middle);
  border-radius: 2rem;
  margin: 10px auto 0;
}

/* MISC */

.progress {
  --fill: var(--darkest);
  --color: var(--light);
  --size: 100px;
  --thick: 6px;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fill);
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.5s ease;
}

.progress.init {
  pointer-events: all;
  opacity: 1;
}

.progress.in-progress {
  pointer-events: all;
  opacity: 0.9;
}

.progress .ring {
  display: inline-block;
  width: var(--size);
  height: var(--size);
}
.progress.init .ring:after,
.progress.in-progress .ring:after {
  content: " ";
  display: block;
  width: calc(var(--size) - var(--thick) - var(--thick));
  height: calc(var(--size) - var(--thick) - var(--thick));
  border-radius: 50%;
  border: var(--thick) solid var(--color);
  border-color: var(--color) transparent var(--color) transparent;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.main img {
  max-height: 600px;
  max-width: 600px;
  margin-bottom: 10px;
}

.main img:first-of-type {
  margin-top: 10px;
}

@media screen and (max-width: 600px) {
  .main img {
    --max: calc(100vw - 20px);
    max-width: var(--max);
    max-height: var(--max);
  }

  .palette {
    width: 100%;
    border-radius: 0;
  }
}