:root {
    --text-size-big: 7rem;
    --radius: 20px;
}

@font-face {
    font-family: 'NewSpirit';
    src: url('fonts/New Spirit font family/fonnts.com-New-Spirit-.otf') format("woff");
    /*font-weight: normal;*/ /* Specify font weight if applicable */
    /*font-style: normal;*/  /* Specify font style if applicable */
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: linear-gradient(to right bottom, #afc45a, rgb(98, 120, 14));*/
	background-color: #F8F8F5;
}

#blurb {
	font-size: 2.5rem;
    text-align: center;
    font-family: 'NewSpirit', serif;
}

.CasesTodayHeader {
    font-family: 'NewSpirit', serif;
    font-size: var(--text-size-big);
	color: #83B241;
}

.KidsNumbers {
    font-family: 'NewSpirit', serif;
    font-size: 8rem;
}

.mainnumber {
    display: flex;
    flex-direction: column;
    padding: 25px 15px 20px 15px;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
    border-radius: var(--radius);
    background-color: #F8F8F5;
    width: 90%;
    margin: auto;
    align-items: center;
}

#logo {
    max-width: 20%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 30px;
	padding: 1%;
	background-color: #F8F8F5;
}

.firefox-filter {
	filter: brightness(0.75) contrast(1.9);
    /*filter: url(#darken-green);*/
}
.hasborder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*max-width: 80%;*/
	height: 80%;
    margin: auto;
    min-width: 650px;
    border-radius: var(--radius);
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
	transform: translateY(-15%); /* Adjust the value as needed */
	/*background-color: rgba(255, 255, 255, 0.8);*/
	padding: 3% 0 3% 0;

}


/**** Media queries ****/


@media only screen and (orientation: landscape) {
    .CasesTodayHeader {
        font-size: 8vw; /* Adjusts to viewport width */
    }
    .KidsNumbers {
        font-size: 8vw; /* Scales for responsiveness */
    }
    #logo {
        max-width: 30vw; /* Keeps the logo proportional */
		/*margin-bottom: 0.6vh;*/
		transform: translateY(10%);
    }
    .hasborder {
        transform: translateY(0); /* Keeps content visible */
    }
    .mainnumber {
        /*margin-top: 2vh;*/ /* Uses viewport height for dynamic spacing */
        margin-bottom: 2vh;
        width: 80vw; /* Ensures element scales */
		padding: 10px 15px 20px 15px;
		transform: translateY(-4); /* Keeps content visible */
    }
	#blurb {
		font-size: 3vw;
	}
    body, html {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevents horizontal scrolling */
        height: 100dvh; /* Device-specific viewport height */
        max-height: 100dvh; /* Prevents elements from exceeding the visible area */
    }
}



@media only screen and (orientation: portrait) {
    .CasesTodayHeader {
        font-size: 14vw; /* Use viewport width for adaptability */
    }
    .KidsNumbers {
        font-size: 14vw; /* Relative size for varying screen widths */
		
    }
	.tbl {
		margin-bottom: 18px;
	}
    #logo {
        max-width: 100vw; /* Increase max width to allow the logo to grow */
        width: 60vw; /* Set explicit width to make the logo larger */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto; /* Center the logo */
		transform: translateY(8%);
    }
    .hasborder {
        transform: translateY(-10%); /* Adjust for visual balance */
    }
    .mainnumber {
        margin-top: 8vh; /* Relative to viewport height for consistency */
        margin-bottom: 2vh;
		margin-left: 1.5vw;
		margin-right: 1.5vw;
		height: 30vh;
		padding: 25px 15px 20px 15px;
		transform: translateY(-1%);
    }
    br {
        display: none; /* Retain to remove unnecessary line breaks */
    }
    body, html {
        margin: 0;
        padding: 0.5vh 0 0 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
	#blurb {
		font-size: 6vw;
		transform: translateY(16%);
	}
}