header{
  background-color: #394655;
  padding: 1rem 0;
}

header img{
height: 5rem;
}

body{
  background-color: rgb(240,240,240);
  margin: 0;
  font-family: sans-serif;
}

h1{
margin-top: 0;
}

input{
	padding: 1rem;
}


#setup-box{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#score-container div > div{
  width: 100%;
  text-align: center;
  align-content: center
}

#away-label{
  margin-left: 1rem;
}

#team-edit-button{
  margin-left: 1rem;
}

label{
  padding-right: 1rem;
}


.buttons{
  text-transform: uppercase;
  border: none;
  padding: 1rem;
  display: inline-block;
  cursor: pointer;
  background-color: #eeeeee;
}


.home-team-alternaters{
  background-color: #6691C6;
}


.active-button{
  background-color: #6691C6;
  color: white;
}

.active-button svg{
  fill: white;
}


.buttons:hover{
  background-color: rgb(220,220,220);
}


#score-time-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.modules{
  background-color: white;
  padding: 2rem;
  margin: 1rem;
  margin-bottom: 0;
}

.scores{
  font-size: 16rem;
  line-height: 1;
}

#score-container{
  grid-column: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
}

#score-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.team-labels{
  font-size: 2rem;
}

#home-team-label{
  grid-column: 1;
  grid-row: 1;
  background-color: #6691C6;
  color: white;
}

#away-team-label{
  grid-column: 2;
  grid-row: 1;
  background-color: #eeeeee;
  color: #6691C6;
}

#home-team-score{
  grid-column: 1;
  grid-row: 2;
  background-color: #6691C6;
  color: white;
}

#away-team-score{
  grid-column: 2;
  grid-row: 2;
  background-color: #eeeeee;
  color: #6691C6;
}

.alternater-containers{
  display: flex;
  grid-template-columns: 1fr 1fr;
  grid-row: 3;
}

#home-team-alternater-container{
  grid-column: 1;
  background-color: #6691C6;
  color: white;
}
#away-team-alternater-container{
  grid-column: 2;
  background-color: #eeeeee;
  color: #6691C6;
}

.score-alternaters{
  font-size: 2rem;
}

#start-pause-container{
display: flex;
justify-content: space-around;
margin: 0;
}



#time-container{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  background-color: white;
}




#time-box{
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

#time-box h1{
 font-size: 7rem;
  margin: 0;
}
  
.start-pause-buttons{
width: 8rem;
height: 4rem;
padding: 1rem;
}

.start-pause-buttons svg{
max-height: 100%;
}
  
#timebox-bottom-strip{
  display: flex;
  justify-content: space-between;
}

#half-selector-container{
  width: 100%;
  text-align: left;
}

#half-selector-switch{
  display: flex;
}

.half-selector-buttons{
  padding: 1rem;
}

#time-reset-container{
  align-content: end;
}

#time-reset-button{
  padding: 1rem;
}


#login-container{
  display: flex;
}


.color-selectors{
    padding: 0;
    appearance: none;
    inline-size: 28px;
    block-size: 50px;
    border-width: 0;}

#setup-audio-container{
  display: flex;
  justify-content: space-between;
}



#bottom-strip-flexbox{
  display: flex;
  justify-content: space-between;
}



@media only screen and (max-width: 1200px) {

}



@media only screen and (max-width: 861px) {
  #score-time-container{
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .modules{
    margin: 0;
  }
    
  #time-container{
    grid-column: 1;
    grid-row: 2;
  }


}