#navbar {
    display: flex; /* Enable Flexbox on the navbar */
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Center items vertically */
}

/* Left-aligned section */
.nav-left {
    max-width: 20vw;
    text-align: left;
    margin-right: auto; /* Push to the left */
}

.logo{
    margin: 4% 0px 0px 4%; 
}

/* Center-aligned section */
.nav-center {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    width: 80vw;
    text-align: center;
}

/* Right-aligned section */
.nav-right {
    max-width: 20vw;
    text-align: right;
    margin-left: auto; /* Push to the right */
}

/* Optional: Style for the header */
.header {
    font-size: 1.5em;
    font-weight: bold;
}

/* Align text to the left */
.left {
    text-align: left;
}

/* Push the element to the right of the parent */
.push-left {
    margin-right: auto;
}

/* Align text to the right */
.right {
    text-align: right;
}

/* Push the element to the right of the parent */
.push-right {
    margin-left: auto;
}

/* Make text bold */
.bold {
    font-weight: bold;
}

/* Italicize text */
.italic {
    font-style: italic;
}

/* Underline text */
.underline {
    text-decoration: underline;
}

/* Set font size to large */
.font-large {
    font-size: 1.5em;
}

/* Set font size to small */
.font-small {
    font-size: 0.75em;
}

/* Set element to be displayed as a block */
.block {
    display: block;
}

/* Set element to be displayed as an inline block */
.inline-block {
    display: inline-block;
}

/* Set element to be displayed as an inline element */
.inline {
    display: inline;
}

/* Set element to be displayed as a flex container */
.flex {
    display: flex;
}

/* Set element to be displayed as a grid container */
.grid {
    display: grid;
}

.center{
      text-align: center;
}

.hidden{
      display: none;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
}

#footer img {
    vertical-align: middle;
}

#footer .giant {
    vertical-align: middle;
    font-weight: bold;
}

.circular-favicon {
    width: 16px; /* Ensure the width and height are equal */
    height: 16px;
    border-radius: 50%;
    object-fit: cover; /* Ensures the image covers the entire area */
}