$primary-color: #3498db;
$secondary-color: #333;

/* Base styles */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  box-sizing: border-box; /* Make sure padding and borders are included in element's total width and height */
}

h3 {
  margin-bottom: 5px; /* Adjust the value to reduce spacing */
}

p {
  margin-top: 5px; /* Adjust to reduce the space between the heading and the paragraph */
}
h3 + p {
  margin-top: -5px; /* Reduce space between heading and paragraph */
}
p + ul {
  margin-top: -15px; /* Reduce space between paragraph and list */
}

ul {
  padding-left: 20px; /* Adjust padding as needed */
  margin-top: 0; /* Remove margin above the list */
}

li {
  margin-top: 0; /* No extra margin between list items */
  margin-bottom: 0; /* Ensure no extra space between list items */
}

ul + p {
  margin-top: 10px; /* Restore space between list and next paragraph */
}



/* Ribbon Header */
.ribbon-header {
  background-color: #333; /* Dark background for the ribbon */
  color: #fff; /* White text */
  padding: 20px 0;
  width: 100%; /* Make sure the header spans the full width */
  margin: 0; /* Remove any margins */
  border: none; /* Ensure no border is applied */
  box-sizing: border-box; /* Ensures padding is included in width calculation */
}

/* Adjust the container to not limit the width */
.ribbon-header .container {
  max-width: 100%; /* Allow the container to take the full width */
  margin: 0; /* Remove any margin to ensure full-page width */
  padding: 0 20px; /* Optional: Padding for inner content */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ribbon-header .left {
  margin-left: 10px; /* Remove unnecessary margin */
}

.ribbon-header .site-title {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  font-weight: bold; /* Add this line to make the text bold */
}

.ribbon-header .site-title:hover {
  text-decoration: underline;
}


/* Header Navigation */
.ribbon-header .right nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.ribbon-header .right nav ul li {
  margin-left: 20px;
}

.ribbon-header .right nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.ribbon-header .right nav ul li a:hover {
  text-decoration: underline;
}

.ribbon-header .right nav ul li a.active {
  color: #ff0; /* Color for the active link */
  font-weight: bold; /* Optional: Make the active link bold */
}

/* Navigation styles */
nav ul {
  list-style: none; /* Remove bullet points */
  padding: 0;       /* Remove padding */
  margin: 0;        /* Remove margins */
  display: flex;    /* Flexbox for horizontal layout */
}

nav ul li {
  margin-left: 20px; /* Space between navigation items */
}

nav ul li a {
  text-decoration: none; /* Remove underline */
  color: #333;           /* Text color for links */
  font-weight: bold;     /* Bold the text */
}

nav ul li a:hover {
  color: #007BFF; /* Change color on hover */
}


/* Customize the about me title */
h1 {
  font-size: 48px; /* Adjust the size */
  font-weight: bold;
  text-align: left;
  margin-top: 30px;
}

/* General styling for the floating content */
.floating-content {
  background-color: #fff; /* White background to make it stand out */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow for floating effect */
  padding: 40px; /* Space inside the content box */
  border-radius: 20px; /* Optional: round the corners */
  width: 80%; /* Adjust width as needed */
  max-width: 800px; /* Maximum width for the content */
  margin: 50px auto; /* Center the content horizontally and add space from the top */
  position: relative; /* Floating look */
}

/* Optional: Add a background for the whole page */
body {
  background-color: #f0f0f0; /* Light gray background */
}


/* Floating box for the body */
section {
  background-color: white;
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}



/* Adjust layout based on screen size */
/* Desktop / wide screen */
@media screen and (min-width: 480px) {
  /* About Me container: flexbox to align text and image */
  .about-me-container {
    display: flex;
    align-items: flex-start; /* Vertically align the content and image */
    padding: 20px; /* Adjust padding as needed */
  }
  /* About Me image styling */
  .about-me-image img {
    max-width: 250px; /* Set a max width for the image */
    border-radius: 10px; /* Optional: round the corners of the image */
    margin-right: 20px; /* Space between the image and the text */
    margin-left: 20px; /* Space between the image and the text */
  }
  /* About Me text styling */
  .about-me-text {
    flex: 1; /* Take up the remaining space */
    max-width: 60%; /* Limit the width of the text section */
    text-align: justify; /* Align text to the left */
  }
}
/* Phone */
@media screen and (max-width: 480px) {
  .ribbon-header .site-title {
    font-size: 18px; /* Reduce size for smaller screens */
  }
  .ribbon-header {
    padding: 10px 0; /* Adjust the padding for mobile */
  }

  /* About Me container: flexbox to align text and image */
  .about-me-container {
    padding: 20px; /* Adjust padding as needed */
  }
  /* About Me image styling */
  .about-me-image img {
    max-width: 100%; /* Set a max width for the image */
    border-radius: 10px; /* Optional: round the corners of the image */
    margin-right: 20px; /* Space between the image and the text */
  }
  /* About Me text styling */
  .about-me-text {
    flex: 1; /* Take up the remaining space */
    max-width: 100%; /* Limit the width of the text section */
    text-align: justify; /* Align text to the left */
  }
}


/* Contact Icons Styling */
.contact-icons {
  display: flex;
  justify-content: center; /* Centers the icons horizontally */
  margin-top: 20px;
}

.contact-icons a {
  text-decoration: none; /* Remove underline */
  color: #000; /* Icon color */
  font-size: 30px; /* Adjust icon size */
  margin: 0 15px; /* Space between icons */
}

.contact-icons a:hover {
  color: #007bff; /* Color on hover */
}

/* ORCID Icon Styling */
.contact-icons .custom-icon img {
  width: 30px; /* Adjust the size of the ORCID icon */
  height: 30px;
}

/* Headings inside the body */
h2 {
  color: #004080;
  font-size: 1.8em;
  margin-top: 0;
}

/* Smaller floating box for horizontal placement */
.smaller-floating-box-container {
  display: flex;           /* Enables horizontal alignment */
  flex-wrap: wrap;         /* Allows wrapping to the next line if there's not enough space */
  align-items: flex-start; /* Vertically align the content and image */
  justify-content: space-between;  /* Adds space between the boxes */
  gap: 20px;               /* Space between the boxes */
  margin: 50px auto;       /* Center the container and add space from the top */
}

.smaller-floating-box {
  background-color: #fff; /* White background for the box */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow for floating effect */
  padding: 20px;          /* Space inside the box */
  border-radius: 15px;    /* Optional: round the corners */
  width: 200px;             /* Width of each box */
  text-align: left;     /* Optional: Center the text inside */
  margin: 10px 0;        /* Adds margin for each box */
}

/* Floating box for horizontal placement */
.floating-box-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin: 50px auto;
}

.floating-box {
  background-color: rgba(223, 223, 223, 1.0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 15px;
  justify-content: center;
  margin: 20px 0;
}

/* Footer Ribbon */
.ribbon-footer {
  background-color: #333; /* Adjust this to match your theme */
  color: #fff;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0; /* Ensure it starts at the very left edge */
  box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.ribbon-footer .container {
  display: flex;
  justify-content: center; /* Center the content */
  align-items: center;
  width: 100%;
  max-width: none; /* Ensure it takes the full width */
  padding: 0 15px; /* Optional: Adjust padding as needed */
}

.ribbon-footer p {
  margin: 0;
  font-size: 14px;
}