*{box-sizing: border-box;}

body{
  min-height:840px;
  width:100vw;
  background-color: slategray;
  /* color: darkred; */
  display:flex;
  flex-direction:column;
  justify-content: center; align-items: center;
}

button:active{
  background-color: darkolivegreen;

}
.uppersection{
  display:flex;
  justify-content: center; align-items: center;
  border: 2px dashed orange;
  background-color: rgb(149, 170, 191);
  /* background-color: bisque; */
}

.midsection{
  padding:0;
  margin: 0;
  display:flex; 
  justify-content: space-between; 
  align-items: center;
  
}
p{margin:15px; font-size:1.2rem; color: white; text-shadow: 2px 1px 3px black;}
button{
  margin:15px 5px;    padding: 5px 15px;
  background-color: antiquewhite;
  /* height: 40px; */
  font-size:1.1rem;
  box-shadow: 4px 4px 8px black;
}  
span{
  background-color: whitesmoke; 
  font-weight: 700;
  padding: 0 10px;
  color: black;
  text-shadow:none;
}

.goalBox{
  width: 50px; 
  height: 50px;
  background-color: black;
  border: 3px solid black;
}

#goal{
  width: 155px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  justify-items:center;
  
  margin: 15px;
  gap: 1px;
}

.box{
  min-width:40px; 
  min-height:40px;
  background-color: black;
  border: 2px solid white;
}

#cntnr{
  width: 350px;
  height: 350px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  /* gap: 3px; */
  /* grid-template-columns: 50px 50px 50px 50px 50px; */
  /* grid-template-rows: 5; */
}

#b0{background-color: black;}
#b5,#b10,#b15,#b20{background-color: white;}
#b1,#b2,#b3,#b4{background-color: red;}
#b6,#b7,#b8,#b9{background-color: orange;}
#b11,#b12,#b13,#b14{background-color: yellow;}
#b16,#b17,#b18,#b19{background-color: green;}
#b21,#b22,#b23,#b24{background-color: blue;}