body {
  background: #1B244A;
  margin: 0;
}

h2{
    display: block;
}

.container {
  display: flex;
  justify-content: center;   
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
}

.team-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;               
  margin-bottom: 2rem;
  margin: auto;
}

/* team labels */
.team-name {
  color: #EEEEEE;
  font-size: 3.25rem;
  margin: 0;                 
}

/* the black LED window */
.score-display{
  background-color: #000;
  width: 190px;              
  height: 140px;
  border-radius: 10px;       
  display: flex;            
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  border: 1px solid #9AABD8;
  
}

/* the digits themselves */
.score-display > span {
  display: block;            
  font-family: "Cursed Timer ULiL", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 90px;
  line-height: 1;            
  color: #F94F6D;
}

/* buttons row */
.score-options{
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* buttons */
.score-modifier-btn{
  width: 45px;
  height: 45px;
  border: 2px solid #9AABD8;
  background: #1B244A;
  color: #9AABD8;
  font-family: "Cursed Timer ULiL", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  border-radius: 6px;
  cursor: pointer;
}

/* simple mobile downscale */
@media (max-width: 600px){
  .team-name{ font-size: 2.2rem; }
  .score-display{ width: 160px; height: 120px; }
  .score-display > span{ font-size: 72px; }
  .score-modifier-btn{ width: 40px; height: 40px; font-size: 16px; }
  .container{ gap: 1.25rem; }
}