styles.css

/* Inspired by @discord's easter egg ❤️ */

@font-face {
  font-size: normal;
  font-weight: 600;
  font-family: 'Ginto';
  src: url('/ABCGintoNormal-Medium.woff');
}

@font-face {
  font-size: normal;
  font-weight: normal;
  font-family: 'Whitney';
  src: url('/whitneybook.woff');
}

@font-face {
  font-size: normal;
  font-weight: 500;
  font-family: 'Whitney';
  src: url('/whitneymedium.woff');
}

body {
  background: #282a2e;
  color: #dcddde;
  font-family: 'Whitney', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  margin: 0;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background-color: hsl(210,9.8%,20%);
}

::-webkit-scrollbar-thumb {
  background-color: #202225;
}

#start {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  line-height: 1.2;
  margin-top: -10px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fff;
  font-family: 'Ginto', system-ui, sans-serif;
  animation: blink 2s linear infinite backwards;
}

#start.connected {
  animation: none;
}

#start.disconnected {
  color: hsl(38, 95.7%, 54.1%);
}

@keyframes blink {
  from, 49%, to {
    opacity: 1;
  }
  50%, 99% {
    opacity: 0;
  }
}

.print {
  margin-bottom: 20px;
  margin-top: -6px;
  color: #b9bbbe;
}

.print[style]:not([style='']) {
  min-height: 32px;
  min-width: 32px;
  background-size: contain;
}

.button {
  background: #4f545c;
  color: #f6f6f7;
  max-width: 190px;
  margin: 14px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgb(4 4 5 / 20%), 0 1.5px 0 rgb(6 6 7 / 5%), 0 2px 0 rgb(4 4 5 / 5%);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  padding: 2px 16px;
  text-rendering: optimizeLegibility;
  height: 38px;
  min-width: 96px;
  min-height: 38px;
  box-sizing: border-box;
  transition: .17s ease background;
}

.button:active {
  transform: translateY(1px);
}

.button:hover {
  background: #5d6269;
}

.rumble.rumbling {
  animation: rumble step-end infinite;
  animation-duration: .4s;
}

.rumble.double.rumbling {
  animation-duration: .2s;
}

.rumble.godlike.rumbling {
  animation-duration: .05s;
}

.rumble.double {
  background: hsl(139,47.3%,43.9%);
  color: #fff;
  box-shadow: 0 4px 4px rgb(0 0 0 / 16%);
}

.rumble.double:hover {
  background: hsl(139,47.1%,33.3%);
}

.rumble.godlike {
  background: hsl(359,82.6%,59.4%);
  color: #fff;
  box-shadow: 0 8px 16px rgb(0 0 0 / 24%);
  text-transform: uppercase;
}

.rumble.godlike:hover {
  background: hsl(359,56.7%,48%);
}

@keyframes rumble {
  10% {
    transform: translateX(1px) translateY(-1px);
  }
  20% {
    transform: translateX(2px) translateY(1px);
  }
  30% {
    transform: translateX(-1px) translateY(2px);
  }
  40% {
    transform: translateX(3px) translateY(-1px);
  }
  50% {
    transform: translateX(-3px) translateY(4px);
  }
  60% {
    transform: translateX(-1px) translateY(-2px);
  }
  70% {
    transform: translateX(1px) translateY(3px);
  }
  80% {
    transform: translateX(-2px) translateY(2px);
  }
  90% {
    transform: translateX(3px) translateY(-4px);
  }
  100% {
    transform: translateX(2px) translateY(4px);
  }
}

.buttons {
  display: none;
}

#start.connected ~ .buttons {
  display: block;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 20px;
  color: #72767d;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 3px;
  text-decoration: none;
  transition: .4s ease-in-out, 0s color, 0s padding;
}

.footer.fade {
  opacity: 0;
}

.footer:hover {
  text-decoration: underline;
}

.footer .link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 1;
}

.github {
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  color: #8e9297;
  background: #202225;
  border-bottom-right-radius: 20px;
  cursor: pointer;
}

.dialog-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  flex-direction: column;
  transition: background 0.2s ease;
  background: transparent;
  pointer-events: none;
}

.dialog-wrapper.visible {
  background: hsla(0, 0%, 0%, 0.85);
  pointer-events: auto;
}

.dialog {
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #36393f;
  box-shadow: 0 0 0 1px rgb(32 34 37 / 60%), 0 2px 10px 0 rgb(0 0 0 / 20%);
  min-height: 400px;
  width: 600px;
  max-height: 800px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  transform: scale(0.72);
  opacity: 0;
}

body.loaded .dialog {
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-property: transform, opacity;
}

.dialog-wrapper.visible .dialog {
  transform: scale(1);
  opacity: 1;
}

.dialog .dialog-header {
  justify-content: flex-start;
  box-shadow: 0 1px 0 0 rgb(24 25 28 / 30%), 0 1px 2px 0 rgb(24 25 28 / 30%);
  border-radius: 5px 5px 0 0;
}

.dialog :is(.dialog-header, .dialog-footer) {
  padding: 16px;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.dialog-title {
  font-family: 'Ginto', system-ui, sans-serif;
  font-weight: 600;
  color: white;
  font-size: 20px;
  line-height: 24px;
  margin-right: 10px;
  flex: 1 1 auto;
}

.dialog-close {
  height: 26px;
  padding: 4px;
  transition: opacity .2s ease-in-out;
  opacity: .5;
  cursor: pointer;
  border-radius: 3px;
  color: #b9bbbe;
  margin-left: 10px;
}

.dialog-close:hover {
  opacity: 1;
}

.dialog-footer {
  background-color: #2f3136;
  box-shadow: inset 0 1px 0 rgb(47 49 54 / 60%);
  border-radius: 0 0 5px 5px;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.button.primary {
  background: hsl(139,47.3%,43.9%);
  color: #fff;
  font-weight: 500;
}

.button.primary:hover {
  background: hsl(139,47.1%,33.3%);
}

.dialog-footer .button {
  margin: 0;
  width: auto;
  box-shadow: none;
}

.dialog-content {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 20px;
  padding-top: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.dialog-radiogroup {
  margin-bottom: 40px;
}

.radio-box {
  background-color: #2f3136;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 10px;
  display: flex;
  grid-gap: 8px;
  align-items: center;
}

.radio-box.checked .radio-fill {
  fill: hsl(139,47.3%,43.9%);
}

.radio-box:hover {
  background-color: rgba(79,84,92,0.16);
  color: #dcddde;
}

.radio-box:active {
  background-color: rgba(79,84,92,0.24);
  color: #fff;
}

.radio-box.checked {
  background-color: #202225;
  color: #fff;
}

.radio-box .radio-fill {
  fill: transparent;
}

.dialog-video-container iframe {
  border-radius: 3px;
  width: 100%;
}

.splash {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #282a2e;
  z-index: 100000;
}

body.loaded .splash {
  display: none;
}

.emoji-preloader {
  display: none;
}