/* Reset default margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #EAF2F8;
    color: #333;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
}

header {
    background: linear-gradient(135deg, #009688, #00796B);
    color: #fff;
    padding: 40px 0;
    text-align: center;
}

header h1 {
    font-family: 'Nunito';
    font-size: 3.5em;
    margin-bottom: 0;
}

header p {
    font-style: italic;
}

header .author {
    font-family: 'Nunito';
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
}

header .author span {
    font-size: 1em;
    margin-right: 8px;
    margin-top: 3px;
    color: #c3c3c3; /* Lighter shade for the "by" text */
}

header .author h2 {
    font-size: 1.5em;
    font-weight: 300;
    display: inline;  /* Ensuring the name appears next to "by" */
    color: #e5e5e5; /* A slightly lighter color than white for contrast */
}

nav {
    background-color: #00796B; /* Dark teal from the gradient for contrast */
    text-align: center;
    padding: 10px 0;
}

nav ul {
    list-style-type: none; /* Removes bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Centers the menu items horizontally */
}

nav li {
    margin: 0 15px; /* Space between menu items */
}

nav a {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
    position: relative;  /* Relative positioning to add the pseudo-element */
    transition: color 0.3s; /* Smooth color transition for text */
}

nav a::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background-color: #EAF2F8; /* Pastel blue underline */
    transition: all 0.15s; /* Animates all properties (width and left) */
}

nav a:hover {
    color: #EAF2F8; /* Pastel blue color on hover */
}

nav a:hover::before {
    width: 100%;  /* Full width underline on hover */
    left: 0;  /* Start the underline from the left edge */
}

.welcome {
    max-width: 900px; /* Increased max-width for better readability */
    margin: 40px auto;
    padding: 20px;
    /* Removing background, border-radius, and box-shadow to get rid of the box */
    text-align: center;
    font-size: 1.4em; /* Making the text bigger */
}

footer {
    background: linear-gradient(135deg, #009688, #00796B);
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}