html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

body {
  cursor: url(assets/cursor.png), auto;
}

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a:visited {
  color: blue;
}

.linked {
  cursor: pointer;
}

.comment {
  display: none !important;
}

a:hover {
  color: red;
}

h1,
h2,
h3,
h4,
p,
p > * {
  line-height: 1.2;
}

#controls {
  position: fixed;
  right: 0px;
  top: calc(50vh - 92px);
  z-index: 9999;

  height: 184px;
  display: grid;
  grid-template-rows: 22px 65px 11px 65px 22px;

  border-radius: 43px 0px 0px 43px;

  background-color: white;
  filter: drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white)
    drop-shadow(0px 0px 5px white) drop-shadow(0px 0px 5px white);

  > #previous,
  > #next {
    font-size: 54px;
    line-height: 1;
    user-select: none;
    cursor: pointer;
    border-radius: 108px;

    padding-right: 8px;

    filter: opacity(0.4);
    transition: filter 0.3s ease-in-out;
  }

  > #previous:hover,
  > #next:hover {
    filter: opacity(1);
  }
}

#prefetch-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

#slide-wrapper {
  display: grid;
  width: 100vw;
  height: 100vh;

  justify-items: center;
  align-items: center;
}

#slide-title {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;

  z-index: 9999;
}

#slide-title > p {
  font-size: 1.5em;
  width: fit-content;

  color: #00000088;

  font-style: italic;
}

#slide {
  border-radius: 24px;
  box-shadow:
    inset 5px 5px 10px white,
    inset -5px -5px 10px white,
    inset -5px 5px 10px white,
    inset 5px -5px 10px white;
  outline: 2px solid white;
  outline-offset: -1px;
}

#slide > div {
  border-radius: 6px;
  display: flex;
  align-items: center;
}

#slide > div.image {
  display: block;

  > .text {
    margin: 4px;
    border-radius: 6px;
    padding-inline: 6px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }
}

#slide > div > .text {
  margin-left: 8px;
  padding-right: 8px;
  width: fit-content;
}

.shiny {
  --shine-color: blue;
  animation: 1.5s linear shine;
}

@keyframes shine {
  0% {
    box-shadow:
      -2px 2px 0px var(--shine-color),
      2px -2px 0px var(--shine-color),
      2px 2px 0px var(--shine-color),
      -2px -2px 0px var(--shine-color);
  }
  5% {
    box-shadow:
      -5px 5px 0px var(--shine-color),
      5px -5px 0px var(--shine-color),
      5px 5px 0px var(--shine-color),
      -5px -5px 0px var(--shine-color);
  }
  90% {
    box-shadow:
      -5px 5px 0px var(--shine-color),
      5px -5px 0px var(--shine-color),
      5px 5px 0px var(--shine-color),
      -5px -5px 0px var(--shine-color);
  }
  100% {
    box-shadow:
      0px 0px 0px var(--shine-color),
      0px 0px 0px var(--shine-color),
      0px 0px 0px var(--shine-color),
      0px 0px 0px var(--shine-color);
  }
}