* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

input {
  transition: transform 100ms ease;
  cursor: pointer;
}

.checkboxes {
  height: 600px;
  display: flex;
  align-items: center;
  padding-left: calc(50vw - 10px);
  padding-right: calc(60vw);
  transition: transform 100ms ease;
  border-top: 3px dashed #f5f5f5;
  border-bottom: 3px dashed #f5f5f5;
}

.inner {
  padding-right: 30px;
}

.central {
  font-family: monospace;
  position: fixed;
  transform: translateX(-50%);
  pointer-events: none;
  left: 50%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 150ms ease-out;
}

.score {
  left: 0;
  padding: 30px;
  padding-right: 60px;
  height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: none;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
  color: white;
}

.score.show {
  color: black;
}

.tips {
  max-width: 150px;
  text-align: center;
  font-weight: bold;
  transform: translateY(-85%) translateX(-50%);
}

.flag {
  width: 25px;
  height: 25px;
}

.end {
  padding: 20px;
  background: #eee;
  margin-left: 20px;
  position: relative;
  font-family: monospace;
  width: 220px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 150ms ease-out;
  opacity: 0;
}

p {
  margin: 0;
}

.finalTime {
  font-weight: bold;
}

.nice {
  font-size: 18px;
}

.end:before {
  position: absolute;
  content: "";
  left: -20px;
  top: 50%;
  margin-top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid #eee;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
}

.boost {
  position: absolute;
  pointer-events: none;
  animation: slideUp 800ms cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  font-family: monospace;
  font-size: 15px;
  font-weight: bold;
}

.sitter {
  position: fixed;
  bottom: 15px;
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.watch {
  background: rgba(0, 0, 0, 0.07);
  padding: 10px 15px;
  border-radius: 22px;
  display: inline-block;
  margin-right: 5px;
}

.twitter {
  background: url("data:image/png;base64,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");
  width: 33px;
  height: 33px;
  display: inline-block;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.07);
  border-radius: 50%;
  background-size: 20px 20px;
  background-position: center;
  vertical-align: top;
}

.left {
  left: 15px;
}

.right {
  right: 15px;
}

@keyframes slideUp {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(-50%);
  }
}

.resetButton {
  width: 120px;
  margin: auto;
  margin-top: 2px;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}