:root {
  --base-lightest: white;
  --base-lighter: #d8dbde;
  --base-light: #b6b9bc;
  --base-dark: #5c5e5f;
  --base-darker: #3b3c3d;
  --base-darkest: #1b1b1c;
  --primary-lightest: #f198ff;
  --primary-lighter: #eb67ff;
  --primary-light: #e538ff;
  --primary-dark: #9328a4;
  --primary-darker: #821193;
  --primary-darkest: #6a007b;
  --secondary-lightest: #ffedaa;
  --secondary-lighter: #fbd754;
  --secondary-light: #ffc800;
  --secondary-dark: #bc9400;
  --secondary-darker: #8e6f00;
  --secondary-darkest: #755c00;
}

@keyframes highlight {
  from {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }

  to {
    transform: scale3d(2, 2, 2) translate3d(0, -25%, 0);
    opacity: 0;
  }
}

@keyframes cycle {
  0% {
    fill: var(--secondary-light);
    transform: scale3d(1, 1, 1);
  }
  50% {
    fill: var(--secondary-lighter);
    transform: scale3d(1.25, 1.25, 1);
  }
  100% {
    fill: var(--secondary-light);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rotate {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

html {
  font: 18px monospace;
  font-family: monospace;
  color: var(--base-lightest);
  background: url(../img/velvet-highres.jpg) #530c1c;
}

a {
  color: var(--secondary-light);
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus,
a:focus-visible,
select:focus,
select:focus-visible {
  outline-style: solid;
  outline-color: white;
  outline-width: 3px;
}

button,
a.button {
  background: var(--secondary-light);
  color: var(--base-darkest);
  border-radius: 6px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: block;
  box-sizing: border-box;
}
button.selected,
a.button.selected {
  background: var(--base-darker);
  color: var(--secondary-lighter);
}
a.button:focus,
a.button:focus-visible,
button:focus,
button:focus-visible,
a.button:hover,
button:hover {
  outline: none;
  background: var(--secondary-lightest);
}
button:disabled {
  background-color: var(--base-dark);
  border-color: var(--base-dark);
  cursor: default;
}
button.hide,
a.button.hide {
  display: none;
}

h1 {
  font-size: 1rem;
}
h1 .star {
  transform-origin: center center;
  animation: rotate 3s infinite;
}

p,
li {
  line-height: 1.8;
}

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  touch-action: none;
}

#main-nav {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 12px;
  box-sizing: border-box;
}
#main-nav h1 {
  flex-grow: 1;
}
#main-nav button {
  color: var(--secondary-light);
  background: none;
  border: none;
  font-weight: bold;
  margin-right: 18px;
}
#main-nav button:hover {
  text-decoration: underline;
}
#main-nav button:active,
#main-nav button:focus-visible,
#main-nav button:focus {
  outline: 3px solid white;
  border-radius: 0;
}

#table {
  background: url(../img/velvet-highres.jpg) #530c1c;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -33.333%;
  right: -33.333%;
  bottom: -33.333%;
  left: -33.333%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 20px 3px rgba(0, 0, 0, 0.95);
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#book-wrapper {
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#book {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.75) inset;
  background: rgba(0, 0, 0, 0.25); */
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#circle {
  width: 30vmin;
  height: 30vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15vmin;
  margin-top: -15vmin;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 30px 15px rgba(182, 253, 255, 0.33) inset;
}
#glass {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40vmin;
  margin-top: -40vmin;
  background: url(../img/pendant.png) no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: url('../img/hand_open.png'), move;
}
#play-button {
  position: absolute;
  z-index: 100;
  width: 37%;
  height: 37%;
  left: 50%;
  top: 50%;
  margin-left: -18%;
  margin-top: -18%;
  border-radius: 50%;
  display: block;
  background: none;
  cursor: url('../img/hand_point.png'), pointer;
  border: none;
}
.dragging #glass,
.dragging #play-button {
  cursor: url('../img/hand_closed.png'), move;
}
#play-button svg {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  margin-left: -25%;
  margin-top: -25%;
}
#play-button path {
  animation: cycle 5s infinite;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
  stroke: var(--secondary-dark);
  stroke-width: 1px;
  transform-origin: center center;
}
#drag-icon {
  position: absolute;
  right: 8%;
  top: 45%;
  width: 8%;
  height: 8%;
  display: none;
}
#drag-icon.active {
  display: block;
}
#drag-icon path {
  fill: var(--secondary-light);
  animation: cycle 5s infinite;
  transform-origin: center center;
}
#play-button:hover path,
#play-button:focus-visible path,
#play-button:focus path {
  stroke: var(--secondary-lightest);
}
#play-button.playing svg {
  display: none;
}
#page {
  position: absolute;
}
.letter {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform-origin: center center;
}
.letter svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.letter.active svg {
  display: block;
}
.letter.active.playing {
  animation: highlight 0.5s ease-in-out;
  animation-fill-mode: none;
}

.paginate {
  display: block;
  position: absolute;
  width: 120px;
  height: 200px;
  top: 50%;
  margin-top: -100px;
  z-index: 101;
  background: none;
  border: none;
}
.paginate svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.paginate path {
  fill: var(--secondary-light);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}
.paginate:hover,
.paginate:focus-visible,
.paginate:focus {
  background: none;
}
.paginate:hover path,
.paginate:focus-visible path,
.paginate:focus path {
  fill: var(--secondary-lightest);
}
#page-prev {
  left: -20px;
}
#page-next {
  right: -20px;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  padding: 6px 12px;
  box-sizing: border-box;
}
#credits {
  flex-grow: 1;
}
#options {
  display: flex;
  align-items: stretch;
}
#options label {
  padding: 0 6px 0 12px;
  align-self: center;
}
#options button {
  margin-left: 6px;
}

.panel {
  display: none;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}