* {
  margin: 0;
  color: #555;
  z-index: inherit;
  color: inherit;
}

html {
  font-size: clamp(8px, min(4vw, 1.7vh), 22px);

  overflow-x: clip;
}

body {
  font-family: Quicksand;
  background: #eee;
  overflow-x: clip;

}

b {
  font-weight: 900;
  /* Fallback: Set a background color. */
  background-color: #ff0068;
  /* Create the gradient. */
  background-image: linear-gradient(90deg, rgba(255, 158, 0, 1) 0%, rgba(255, 0, 224, 1) 50%, rgba(255, 0, 104, 1) 80%);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  text-decoration: none;
  font-weight: 900;
  /* Fallback: Set a background color. */
  background-color: rgb(0, 173, 163);
  /* Create the gradient. */
  background-image: linear-gradient(90deg, rgba(0, 173, 163, 1) 0%, rgba(24, 113, 174, 1) 20%, rgba(37, 51, 204, 1) 74%, rgba(121, 0, 219, 1) 100%);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a:hover {
  background-image: linear-gradient(90deg, rgba(255, 158, 1, 1) 0%, rgba(255, 115, 0, 1) 100%);
}

sup {
  line-height: 1em;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: clip;
}

header {
  text-align: center;
  padding: 1em;
  margin: 0;
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#currentSelection {
  margin: 0 auto;
  padding: 1em 0;
  width: 100%;
  color: #777;
  text-align: center;
  font-size: 1.4em;
  font-weight: 900;
  background-color: white;
}

main {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6vh;
}

footer {
  font-size: 1.1em;
  width: 100%;
  padding:0.6em 0;
  margin-top: auto;
  text-align: center;
  z-index:100;
}

/* =========================
BUTTON SYSTEM
========================= */

button {
  font-family: Quicksand, sans-serif;
  font-weight: 600;
  font-size: 1.1em;

  min-height: 2.4em;
  min-width: 2.4em;
  padding: 0.35em 1em;

  border: none;
  border-radius: 1.5em;

  background: white;
  color: #555;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

button:hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

button:active {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* MAIN MODE BUTTONS */

#mode-buttons {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 0;
  width: 36em;
  max-width: 90vw;
}

#mode-buttons button {
  flex: 0.7;
  border-radius: 0;
}

#mode-buttons button:first-child {
  flex: 1;
  border-radius: 1.5em 0 0 1.5em;
}

#mode-buttons button:last-child {
  flex: 1;
  border-radius: 0 1.5em 1.5em 0;
}

/* SECOND MENU */

#typeMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
  margin: 0.6em;
}

#typeMenu button {
  font-size: 0.95em;
}

/* THIRD MENU */
#notation-buttons {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin-top: auto;
}

#notation-buttons button {
  font-size: 0.9em;
  width: 3em;
  height: 2em;
  padding: 0;
  border-radius: 3px;
}

/* SELECTED STATE */

button.selected {
  background: #777;
  color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* =========================
WHEEL
========================= */

#wheel {
  --wheel-size: min(52vh, 84vw);
  width: var(--wheel-size);
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto;
  padding: 0;
  font-size: calc(var(--wheel-size) / 25);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wheel-clip {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#labels {
  pointer-events: none;
}

#notes {}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tickbox {
  z-index: 2;
}

.tick {
  width: 3%;
  height: 3%;
  border-radius: 100%;
  border: none;
  background: #555;
  position: absolute;
  left: 48.5%;
  top: 6.5%;
}

.t12 .tick {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #555;
  background-image: linear-gradient(120deg, rgba(255, 158, 0, 1) 22%, rgba(255, 0, 224, 1) 50%, rgba(255, 0, 104, 1) 76%);
}

.text,
.textbox>div {
  vertical-align: sub;
  position: absolute;
  width: 100%;
  left: 0%;
  text-align: center;
  line-height: 0.9em;
}

.out {
  font-size: 1.2em;
}

#intervals_canvas .out {
  font-size: 1em;
}

.out>div {
  bottom: 96%;
  z-index: 2;
}

.out .two-liner {
  line-height: 0.6em;
  position: relative;
  top: -0.6em;
}

.circle,
.in {
  position: absolute;
  width: 84%;
  height: 84%;
  top: 8%;
  left: 8%;
  border-radius: 100%;
  border: none;
  font-size: 1.6em;
}

.circle {
  background: white;
  box-shadow: inset 0 0 0 2px #555, 0 0 0 1px #555;
  z-index: 0;
}

.in {
  background: transparent;
  rotate: 0deg;
  cursor: grab;
  z-index: 100;
  touch-action: none;
}

.in .textbox>div {
  top: 4%;
}

.c01,
.t01,
.i01,
.o01 {
  rotate: 30deg;
}

.c02,
.t02,
.i02,
.o02 {
  rotate: 60deg;
}

.c03,
.t03,
.i03,
.o03 {
  rotate: 90deg;
}

.c04,
.t04,
.i04,
.o04 {
  rotate: 120deg;
}

.c05,
.t05,
.i05,
.o05 {
  rotate: 150deg;
}

.c06,
.t06,
.i06,
.o06 {
  rotate: 180deg;
}

.c07,
.t07,
.i07,
.o07 {
  rotate: 210deg;
}

.c08,
.t08,
.i08,
.o08 {
  rotate: 240deg;
}

.c09,
.t09,
.i09,
.o09 {
  rotate: 270deg;
}

.c10,
.t10,
.i10,
.o10 {
  rotate: 300deg;
}

.c11,
.t11,
.i11,
.o11 {
  rotate: 330deg;
}


#labels .o06 .text {
  rotate: 180deg;
}

#center {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--wheel-size) / 10);
  font-weight: 500;
  user-select: none;
}

#center img {
  width: 3.6em;
}