* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

body {
 background-image: url('red-brick-wall-3541092_640.jpg');
 height: 100vh;
}

:root {
 font-size: 15px;
}

.count__container {
 margin: 100px auto;
 width: 95%;
 max-width: 700px;
 padding: 10px;
 background-color: rgba(0, 0, 0, 0.7);
 border-radius: 10px;
 -webkit-box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.7);
         box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.7);
 color: white;
 text-align: center;
 overflow: hidden;
}

.count__container.active {
 -webkit-filter: blur(2px);
         filter: blur(2px);
}

.count__h {
 margin: 10px auto;
}

.count__stoper {
 font-size: 1.2rem;
}

.count__resultDisplay {
 -webkit-transition: 0.9s;
 -o-transition: 0.9s;
 transition: 0.9s;
}

.count__form {
 margin: 20px auto;
}

.count__label,
.count__input {
 display: block;
 margin: 5px auto;
 padding: 5px auto;
 border-radius: 10px;
 font-size: 1.7rem;
 text-align: center;
}

.count__input:focus {
 outline: none;
 border: 2px solid green;
 -webkit-box-shadow: 0 1px 1px 2px yellow;
         box-shadow: 0 1px 1px 2px yellow;
}

.count__label {
 text-shadow: 1px 1px yellow;
 color: aqua
}

.count__btn {
 font-size: 1.2rem;
 margin: 20px 5px;
 height: 50px;
 padding: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 0 4px 2px yellow;
         box-shadow: 0 0 4px 2px yellow;
 -webkit-transition: 0.2s;
 -o-transition: 0.2s;
 transition: 0.2s;
 cursor: pointer;
}

.count__btn:hover {
 -webkit-box-shadow: 0 0 4px 2px lime;
         box-shadow: 0 0 4px 2px lime;
 background-color: black;
 color: yellow;
}