@import url("https://fonts.googleapis.com/css?family=Asimovian");
@import url("https://fonts.googleapis.com/css?family=Rubik Glitch");

:root {
  --heading-font-face: "Asimovian";
  --button-font-face: "Asimovian";

  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);
  --grey: rgba(0, 0, 0, 0.487);
  --cyan: rgb(10, 216, 223);
  --dark-cyan: rgb(4, 109, 113);
  --green: rgb(21, 214, 21);

  --orange: rgb(251, 165, 43);
  --dark-orange: rgb(124, 83, 26);
  --very-dark-orange: rgb(16, 10, 3);

  --primary: var(--orange);
  --dark-primary: var(--dark-orange);

  --text-colour: var(--primary);
  --background-colour: var(--very-dark-orange);

  --brightness-blob-size: 3rem;
  --panel-border: 0.3rem;
  --outline-width: 0.2rem;
}

body {
  padding-top: 2rem;
  font-family: var(--button-font-face);
  background-color: var(--background-colour);
  max-width: 90vw;
  margin-inline: auto;
  text-transform: lowercase;
}

h1, h2 {
  font-family: var(--heading-font-face);
  text-align: center;
  margin: 0;
  margin-bottom: 3rem;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h1, h2 {
  /* https://html-css-js.com/css/generator/text-shadow/ */
  text-shadow:
    var(--outline-width) var(--outline-width) 0 var(--text-colour),
    var(--outline-width) calc(var(--outline-width) * (-1)) 0 var(--text-colour),
    calc(var(--outline-width) * (-1)) var(--outline-width) 0 var(--text-colour),
    calc(var(--outline-width) * (-1)) calc(var(--outline-width) * (-1)) 0
      var(--text-colour),
    var(--outline-width) 0 0 var(--text-colour),
    0 var(--outline-width) 0 var(--text-colour),
    calc(var(--outline-width) * (-1)) 0 0 var(--text-colour),
    0 calc(var(--outline-width) * (-1)) 0 var(--text-colour);
}

div {
  display: grid;
  gap: 2rem;
}

div#axes-directions {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
}

span.button, a {
  font-size: 3rem;
  color: var(--text-colour);
  border-radius: 3rem;
  text-align: center;
  box-sizing: border-box;
  border-width: 0.5rem;
  border-color: var(--text-colour);
  border-style: solid;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}

a {
  margin: 3rem;
  text-decoration: none;
}

#mode .controls {
  grid-template-columns: repeat(2, 1fr);
}

#axis .controls {
  grid-template-columns: repeat(3, 1fr);
}

#direction .controls {
  grid-template-columns: repeat(2, 1fr);
}

#brightness .controls {
  grid-template-columns: repeat(11, 1fr);
  gap: 1rem;

  span.button {
    border-width: 0.1rem;
    font-size: 0;
    border-radius: 50%;
    height: var(--brightness-blob-size);
    width: var(--brightness-blob-size);
  }
}

span.button.active {
  box-shadow: 0rem 0rem 1rem 1rem var(--primary);
  color: var(--background-colour);
  background-color: var(--dark-primary);
}

div.panel {
  gap: 0;
  border-top-color: var(--dark-primary);
  border-left-color: var(--dark-primary);
  border-bottom-color: var(--primary);
  border-right-color: var(--primary);

  border-width: var(--panel-border);
  border-style: solid;
  padding: 3rem;
  margin: 1rem;
}