@font-face {
    font-family: "Oswald";
    src: url(include/Oswald-Medium.ttf) format("truetype");
}

.overlay-teams {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    /* background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
    color: white;
    font-family: "Oswald";
}

.overlay-gamepoints {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    display: flex; /* Enable flexbox layout */
    flex-direction: row; /* Align children in a row */
    justify-content: center; /* Center children horizontally */
    align-items: center; /* Center children vertically */
    font-family: "Oswald";
    color: white;
    margin-top: 5%;
    background-color: rgba(0,0,0,0.7);
}

/* This ensures that the .col divs with text are centered vertically */
.row.align-items-center {
    height: 100%; /* Set height to fill parent */
}

.row:not(:last-child) { /* Select all .row elements except the last one */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Slightly visible white border */
}

.team-image {
    max-width: 100%; /* Ensure the image is not larger than the container */
    height: auto; /* Maintain aspect ratio */
}

.timer {
    font-size: 1.5rem;
    padding: 0 0 0 0px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
    -webkit-text-stroke: 1px black; /* Stroke width and color */
}

.team-points-wrapper, .gamepoints-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team-points {
    display: inline-block; /* Needed for transform */
    font-size: 60px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
    -webkit-text-stroke: 1px black; /* Stroke width and color */
    animation-duration: 1s; /* Duration of the animation */
    animation-timing-function: ease; /* Smooth animation */
    transform-origin: center; /* Center the transformation */
}

.team-data {
    position: relative;
    text-align: center;
    color: white;
    padding: 0 0 0 0px;
}

.gamepoints-data {
    display: flex; /* Use flexbox to align content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-grow: 0; /* Prevent the element from growing */
    flex-shrink: 0; /* Prevent the element from shrinking */
    margin: 0 5px; /* Add some horizontal spacing */
}

.gamepoints {
    font-size: 60px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 1px black;
    animation-duration: 1s;
    animation-timing-function: ease;
    transform-origin: center;
    margin: 0; /* Remove margin to reduce space */
    padding: 0; /* Remove padding */
}

/* Add a specific class for colon separators if needed */
.colon-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px; /* Adjust margin for spacing */
    font-size: 60px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 1px black;
}

@keyframes zoomInShake {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.6) rotate(-15deg);
    }
    50% {
        transform: scale(1.6) rotate(30deg);
    }
    75% {
        transform: scale(1.6) rotate(-15deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.centered-box {
    font-family: "Oswald", sans-serif; /* Added a fallback font */
    font-size: 40px;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
    height: auto; /* Changed to auto */
    background-color: rgba(255, 255, 255, 1);
    color: black;
    text-align: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none; /* You might want to change this if you want the box to be visible initially */
    overflow: visible; /* Changed to visible */
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

.red-timer {
    color:red;
}