body{
background-color: #13293b;
color: white;

}
h2 {
    text-align: center;
    margin-top: 15px;	
}
#solution{   
    text-align: center;
    margin-top: 25px;
}
.box{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 1px;
    cursor: pointer;
    transition: all 0.5s;
}

#box-container {
    text-align: center;
}

.box.big{
    box-shadow: 0px 0px 21px 6px rgba(255,0,0,0.9);
    animation: 1s linear 0s infinite alternate big-small;
}

@media screen and (max-device-width: 431px) {
  .box {
    width: 40px;
    height: 40px;
  }
  
}

@media screen and (min-device-width: 431px) and (max-device-width: 1024px) {
  .box {
    width: 35px;
    height: 35px;
  }
}

@keyframes big-small {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}
.time,
.points{
    position: fixed;
    color:red;
    left:10dpx;
    top:-15px;
    padding:3px;
    opacity: 80%;
    background-color: #13293b;
}
.time{
    right:10px;
    left: unset;
}

.shake {
    animation: shake 0.5s;
    color: red;
}

@keyframes shake {
    0% { transform: translateY(0); }
    20% { transform: translateY(-5px); }
    40% { transform: translateY(5px); }
    60% { transform: translateY(-5px); }
    80% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

.shake-wrong {
    animation: shakeWrong 0.5s;
    color: red;
}

@keyframes shakeWrong {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}