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

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

:root {
 font-size: 20px;
 font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}

.stoper__container {
 position: fixed;
 width: 90%;
 max-width: 1000px;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 padding: 5px;
 border-radius: 20px;
 background-color: #454e53;
 -webkit-box-shadow: 0px 16px 9px 10px rgba(246, 246, 137, 0.7);
         box-shadow: 0px 16px 9px 10px rgba(246, 246, 137, 0.7);
}

.stoper__title {
 margin: 10px;
 text-transform: uppercase;
 text-align: center;
 font-size: 4rem;
 color: #35509C;
 text-shadow: 2px 2px 4px yellow;
}

.stoper__title span {
 margin-right: 20px;
 margin-left: 20px;
}

.stoper__display {
 width: 95%;
 margin: 0 auto;
 border: 4px solid lightgray;
 border-radius: 10px;
 background-color: lightblue;
 font-size: 3rem;
 text-align: center;
}

.stoper__btnsSection {
 height: 30vh;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: space-evenly;
     -ms-flex-pack: space-evenly;
         justify-content: space-evenly;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin-top: 20px;
 margin-bottom: 20px;
}

.stoper__btn {
 -ms-flex-preferred-size: 45%;
     flex-basis: 45%;
 padding: 15px 5px;
 margin: 4px auto;
 -webkit-transform: 0.2s;
     -ms-transform: 0.2s;
         transform: 0.2s;
 border-radius: 5px;
 border: 1px solid white;
 -webkit-box-shadow: 0 0 1px 1px #38E26A;
         box-shadow: 0 0 1px 1px #38E26A;
 background-color: #2E2F39;
 color: #35509C;
 text-shadow: 1px 1px 2px yellow;
 font-size: 1rem;
 text-transform: uppercase;
 cursor: pointer;
}

.stoper__btn:hover {
 background-color: black;
 border-color: #2AB6FF;
 -webkit-box-shadow: 0 0 2px 2px #85c9ed;
         box-shadow: 0 0 2px 2px #85c9ed;
 color: white;
}

.stoper__btn span {
 margin-left: 15px;
}

#displayMean {
 text-align: center;
 font-size: 2rem;
 color: bisque;
}

@media(min-width:1024px) {
 .stoper__btnsSection {
  height: 15vh;
 }

 .stoper__btn {
  -ms-flex-preferred-size: 23%;
      flex-basis: 23%;
 }
}