/* the css below is for the main index page*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;  
}
h1{
    text-align: center;
}


header {
    background-color:burlywood;
    color: white;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
}

nav ul li a:hover {
    background-color: rgb(228, 142, 29);
    border-radius: 5px;
}

main {
    padding: 5px;
    text-align: center;
}

footer {
    background-color: burlywood;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    
}

/*The css below is for scenario 1*/

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
  text-align: center;
}

header, footer {
  background-color: #13ea33;
  color: rgb(36, 33, 214);
  padding: 10px;
}

nav a {
  margin: 0 10px;
  color: rgb(239, 11, 11);
  text-decoration: none;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}

/*The css below is for scenario 2*/

.tabs {
  margin: 20px 0;
}

.tab-btn {
  padding: 10px 20px;
  margin: 0 5px;
  cursor: pointer;
}

.tab-content {
  margin-top: 20px;
  padding: 15px;
  background-color: #e0e0e0;
  border-radius: 5px;
}

/*The css below is for scenario 3*/

.form-group {
  margin-bottom: 15px;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form {
  max-width: 500px;
  margin: auto;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
form input[type="text"],
form input[type="email"],
form textarea,
form select,
form input[type="file"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

form input[type="radio"],
form input[type="checkbox"] {
  margin-right: 5px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}