body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

nav a {
    background-color: #333;
    color: white;
    text-decoration: none;
    margin-right: 1rem;
}

nav a:hover {
  background-color: black;
  color:white;
}

nav a.active {
  background-color: blue;
  color:white;
}

main {
    padding: 2rem;
}

footer {
    background-color: #eee;
    padding: 1rem;
    text-align: center;
}

.logo {
    position: absolute; /* Positions the logo relative to the nearest positioned ancestor (.container). */
    top: 0px; /* Sets the distance from the top edge. */
    right: 0px; /* Sets the distance from the right edge. */
    width: 150px;
    height: auto;
}

.rainbow-line {
    border: 0; /* Remove default border */
    height: 5px; /* Set the height of the line */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Apply the rainbow gradient */
}