body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#timer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#timer {
font-size: 12em;
/* font-weight: bold; */
color: white;
margin-bottom: 0;
line-height: 1;
}
#timer-button-container {
display: flex; /* Align buttons horizontally */
gap: 0.5em; /* Space between buttons */
}
#timer-section button {
background-color: lightgray;
color: black;
padding: 0.15em 1.2em;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
/* margin-bottom: 0.1em; */
}
#timer-section button:hover {
background-color: gray;
}

/* Round Button Styles */
.round-button {
background-color: #2196F3;
color: white;
padding: 0.4em 1.5em;
font-size: 1.5em;
font-weight: bold;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.01em 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
min-width: 150px;
}

.round-button:hover {
background-color: #1976D2;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.round-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


#overall-score {
display: flex; /* Aligns the elements horizontally */
align-items: center; /* Vertically aligns elements */
justify-content: center; /* Centers the elements */
font-size: 15em;
}
.score-box {
display: flex;
align-items: center;
justify-content: center;
padding: 0em 0.5em;
}
#blueScore #overallBlue {
color: rgb(103, 164, 255);
}
#tieScore #overallTie {
color: gray;
}
#redScore #overallRed {
color: red;
}
.score-bar {
/* font-size: 2em; */
color: white; /* White color for the divider */
/* margin: 0 1em; */
}


#warnings {
display: flex; /* Aligns the warning boxes horizontally */
justify-content: center; /* Centers the content horizontally */
align-items: center; /* Centers the content vertically */
font-size: 1.8em;
margin-top: 1.0em;
}
.warning-container {
display: flex; /* Aligns the warning boxes horizontally */
align-items: center;
}
.warning-box {
display: flex;
align-items: center;
margin: 0 2em;
}
.warning-box p {
margin: 0;
font-weight: bold;
}
.warning-increment, .warning-decrement {
padding: 0.5em 1em;
font-size: 0.8em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 0.3em;
}
.warning-increment {
color: white;
background-color: rgb(103, 164, 255); /* Blue for the "Warning" button for blue side */
}
.warning-decrement {
color: white;
background-color: gray; /* Gray for the "-" button */
}
#redWarningsBox .warning-increment {
background-color: red; /* Red for the "Warning" button for red side */
}
#blueWarningsBox .warning-increment {
background-color: rgb(103, 164, 255);
}
#redWarningsBox .warning-increment:hover {
background-color: lightcoral;
}
#blueWarningsBox .warning-increment:hover {
background-color: lightskyblue;
}
.warning-increment:hover {
background-color: lightgray; /* Default hover for other warning buttons */
}
.warning-decrement:hover {
background-color: darkgray;
}
#blueWarnings {
font-size: 3em;
font-weight: bold;
color: rgb(103, 164, 255);
text-align: center;
padding-left: 0.2em;
}
#redWarnings {
font-size: 3em;
font-weight: bold;
color: red;
text-align: center;
padding-right: 0.2em;
}


#fouls {
display: flex; /* Aligns the foul boxes horizontally */
justify-content: center; /* Centers the content horizontally */
align-items: center; /* Centers the content vertically */
font-size: 1.0em;
margin-top: 0.5em;
margin-bottom: 3.0em;
}
.foul-container {
display: flex; /* Aligns the foul boxes horizontally */
align-items: center;
}
.foul-box {
display: flex;
align-items: center;
margin: 0 3em;
}
.foul-box p {
margin: 0;
font-weight: bold;
}
.foul-increment, .foul-decrement {
padding: 0.5em 1em;
font-size: 1.0em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 0.5em;
}
.foul-increment {
color: white;
background-color: red; /* Red for the "Foul" button for red side */
}
.foul-decrement {
color: white;
background-color: gray; /* Gray for the "-" button */
}
#redFoulsBox .foul-increment {
background-color: red; /* Red for the "Foul" button for red side */
}
#blueFoulsBox .foul-increment {
background-color: rgb(103, 164, 255); /* Blue for the "Foul" button for blue side */
}
#redFoulsBox .foul-increment:hover {
background-color: lightcoral; /* Light red for the red button */
}
#blueFoulsBox .foul-increment:hover {
background-color: lightskyblue; /* Light blue for the blue button */
}
.foul-increment:hover {
background-color: lightgray; /* Default hover for other foul buttons */
}
.foul-decrement:hover {
background-color: darkgray;
}
#blueFouls {
font-size: 4em;
font-weight: bold;
color: rgb(103, 164, 255);
text-align: center;
padding-left: 0.2em;
}
#redFouls {
font-size: 4em;
font-weight: bold;
color: red;
text-align: center;
padding-right: 0.2em;
}


#scores {
display: flex;
flex-wrap: wrap;  /* Allow wrapping if the screen is too small */
gap: 30px;  /* Add spacing between each score block */
justify-content: center;  /* Center the scores on the page */
margin-top: 1.0em;
}
#scores div {
/* border: 1px solid #ccc; */
/* padding: 10px; */
/* border-radius: 5px; */
text-align: center;
/* background-color: #f9f9f9; */
width: 300px;  /* Adjust width for uniformity */
}
.corner-name {
font-weight: bold;
}
.corner-number {
margin-left: 1px;
}
.blue-text {
color: rgb(103, 164, 255); /* Set the text color to blue */
font-size: 2.0em;
}
.red-text {
color: red; /* Set the text color to red */
font-size: 2.0em;
}
  

#reset-section {
text-align: center; /* Center the reset section */
margin-top: 2em; /* Space above the reset button */
}
#resetAll {
padding: 0.5em 1em; /* Adjust the padding for top/bottom and left/right */
font-size: 0.8em; /* Adjust the font size */
font-weight: bold; /* Make the text bold */
background-color: lightgray; /* Set background color */
color: black; /* Set text color to white */
border: none; /* Remove default border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change cursor to pointer on hover */
transition: background-color 0.3s ease; /* Add hover effect */
}
#resetAll:hover {
background-color: gray; /* Darker red on hover */
}

/* Injury Timer Overlay Styles */
#injury-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

#injury-timer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgba(34, 34, 34, 0.01);
padding: 2em;
border-radius: 10px;
border: 3px solid rgba(255, 255, 255, 0.01);
backdrop-filter: blur(5px);
}

#injury-timer-section h2 {
color: #ff6b6b;
font-size: 2em;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#injury-timer {
font-size: 7em;
color: #ff6b6b;
cursor: pointer;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#injury-timer-button-container {
display: flex;
gap: 1em;
}

#injury-timer-section button {
background-color: #ff6b6b;
color: white;
padding: 0.7em 2em;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: bold;
}

#injury-timer-section button:hover {
background-color: #ff5252;
}

#injury-close {
background-color: #666 !important;
}

#injury-close:hover {
background-color: #555 !important;
}

#injuryButton {
padding: 0.5em 1em;
font-size: 0.8em;
font-weight: bold;
background-color: #ff6b6b;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-left: 0.5em;
}

#injuryButton:hover {
background-color: #ff5252;
}

/* Intermission Timer Overlay Styles */
#intermission-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}

#intermission-timer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: rgba(34, 34, 34, 0.01);
padding: 2em;
border-radius: 10px;
border: 3px solid rgba(255, 255, 255, 0.01);
backdrop-filter: blur(5px);
}

#intermission-timer-section h2 {
color: #595a01;
font-size: 2em;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#intermission-timer {
font-size: 7em;
color: #595a01;
cursor: pointer;
margin-bottom: 0.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#intermission-timer-button-container {
display: flex;
gap: 1em;
}

#intermission-timer-section button {
background-color: #595a01;
color: white;
padding: 0.7em 2em;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: bold;
}

#intermission-timer-section button:hover {
background-color: #595a01;
}

#intermission-close {
background-color: #666 !important;
}

#intermission-close:hover {
background-color: #555 !important;
}

#timer-section #intermissionButton {
background-color: #595a01;
color: white;
padding: 0.15em 0.8em;
font-size: 1em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#timer-section #intermissionButton:hover {
background-color: #595a01;
}