@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Gruppo&family=Rajdhani&display=swap');


html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Amatic SC', cursive;
  background-color: lightslategray;
}


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto auto;
  flex-wrap: wrap; /* Standardwert = nowrap */
}



.grid-container-lastrow{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
  flex-wrap: wrap; /* Standardwert = nowrap */
}

#wrapper {
  min-height: 100%;
  position: relative;
}



body {
  padding: 10px;
  padding-bottom: 60px; /* Height of the footer */
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 40px; /* Height of the footer */
  text-align: center;
}


.container {
  display: block;
  text-align: center;
  justify-content: center;
  justify-items: center;
  font-family: 'Gruppo', cursive;
  font-weight: bold;
  font-size: 20px;
  padding: 25px;
  background-color: #cccccc;
  border-radius: 15px;

}


h1 {
  text-align: center;
  font-size: 50px;
}



/*flex-container*/

.monitor {
  
  display: block;
  background-color: #b4b4b400;
  box-shadow: inset 0px 0px 50px #868686;
  border-radius: 15px;
  padding:30px;
  margin-bottom:20px;
  height: 20px;

 
}


.hero-block {
  display:flex;

  text-align: center;
  justify-content: center;
  justify-items: center;
  margin-top:25px;
  margin-bottom:25px;
}

.container-block {
  display: flex;
  text-align: center;
  justify-content: center;
  justify-items: center;
  font-family: 'Gruppo', cursive;
  font-weight: bold;
  font-size: 20px;
  padding: 20px;
}



.circle{
  margin:5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;

}

.circle:hover{
  box-shadow: inset 0px 0px 5px 0px black;
  cursor:pointer;
}


.big{
  margin:5px;
  width: 110px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid black;

}

.block{
  margin:5px;
  border: 1px solid black;
}

.block:hover{
  box-shadow: inset 0px 0px 5px 0px black;
  cursor:pointer;
}


#equalButton{
 background-color: black;
 color:white;
}

#equalButton:hover{

  box-shadow: inset 0px 0px 5px 0px white;
  cursor:pointer;
  border: 1px solid white;
 }