@import './shared/color-scheme.css';

/* Dark mode. Every colour it needs is named here and used below, so the two
   schemes differ by this block alone. The stroke's two are shared with the
   playground page instead (see `color-scheme.css`, imported above), since
   both pages have to pass them to the library rather than leave them to a
   stylesheet. */
:root {
  --page: #ffffff;
  --ink: rgb(31, 31, 31);
  --title-ink: rgb(236, 236, 236);
  --toast-background: rgba(0, 0, 0, 0.8);
  --toast-ink: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f0f11;
    --ink: rgb(226, 226, 230);
    --title-ink: rgb(38, 38, 42);
    --toast-background: rgba(236, 236, 238, 0.85);
    --toast-ink: #0f0f11;
  }
}

body,
html {
  height: 100%;
}

body {
  font-size: calc(10px + 1vw);
  line-height: calc(1.1em + 0.5vw);
}

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: calc(2em + 3vw);
  line-height: calc(1.1em + 0.5vw);
  margin: 20vh 3em 0.5em 1em;
}

#main,
#instructions {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#instructions .title {
  color: var(--title-ink);
}

#instructions .help {
  color: var(--ink);
  bottom: 1em;
  left: 1em;
  padding: 1em;
  position: absolute;
  right: 1em;
  text-align: center;
  width: auto;
}

#instructions .help a {
  color: inherit;
  /* #main sits on top of #instructions to catch a gesture started anywhere
     on the page; without its own stacking position, this link would sit
     under it and never receive a click. */
  position: relative;
  z-index: 1;
}

/* The menu itself must draw above that same link once it opens, so it isn't
   visually cut off by it near the bottom of the page. */
#main .marking-menu {
  z-index: 2;
}

#toast-wrapper {
  pointer-events: none;
  position: fixed;
  text-align: center;
  top: 50px;
  width: 100%;
}

#toast {
  background-color: var(--toast-background);
  border-radius: 5px;
  color: var(--toast-ink);
  font-weight: bolder;
  opacity: 0;
  padding: 10px 20px;
  transition: 400ms;
}

#toast.shown {
  opacity: 1;
}

.github-corner svg {
  border: 0;
  color: var(--page);
  fill: var(--ink);
  position: absolute;
  right: 0;
  top: 0;
}

.github-corner .octo-arm {
  transform-origin: 130px 106px;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

body {
  background-color: var(--page);
  color: var(--ink);
}