body {
  background: url(back.jpg) no-repeat center center fixed;
  background-size: cover;
}

#expr-prev {
  font-size: large;
}

#expr-left {
  color: red;
  font-size: xxx-large;
}

#expr-right {
  color: blue;
  font-size: xx-large;
}

.expr {
  margin: 0 auto;
}

label#expr {
  font-size: x-large;
}

.blinking {
  animation: blink 1s linear infinite;
  animation-fill-mode: none;
}

@keyframes blink{
  0%{color: rgba(0, 0, 0, 1);}
  50%{color: rgba(0, 0, 0, 0.1);}
  100%{color: rgba(0, 0, 0, 1);}
}

p.wrong {
  color: red;
  font-size: xx-large;
}

span.wrong {
  color: red;
  font-size: x-large;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.wheel {
  perspective: 500px;
  /* border: 1px solid #333; */
  margin: 50px;
}
.wheel .wheel-inner {
  position: relative;
  width: 180px;
  height: 320px;
  margin: 0;
  transform-style: preserve-3d;
  transition: all 1s;
}
.wheel .wheel-inner .wheel-segment {
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background-color: #c6ff89;
  font-size: large;
  transition: color 0.5s;
}

.wheel .wheel-inner .wheel-segment input {
  text-align: center;
  border: none;
}

.wheel .wheel-inner .wheel-segment input:disabled {
  color: black;
}

.wheel-inner .wheel-segment:nth-child(odd) {
  background-color: #94f8ff;
}

#default-version .tlabel {
  background-color: white;
}

/* Disable arrows for number input */
input[type='number'] {
  -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}