body {
  font-family: sans-serif;
  margin: 0; /* Remove default margin */
  background-color: #f5f5f5;
}

header {
  background-color: #333; 
  padding: 10px;
}

h1 {
  text-align: center;
  font-size: 24px;
  color: #fff; /*  visibility on dark background: Exp: DarkReader */
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 15px;
  box-sizing: border-box;
}


button[type="submit"] {
  height: 5%;
  width: 100%; /* Take full width of its container */
  max-width: 600px; /* Set a maximum width for larger screens */
  background-color: black; 
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
  font-weight:600;
}

@media (max-width: 575px) {
  form {
      margin: 10px auto; /* Reduce margin for smaller screens */
  }
}
button[type="submit"]:hover {
  background-image: linear-gradient(to right top, #2c8ac6, #2c8dc8, #2d90ca, #2d93cc, #2e96ce);
  /*background-image: linear-gradient(to left, #F2AC00, #2E96CE); /* Gradient on hover */
}

form {
  width: 500;
  margin: 20px auto; /* consistent spacing */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.dastable{
  width: fit-content;
  margin: 20px auto; /* consistent spacing */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  overflow-x: auto; 

}

label.required:after {
  content: "*";
  color: red;
}

img{
  padding: 20px;
  
}
h2 {
  text-align: center;
  justify-content: center; 
  align-self:center ;   
}
p {
  text-align: center;
  font-size: medium;
  font-weight: bold;
  color: lightgreen;
}
@media (max-width: 768px) { /* Target tablets and smaller screens */
  body {
    font-size: 14px;
  }

  form {
    width: 90%; /* Scale form width for smaller screens */
  }

  h1 {
    font-size: 20px; 
  }

  button[type="submit"] {
    max-width: 750px;
    padding: 10px 15px;
  }
}

@media (max-width: 575px) { /* Target mobile phones */
  form {
    width: 100%; /* Full width on mobile */
    margin: 10px auto; /* Reduce margin */
  }
  img{
      width: 120px;
  }
  .admin{
      width: auto;
  }
  button[type="submit"] {
      max-width: 500px;
      padding: 10px 15px; /
    }
  h1 {
    font-size: 18px;
  }
}
.admin{
  text-align: center;
  font-weight: bolder;
  justify-content: center; 
  align-self:center ;   
  max-width: fit-content;
  border: #333;
  padding: 20px;
  border-radius: 5%;
  color: black;
}
#coursesTable {
  border-collapse: collapse; /* Remove extra spacing between cells */
  width: 100%; /* Ensure full width */
  margin-bottom: 20px; /* Add some spacing below the table */
  display: block; 

}

#coursesTable th,
#coursesTable td {
  padding: 10px 15px; /* Add padding for readability */
  text-align: left; /* Align text to the left */
  border: 1px solid #ddd; /* Add a subtle border */
}

#coursesTable th {
  background-color: #f2f2f2; /* Lighter background for headers */
  font-weight: bolder; /* Make headers bold */
}

#coursesTable tr:nth-child(even) {
  background-color: #f5f5f5;
}