html, body {
    height: 100%;
    margin: 0;
}

/* Wrapper to use flexbox layout */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}

/* General Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Header Section */
.header {
    background-image: url('background.png'); /* Path to your background image */
    background-size: cover; /* Ensures the image covers the entire header area */
    background-position: center; /* Centers the image in the header */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    color: white; /* Text color - make sure it's readable against the background */
    padding: 2%;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}


.header-content h1 {
    margin: 10pt 5%;
    font-size: 3rem;
}

.header-content p {
    margin: 0.8% 0;
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 0.8%;
}

.header-content .affiliations {
    font-size: 0.9rem;
    margin-top: 1%;
}

/* GitHub Link Styling */
.header-content a {
    color: #b0e0e6;
    text-decoration: none; /* Remove underline from the link */
}

.header-content a:hover {
    text-decoration: underline; /* Optional: Add underline on hover for emphasis */
}

sup {
    font-size: 0.75em; /* Adjusts the size of the superscript to be smaller */
    vertical-align: super;
}

.button-container {
    display: flex;
    gap: 1%; /* Space between buttons */
    justify-content: center;
}

.btn {
    display: flex;
    align-items: center;
    background-color: #5d5d5e;
    color: white;
    padding: 10px 15px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.btn:hover {
    background-color: #555;
}

.github-logo {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
    margin-top: 1px;
}

/* Hero Image Section */
.hero-image {
    text-align: center;
    margin: 1px 0;
}

.hero-image img {
    max-width: 90%;
    height: auto;
    border-radius: 10px;
    margin:1% auto;
}

/* Main Content */
main {
    flex: 1; /* Allows main content to grow and push footer down */
    padding: 20px;
    margin: 0 auto;
    max-width: 80%; /* Limit content width for better readability */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Description Section */
.description {
    margin-bottom: 40px;
}

.description h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

.description p {
    font-size: 1.0rem;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

/* Media Section */
.media {
    display: flex;
    flex-direction: column;
    gap: 4%;
    text-align: justify;
    margin: 0;
}

.media h2 {
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: justify;
    font-weight: normal;
}

.videos, .photos {
    display: flex;
    justify-content: center; /* Center the video horizontally */
    align-items: center; /* Center the video vertically (in case of vertical flexbox) */
    flex-direction: column;
    gap: 2%;
    text-align: center; /* Center the content */
    margin: 2% auto; /* Center the section */
    width: 100%;
}

.photos {
    text-align: justify;
    margin: 0;
}

.photos img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    margin: 2% auto; /* Center the image horizontally */
}

.photos img.large-image {
    width: 100%;
    max-width: 990px;
    border-radius: 10px;
    margin: 2% auto; /* Centering the image horizontally */
}

.citation-box {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 20px 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 1rem;
    white-space: pre-wrap; /* Preserve formatting and allow line wrapping */
    text-align: left; /* Ensure everything is left-aligned */
    overflow-x: auto; /* Horizontal scroll if necessary */
}

.citation-box p {
    margin: 0 0 10px; /* Add space below paragraphs */
    font-family: Arial, sans-serif; /* Different font for the non-code text */
    font-size: 1rem;
    color: #484848;
}

.citation-box pre {
    margin: 0;
    padding-left: 0px; /* Indentation for the code block */
}



/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: auto; /* Ensures footer is pushed to the bottom */
    width: 100%;
}