body {
    margin: 0;
}
header {
    background-color:#00509E;
    font-family:Fredoka ;
    color: white;
    padding: min(1.5em,8%);
}
.Study-Material {
  display: flex;
  justify-content: flex-end;
}
.hero {
    background-color:#FFD966;
    padding: min(3em,8%);
    font-size:3em;
    font-family: Fredoka;
}

.btn-start {
    background-color: #00509E;
    color: white;
    padding: min(0.5em,8%);
    font-family: "lato";
    border-radius:6px;
    border: none;
    font-size: 1rem;
    border-color: black;
}

.bg {
  background-color: (#FFD966);
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: flex-start; /* horizontal */
  align-items: center;     /* vertical */
}
.bg img{
  max-width: 100%;
  height: auto ;
}

/* Media query for small screens */
@media (max-width: 768px) {
  .bg {
    justify-content: center; /* center on small screens */
  }

  .bg {
    max-width : 100%; /* bigger on small screens for better visibility */
  }
}

.footer {
    font-size:2em;
    padding: min(2m,8%);
    font-family: Fredoka;
    text-align: center;
}

.user {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Title left, SVG right */
  align-items: center;
  width: 350px;
}
@media screen and (max-width: 768px) {
  .user {
    justify-content: center; /* center on small screens */
  }
}
.idea {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Title left, SVG right */
  align-items: center;
  width: 300px;
}
@media screen and (max-width: 768px) {
 .idea {
    justify-content: center; /* center on small screens */
  }
}

.Leaderboard {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Title left, SVG right */
  align-items: center;
  width: 400px;
}
@media screen and (max-width: 768px) {
.Leaderboard {
    justify-content: center; /* center on small screens */
  }
}

a {
  color: white ;
}