@import url("https://fonts.googleapis.com/css?family=Roboto:700");

html:active, body:active {
  transition: 0s;
  border: solid 5px rgba(255, 255, 255, 0.1);
}

.infos {
  color: white;
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100;
}
.infos h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 40px;
  letter-spacing: 1px;
  line-height: 1.2;
}
.infos h3 {
  font-weight: 500;
  color: #FF5353;
}

.blocks .row {
  display: flex;
}
.blocks .block {
  -webkit-animation: comeOut 1s;
          animation: comeOut 1s;
  width: 100px;
  height: 100px;
  border: solid 1px rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.6s;
  tranisiton-delay: 0.2s;
  cursor: pointer;
  margin: 12px;
  color: white;
  font-weight: 100;
}
.blocks .block:active, .blocks .block.active {
  background-color: red;
  transition-duration: 0s;
}
.blocks .block.block1 {
  box-shadow: 0px 0px 35px rgba(255, 83, 83, 0.2) inset, 0px 0px 30px rgba(255, 83, 83, 0.2);
  background-color: transparent;
  border: solid 1px #ff6d6d;
  color: transparent;
}
.blocks .block.block1:hover {
  background-color: rgba(255, 83, 83, 0.3);
  box-shadow: 0px 0px 35px rgba(255, 83, 83, 0.2);
}
.blocks .block.block1:active, .blocks .block.block1.active {
  background-color: #FF5353;
  box-shadow: 0px 0px 35px #FF5353;
}
.blocks .block.block2 {
  box-shadow: 0px 0px 35px rgba(255, 196, 41, 0.2) inset, 0px 0px 30px rgba(255, 196, 41, 0.2);
  background-color: transparent;
  border: solid 1px #ffcb43;
  color: transparent;
}
.blocks .block.block2:hover {
  background-color: rgba(255, 196, 41, 0.3);
  box-shadow: 0px 0px 35px rgba(255, 196, 41, 0.2);
}
.blocks .block.block2:active, .blocks .block.block2.active {
  background-color: #FFC429;
  box-shadow: 0px 0px 35px #FFC429;
}
.blocks .block.block3 {
  box-shadow: 0px 0px 35px rgba(89, 128, 193, 0.2) inset, 0px 0px 30px rgba(89, 128, 193, 0.2);
  background-color: transparent;
  border: solid 1px #6c8ec8;
  color: transparent;
}
.blocks .block.block3:hover {
  background-color: rgba(89, 128, 193, 0.3);
  box-shadow: 0px 0px 35px rgba(89, 128, 193, 0.2);
}
.blocks .block.block3:active, .blocks .block.block3.active {
  background-color: #5980C1;
  box-shadow: 0px 0px 35px #5980C1;
}
.blocks .block.block4 {
  box-shadow: 0px 0px 35px rgba(251, 233, 183, 0.2) inset, 0px 0px 30px rgba(251, 233, 183, 0.2);
  background-color: transparent;
  border: solid 1px #fcf0cf;
  color: transparent;
}
.blocks .block.block4:hover {
  background-color: rgba(251, 233, 183, 0.3);
  box-shadow: 0px 0px 35px rgba(251, 233, 183, 0.2);
}
.blocks .block.block4:active, .blocks .block.block4.active {
  background-color: #FBE9B7;
  box-shadow: 0px 0px 35px #FBE9B7;
}

.inputStatus {
  margin-top: 10px;
}
.inputStatus .circle {
  width: 6px;
  height: 6px;
  display: inline-block;
  opacity: 0.3;
  background-color: white;
  border-radius: 100%;
  margin: 5px;
}
.inputStatus .circle.correct, .inputStatus .circle .wrong {
  opacity: 1;
}
.inputStatus.wrong .circle {
  background-color: #FF5353;
}
.inputStatus.correct .circle {
  background-color: #5980C1;
}