washwithstyle.css

:root {
  --colourLight: #d8d9e2;
  --colourShade: #8192b5;
  --colourYellow: #eab624;
  --colourPurple: #982b90;
  --colourBlue: #10499f;
}

* {
  font-family: sans-serif;
  font-size: 4.5vmin;
  user-select: none;
}
@media screen and (min-width: 640px) {
  * {
    font-size: 2.65vmin;
  }

  /*
  Alternate narrow keyboard layout

  #keyboard {
    width: auto;
    border-radius: 2.2em 2.2em 0 0;
    padding: 0.8em;
  }
  */
}
body {
  background-color: var(--colourBlue);
}
button {
  background-color: var(--colourLight);
  font-weight: bold;
  border: none;
  border-radius: 0.3em;
  transition: box-shadow 0.2s;
}
button:active:hover {
  background-color: var(--colourShade);
  box-shadow: 0.02em 0.02em 0.15em var(--colourShade);
}
@media not all and (hover: none) {
  button:hover {
    box-shadow: 0.07em 0.07em 0.3em var(--colourShade);
  }
}
/* @media (pointer: coarse) */
button:focus {
  outline: none;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.spine > * {
  display: block;
  margin: 0;
  padding: 0.5rem 0;
  width: 100%;
  text-align: center;
}
.row {
  margin-bottom: 0.3em;
}
#title {
  font-size: 0.8em;
  color: var(--colourLight);
}
#title img {
  height: 1em;
  margin: 0 -0.1em -0.25em;
}
#notification-request {
  background-color: var(--colourYellow);
}
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
#display {
  padding-bottom: 0.5em;
}
#display,
#display span {
  font-size: 1.8em;
  background-color: var(--colourLight);
  font-family: 'Source Code Pro', monospace;
}
#display-context::before {
  content: '█';
  animation: blink 1.5s steps(2, start) infinite;
  margin-left: -1.55ch;
  color: var(--colourLight);
  mix-blend-mode: difference;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
#keyboard {
  margin-top: auto;
  background-color: var(--colourLight);
}
#keyboard button {
  font-size: 1.8em;
  margin: 0.1em;
  padding: 0.4em;
  width: 2em;
  border-radius: 50%;
}
#enter {
  color: var(--colourLight);
  background-color: var(--colourPurple);
}
#levels {
  min-height: 2em;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-size: 1.2em;
  padding: 0;
  color: var(--colourLight);
  transition: height var(--shortAnimDuration);
}
::-webkit-scrollbar {
  display: none;
}
#levels p {
  margin: 0.4em 0;
  animation: appear var(--shortAnimDuration);
  transition: font-size var(--shortAnimDuration),
    font-weight var(--shortAnimDuration), position var(--shortAnimDuration);
  overflow: hidden;
  white-space: nowrap;
}
#levels p:first-child {
  font-size: 1.6em;
  font-weight: bold;
}
#levels span {
  font-size: 1em;
}
@keyframes appear {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
#levels p.smooth {
  transition: margin var(--shortAnimDuration);
}
#levels p.imminent {
  animation: imminent 2s linear none infinite alternate;
}
@keyframes imminent {
  0%,
  30% {
    color: inherit;
  }
  50%,
  100% {
    color: var(--colourYellow);
  }
}