/* General body style */
body {
  margin: 0;
  padding: 0;
  height: 100vh; /* full viewport height */
  width: 100vw;  /* full viewport width */
  
  /* Background SVG */
  background-image: url('images/background.svg'); /* path to your SVG */
  background-repeat: no-repeat;   /* prevent tiling */
  background-size: cover;         /* scale to cover entire screen */
  background-position: center;    /* center the image */
  
  /* Optional: keep content readable with overlay */
  position: relative;
}



/* Container for centered content */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

/* Logo */
.logo {
  width: 200px;
  margin-top: 50px;
}

/* Make nav a top-right fixed menu */
nav {
  position: absolute;    /* or fixed if you want it to stay on scroll */
  top: 10px;             /* distance from top */
  right: 10px;           /* distance from right */
  display: flex;         /* arrange buttons in a row */
  gap: 10px;             /* space between buttons */
  z-index: 100;          /* ensure it is on top of background */
}

/* Style for buttons inside nav */
nav button {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

nav button:hover {
  background-color: #005f99;
}


/* Popular courses section */
#popularCourses {
  margin-top: 30px;
}

#popularCourses h2 {
  margin-bottom: 10px;
}

#popularCourses button {
  background-color: #00aaff;
  border: none;
  color: white;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#popularCourses button:hover {
  background-color: #bad677;
}

/* Multi-step registration form */
.step {
  display: none;
  margin-top: 30px;
  text-align: left;
}

.step.active {
  display: block;
}

/* Form inputs */
input, select {
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  max-width: 400px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 14px;
}

/* Buttons inside the form */
.buttons {
  margin-top: 20px;
  text-align: center;
}

.buttons button {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 10px 18px;
  margin: 5px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.buttons button:hover {
  background-color: #005f99;
}

/* Review step */
#reviewData {
  background-color: #e6f2ff;
  border: 1px solid #99ccee;
  padding: 15px;
  border-radius: 5px;
  white-space: pre-wrap;
  font-family: monospace;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
  nav button, #popularCourses button, .buttons button {
    width: 90%;
    margin: 5px auto;
  }

  input, select {
    width: 90%;
  }
}