:root {
  --font-fredoka: "Fredoka", serif;
  --font-nunito: "Nunito Sans", serif;
  --dark-blue: #1d3557;
  --off-white: #f1faee;
  --dark-grey: #2a2a2a;
  --light-blue: #0471a6;
  --yellow: #faa916;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-nunito);
}

html {
  font-size: 62.5%;
  line-height: 1.6;
  background-color: var(--dark-blue);
  color: var(--off-white);
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#root {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 480px) {
  /* Adjust breakpoint as needed */
  html {
    font-size: 56.25%; /* 1rem = 9px (16px * 0.5625) */
  }
}

/* Medium screens (e.g., tablets) */
@media (min-width: 768px) {
  html {
    font-size: 62.5%; /* 1rem = 10px (16px * 0.625) -  The standard base */
  }
}

/* Large screens (e.g., desktops) */
@media (min-width: 1024px) {
  html {
    font-size: 68.75%; /* 1rem = 11px (16px * 0.6875) - Slightly larger for readability */
  }
}

/* Extra-large screens */
@media (min-width: 1200px) {
  html {
    font-size: 75%; /* 1rem = 12px (16px * 0.75) */
  }
}