body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
  background-color: #333333;
}
h1 {
  font-size: 3em;
  margin-bottom: 20px;
  font-weight: bolder;
  color: #ffffff;
}
h2 {
  font-size: 2em;
  margin-bottom: 10px;
  font-weight: bold;
  color: #ffffff;
}
h3 {
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: bold;
  color: #ffffff;
}
#time {
  font-size: 2em;
  margin-bottom: 10px;
  color: #ffffff;
}

ul {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
  color: #ffffff;
}
li.Purple {
  background-image: url('./Splits textures/greensplit.png');
  background-color: #00ff2f;
  padding: 4px;
  border-radius: 4px;
}
li.Red {
  background-image: url('./Splits textures/redsplit.png');
  background-color: #ff0000;
  padding: 4px;
  border-radius: 4px;
}
li.Grey {
  background-color: #cdcdcd;
  padding: 4px;
  border-radius: 4px;
}
#bestRunDisplay{
color: #ffffff;
}

.best-run {
  font-weight: bold;
  color: rgb(0, 196, 0);
}

@media all and (max-width: 365px) {  
#controls  {
flex-direction: column;
gap: 0.5rem;

}
}  
#controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;

}
#bottomcontrols {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
button {
background-color: rgb(117, 195, 255);
font-weight: bold;
font-size: 1.1rem;
border-radius: 0.2rem;
/* width: calc(33% -  2rem); */
border: none;
color: rgb(15, 52, 91);
padding: 1rem;
text-align: center;
cursor: pointer;
}

main {
max-width: 600px;
padding: 2rem;
}
.bottombutton {
width: 40%;
background-color: rgb(117, 195, 255);
color: rgb(15, 52, 91);
}
#currentRunList {
> li {
margin-bottom: 0.2rem;
} 
}

.card {
background-color: #4a4a4a;
padding: 0.7rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
> h3 { /*nested child to add remove internal padding from h3*/
margin: 0;
}
> ul {
margin: 0;
}
}
/* Make the body and html take full height */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* Ensure the body is a block element */
body {
  display: block;
  margin: 0;
  padding: 0;
}


main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: 600px;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
}

/* Center the bottom button horizontally */
#linkToDemo {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 0;
}

#linkToDemo button {
  max-width: 300px;
  width: 100%;
}