body {
    background-color: #eceff1;
}

.container {
    background-color: mintcream;
    padding: 1rem;
    width: 70%;
    margin: auto;
    color: rgb(25, 73, 76);
    border-radius: 1rem;
    margin-top: 2rem;
}

.container h1 {
    text-align: center;
    text-shadow: dimgray;
    font-family: "Oxanium";
    
}

.scoreboard {
    background-color: rgb(195, 201, 207);
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
}

.team {
    padding: 3rem 5rem;
}


.team span {
    font-family: 'Orbitron';
    font-weight: 500;
    font-size: 6em;
    cursor: pointer;
    
}

.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 3rem 1rem 1rem;
}


.controls button {
    background-color: #eceff1;
    border: none;
    cursor: pointer;
}

.controls #reset {
    padding: 1rem 3rem;
    border-radius: 9999px;
    margin-top: 0.5rem;
}


.controls .plusminus {
    padding: 1rem 1rem;
}


.controls button:hover {
    background-color: #d7dbdf;;
}

.controls button:active {
    background-color: #bdc0c4;;
}

/*
This section is stripped from a Stack Overflow thread I found
https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css 

Here is another one from it_qna
https://itqna.net/questions/5457/style-input-type-number-change-arrows
*/

.controls input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.controls input[type=number]::-webkit-inner-spin-button,
.controls input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


.btn {
    display: flex;
}

label {
    margin: 0rem 1rem 0rem 2rem;
    font-family: "Oxanium";
}

.btn #plus {
    border-radius: 0px 9999px 9999px 0px
}
.team {
    text-align: center;
}

.team h3 {
    cursor: pointer;
    font-family: "Oxanium";
}

#max-score {
    /* padding-left: 3rem; */
    border-radius: 9999px 0px 0px 9999px;
    padding: 1rem 1rem;
    border: none;
    background-color: #eceff1;
}