html,body {
    height: 100%;
	overflow: hidden; /* hide vertical scroll bar */
}
body {
    background: #0f3854;
    background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
    background-size: 100%;
}
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 29%; 
    transform: translate(-50%, -50%);
	width: 90%;
    color: #daf6ff;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
	/* border: 1px solid; */
}

#clock .mydate {
        letter-spacing: 0.1em;
        /* font-size: 24px; */
        font-size: 5vw;
}

#clock .mydelta {
    letter-spacing: 0.05em;
    font-size: 6.75vw; /* Main text size */
    font-weight: bold;
    padding: 10px 0;
    color: #ff0000;
    line-height: 1.2; /* Adjust spacing between lines */
}

#clock .bonus {
    font-size: 5vw; /* 25% smaller than 6.75vw */
    font-weight: bold;
    color: #ff0000;
    margin-bottom: 5px; /* Add spacing below "Bonus Round:" */
}


#clock .mytext {
        letter-spacing: 0.1em;
        /* font-size: 24px; */
        font-size: 5vw;
        padding: 5px 0 0;
}

#myprogress {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    background-color: #ddd;
}

#myprogress .mybar {
    position: relative;
    height: 30px;
    background-color: #04AA6D; /* Green */
}

#myprogress .overtime-bar {
    position: absolute;
    right: 0; /* Align to the right end */
    height: 30px;
    background-color: #FF6347; /* Red */
}


#mypercentage {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
    position: absolute;
	left: 50%;
    top: 67%;
	transform: translate(-50%, -50%);
    width: 70%;

    /* color: #daf6ff;
    border: 1px solid; */
}

#mypercentage .mynumber {
    letter-spacing: 0.05em;
    /* font-size: 36px; */
    font-size: 6vw;
	font-weight: bold;
    padding: 20px 0;
	color: #ff0000;
	/* background-color: #0f3854; */
}

#mypercentage .elapsed-time {
    letter-spacing: 0.05em;
    font-size: 4vw; /* Slightly smaller than mynumber */
    font-weight: bold;
    padding: 10px 0;
    color: #ff0000;
}

#mypercentage .still-going {
    letter-spacing: 0.05em;
    font-size: 3vw; /* Slightly smaller than mynumber */
    font-weight: bold;
    padding: 10px 0;
    color: #ff0000;
}

#myprogress .mybar {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #04AA6D; /* Green */
}

#myprogress .overtime-bar {
  position: absolute;
  top: 0;
  height: 30px;
  background-color: #FF6347; /* Red */
}

#mypercentage .mynumber {
    font-size: 5vw; /* Slightly smaller */
    margin-top: 10px; /* Add spacing */
}