/* Game Boy Theme Styles - Black Version */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    background-color: black;
    font-size: 30px; /* Increase the base font size (default is usually 16px) */
    font-family: 'VT323', monospace;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    cursor: url('gameboy_cursor.png'), auto;
    
}

.top-nav {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    align-items: center; /* Align the icons vertically */
    gap: 15px; /* Add spacing between the icons */
    background-color: black; /* Background color for the nav bar */
    padding: 10px 0; /* Add some padding around the icons */
    position: fixed; /* Fix the navigation bar at the top */
    top: 0; /* Position it at the very top of the page */
    left: 0; /* Align it to the left edge */
    width: 100%; /* Make it span the full width of the page */
    z-index: 1000; /* Ensure it stays above other elements */
    margin-bottom: 20px;
}

.nav-button {
    display: inline-block;
    border: none;
    background: none;
    transition: transform 0.3s ease;
}

.nav-button:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.icon {
    width: 50px; /* Adjust size of the icons */
    height: 50px;
    display: block;
}

.about-section {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center elements horizontally */
    text-align: center; /* Center text */
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
}

.about-section img {
    width: 200px; /* Adjust the size of the portrait */
    height: 200px;
    border-radius: 10%; /* Rounded square shape */
    margin-bottom: 20px; /* Add spacing below the image */
    image-rendering: pixelated; /* Pixelate the image */
    margin-top: 40px; /* Add margin to the top of the icons */

}

.about-section h1 {
    font-size: 3rem; /* Larger text for the name */
    
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    margin-bottom: 20px; /* Add spacing below the name */
    text-transform: uppercase; /* Optional: Make the text uppercase for a retro feel */
    letter-spacing: 5px; /* Add spacing between letters */
}

.about-section p {
    
    font-size: 22px; /* Standard font size for the description */
    line-height: 1.6; /* Improve readability */
    color: white;
    max-width: 1000px; /* Limit the width of the text */
    text-align: justify; /* Align text to both left and right */
}

.research-section {
    text-align: center; /* Center the title */
    margin: 40px auto; /* Add spacing around the section */
    padding: 20px; /* Add padding inside the section */
    max-width: 900px; /* Limit the width of the section */
}

.research-section h2 {
    font-size: 2rem; /* Adjust the size of the title */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    letter-spacing: 3px; /* Add spacing between letters */
    margin-bottom: 20px; /* Add spacing below the title */
}

.paper {
    display: flex;
    align-items: flex-start; /* Align thumbnail and text at the top */
    gap: 20px; /* Add spacing between the thumbnail and details */
    margin-bottom: 30px; /* Add spacing between papers */
    align-items: center; /* Center the thumbnail vertically with the text */
}

.paper-thumbnail {
    width: 200px; /* Set the size of the thumbnail */
    height: 150px;
    object-fit: cover; /* Ensure the image fits within the box */
    border-radius: 5%; /* Rounded square shape */
    image-rendering: pixelated; /* Pixelate the image for a retro look */
}

.paper-details {
    text-align: left; /* Align text to the left */
    max-width: 600px; /* Limit the width of the details */
}

.paper-title {
    font-size: 22px;
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    margin-top: 0px;
    margin-bottom: 0px; /* Add spacing below the title */
}

.paper-authors {
    font-size: 22px;
    
    color: white;
    margin-bottom: 1px; /* Reduced spacing below the authors */
}
.paper-conference {
    font-size: 22px;
    color: white;
    margin-bottom: 1px; /* Add spacing between lines */
}

.paper-links {
    font-size: 22px;
    margin-top: 0px; /* Add spacing above the links */
}

.paper-link {
    font-size: 1rem; /* Standard font size for links */
    color: white;
    text-decoration: none; /* Remove underline */
    margin-right: 15px; /* Add spacing between links */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.paper-link:hover {
    color: #00ff00; /* Change link color on hover for a retro effect */
}

h1, h2 {
    color: white;
    text-shadow: none;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 10px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 5px 10px;
    transition: all 0.2s;
}

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

section {
    margin: 20px 0;
    padding: 10px;
    background-color: black;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blinking-text {
    display: inline-block;
    animation: blink 1s infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    60% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch {
    display: inline-block;
    animation: glitch 0.3s infinite;
}

.research-subtitle {
    font-size: 1.5rem; /* Slightly smaller than the main title */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    letter-spacing: 2px; /* Add spacing between letters */
    margin-bottom: 20px; /* Add spacing below the subtitle */
}

.all-publications {
    text-align: center; /* Center the link */
    margin-top: 30px; /* Add spacing above the link */
}

.all-publications-link {
    font-size: 24px;
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-decoration: none; /* Remove underline */
    border: 2px solid white; /* Add a border around the link */
    padding: 5px 15px; /* Add padding inside the link */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}
.all-publications-link:hover {
    background-color: black; /* Keep the background black */
    color: #00ff00; /* Change text color to green */
    border-color: #00ff00; /* Change border color to green */
}

.highlight-author {
    text-decoration: underline; /* Underline the author's name */
    font-weight: bold; /* Optional: Make the name bold */
    color: #00ff00; /* Optional: Highlight the name in green */
}

.home-button-container {
    text-align: center; /* Center the button */
    margin: 20px 0; /* Add spacing above and below the button */
}

.bottom-bar {
    position: fixed; /* Fix the bar at the bottom of the page */
    bottom: 0px; /* Align it to the bottom */
    left: 0; /* Align it to the left edge */
    width: 100%; /* Make it span the full width of the page */
    background-color: black; /* Background color for the bar */
    text-align: center; /* Center the content inside the bar */
    padding: 20px 0; /* Add padding inside the bar */
    
    z-index: 1000; /* Ensure it stays above other elements */
}

.home-button {
    font-size: 24px;
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-decoration: none; /* Remove underline */
    border: 2px solid white; /* Add a border around the button */
    padding: 10px 20px; /* Add padding inside the button */
    margin-bottom: 20px; /* Move the button up slightly */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.home-button:hover {
    background-color: black; /* Keep the background black */
    color: #00ff00; /* Change text color to green */
    border-color: #00ff00; /* Change border color to green */
}

.education-skills-container {
    display: flex; /* Use flexbox to create a two-column layout */
    justify-content: space-between; /* Add space between the columns */
    gap: 20px; /* Add spacing between the columns */
    max-width: 2000px; /* Limit the width of the container */
    margin: 40px auto; /* Center the container and add vertical spacing */
    padding: 20px; /* Add padding inside the container */
}

.education-section,
.skills-section {
    flex: 1; /* Make both columns take up equal space */
    max-width: 48%; /* Limit the width of each column */
    text-align: left; /* Align text to the left */
}

.education-section h2,
.skills-section h2 {
    font-size: 1.8rem; /* Adjust the size of the section titles */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    margin-bottom: 20px; /* Add spacing below the title */
}

.education-section ul,
.skills-section ul {
    font-size: 22px; /* Adjust the size of the section titles */
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    color: white; /* Set text color */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.8; /* Improve readability */
    text-align: left; /* Align list items to the left */
}

.education-section li,
.skills-section li {
    font-size: 22px; /* Adjust the size of the section titles */
    margin-bottom: 15px; /* Add spacing between list items */
    text-align: left; /* Ensure individual list items are aligned to the left */
}
.experience-other-container {
    display: flex; /* Use flexbox to create a two-column layout */
    justify-content: space-between; /* Add space between the columns */
    gap: 20px; /* Add spacing between the columns */
    max-width: 2000px; /* Limit the width of the container */
    margin: 40px auto; /* Center the container and add vertical spacing */
    padding: 20px; /* Add padding inside the container */
}

.experience-section,
.other-experience-section {
    flex: 1; /* Make both columns take up equal space */
    max-width: 48%; /* Limit the width of each column */
    text-align: left; /* Align text to the left */
}

.experience-section h2,
.other-experience-section h2 {
    font-size: 1.8rem; /* Adjust the size of the section titles */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    margin-bottom: 20px; /* Add spacing below the title */
}

.experience-section ul,
.other-experience-section ul {
    font-size: 22px;
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    color: white; /* Set text color */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.6; /* Improve readability */
    text-align: left; /* Align list items to the left */
}

.experience-section li,
.other-experience-section li {
    font-size: 22px;
    margin-bottom: 15px; /* Add spacing between list items */
    text-align: left; /* Ensure individual list items are aligned to the left */
}

.content-container {
    max-width: 2000px; /* Limit the width of the content */
    margin: 0 auto; /* Center the content and add vertical spacing */
    padding: 20px; /* Add padding inside the container */
}

.content-container div {
    margin-bottom: 40px; /* Add spacing between sections */
}

.content-container h2 {
    font-size: 2rem; /* Adjust the size of the section titles */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    margin-bottom: 20px; /* Add spacing below the title */
}

.content-container ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    color: white; /* Set text color */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.8; /* Improve readability */
    text-align: left; /* Align list items to the left */
}

.content-container li {
    margin-bottom: 15px; /* Add spacing between list items */
}


/* General section styling for centering */
.education-section,
.skills-section,
.experience-section,
.other-experience-section {
    max-width: 1000px; /* Limit the width of the sections */
    margin: 40px auto; /* Center the sections horizontally and add vertical spacing */
    padding: 20px; /* Add padding inside the sections */
    text-align: left; /* Align text to the left */
}

.education-section h2,
.skills-section h2,
.experience-section h2,
.other-experience-section h2 {
    font-size: 2rem; /* Adjust the size of the section titles */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    margin-bottom: 20px; /* Add spacing below the title */
}

.education-section ul,
.skills-section ul,
.experience-section ul,
.other-experience-section ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    color: white; /* Set text color */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.8; /* Improve readability */
}

.education-section li,
.skills-section li,
.experience-section li,
.other-experience-section li {
    margin-bottom: 15px; /* Add spacing between list items */
}

/* Add a symbol before each list item */
.education-section ul li::before,
.skills-section ul li::before,
.experience-section ul li::before,
.other-experience-section ul li::before {
    content: "• "; /* Use a dot symbol */
    color: #00ff00; /* Optional: Set the color of the symbol */
    font-weight: bold; /* Make the symbol bold */
    margin-right: 5px; /* Add spacing between the symbol and the text */
}

/* Add a symbol before all list items */
.education-section ul li::before,
.skills-section ul li::before,
.experience-section ul li::before,
.other-experience-section ul li::before {
    content: "• "; /* Use a dot symbol */
    color: #00ff00; /* Optional: Set the color of the symbol */
    font-weight: bold; /* Make the symbol bold */
    margin-right: 5px; /* Add spacing between the symbol and the text */
}

/* Remove the symbol for "Communication/Teaching Experience:" */
.other-experience-section ul li.no-symbol::before {
    content: ""; /* Remove the symbol */
}

.presentations-section {
    max-width: 900px; /* Limit the width of the section */
    margin: 40px auto; /* Center the section horizontally and add vertical spacing */
    padding: 20px; /* Add padding inside the section */
    text-align: left; /* Align text to the left */
}

.presentations-section h2 {
    font-size: 2rem; /* Adjust the size of the section title */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    text-transform: uppercase; /* Make the text uppercase for a retro feel */
    margin-bottom: 20px; /* Add spacing below the title */
    text-align: center; /* Center the title */
}

.presentation {
    margin-bottom: 30px; /* Add spacing between presentations */
}

.presentation-title {
    font-size: 1.5rem; /* Adjust the size of the presentation title */
    font-family: 'VT323', monospace; /* Game Boy-style font */
    color: white;
    margin: 0 0 10px 0; /* Add spacing below the title */
}

.presentation-authors {
    font-size: 22px; /* Adjust the size of the authors text */
    color: white;
    margin: 0 0 5px 0; /* Add spacing below the authors */
}

.presentation-venue {
    font-size: 22px; /* Adjust the size of the venue text */
    color: white;
    margin: 0 0 10px 0; /* Add spacing below the venue */
}

.presentation-links {
    font-size: 1rem; /* Adjust the size of the links */
}

.presentation-link {
    color: #ffffff; /* Set link color */
    text-decoration: none; /* Remove underline from links */
    margin-right: 15px; /* Add spacing between links */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.presentation-link:hover {
    color: #00ff00; /* Change link color on hover for a retro effect */
}