body {}

.card {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: sans-serif;
    text-align: center;
}

.module {
    margin: 5%;
}

.countdown {
    text-align: center;
}

.countdown__reset {
    text-align: center;
    font-size: 30px;
}

.countdown__time {
    font-size: 280px;
    display: inline-block;
    width: 80%;
    margin: 0 auto;
    position: relative;
    border-radius: 6px;
    color: #000000;
}

.countdown__time--orange {
    color: orange;
}

.countdown__time--red {
    color: red;
    animation: vibrate .5s 0s forwards;
}

$pixelPath: 4px;

@keyframes vibrate {
    0%     {left:-$pixelPath; right:-$pixelPath;}
    12.5%  {left:$pixelPath; right:0px;}
    25.0%  {left:-$pixelPath; right:$pixelPath;}
    37.5%  {left:0px; right:-$pixelPath;}
    50.0%  {left:0px; right:$pixelPath;}
    62.5%  {left:$pixelPath; right:-$pixelPath;}
    75.0%  {left:-$pixelPath; right:0;}
    87.5%  {left:$pixelPath; right:$pixelPath;}
    100%   {left:0px; right:$pixelPath;}
}

button {
    padding: 2% 6%;
    background-color: #31383e;
    color: #ffffff;
    font-size: 25%;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}

button:hover {
    background-color: #666666;
    transform:translateY(-1px);
}