/* Reusable Components that appear on multiple pages*/

/* Header Layout */
.header {
    display: flex; /* Enable Flexbox */
    align-items: center; /* Vertically align items */
    justify-content: space-between; 
    padding: 25px 100px; /* Add some padding around the header */
    margin-bottom:0;
}

/* Header Components*/
/* Style for the logo */
.logo {
    font-family: 'Karla', sans-serif; /* Use Karla font */
    font-weight: 700; /* Bold font */
    font-size: 2.25rem; /*  font size for the logo */
    color: #333; /* Dark gray for the logo */
    text-decoration: none; /* Remove underline for the link */
    margin: 0; /* Remove default margin */
    padding:0;
}

/* Nav styling */
.nav ul {
    list-style-type: none; /* Remove bullets */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Display list items in a row */
    gap: 140px; /* Add spacing between links */
}

.nav a {
    display: inline-block; /* Enables transform */
    text-decoration: none; 
    color: #333; 
    font-family: 'Inconsolata', monospace;
    font-size: 1.25rem; 
    transition: transform 0.15s ease; 
}

.nav a:hover {
    transform: scale(1.3); /* 30% larger */
}

/* Main Element Layout */
.main {
    display: flex; /* Enable Flexbox */
    flex-direction: column;
    align-items: center; /* Vertically center items */
    justify-content: start; /* Horizontally center items */
    width: 100%;
}

/* Footer Layout */
footer {
    display: flex; /* Enable Flexbox */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Align items to the left */
    padding-top:0px;
    padding-bottom:10px;
    margin-bottom: 20px;
}