/*@font-face {
    font-family: 'Libertinus';
    src: url('/fonts/libertinus/LibertinusSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libertinus';
    src: url('/fonts/libertinus/LibertinusSerif-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Libertinus';
    src: url('/fonts/libertinus/LibertinusSerif-Semibold.woff2') format('woff2');
    font-weight: 700;
    font-style: bold;
    font-display: swap;
}*/

@font-face {
    font-family: 'Merriweather';
    src: url('/fonts/merriweather/Merriweather-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/fonts/merriweather/Merriweather-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/fonts/merriweather/Merriweather-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: bold;
    font-display: swap;
}

html {
  scroll-behavior: smooth;
}

:root {
  --background-colour1: rgb(220, 255, 230);
  --background-colour2: rgb(206, 237, 255);
}

body {
    font-family: 'Merriweather', Palatino, Georgia, 'Times New Roman', Times, serif;
    font-size: normal;
    line-height: 1.5;
    background: linear-gradient(
        to bottom, 
        var(--background-colour1) 0%, 
        var(--background-colour1) 80%, 
        var(--background-colour2) 100%
    );
    background-attachment: fixed; /* Fixes the background to the viewport */
    padding-left: 10%;
    padding-right: 10%;
    margin: 0;
}

a {
    text-decoration: none;
    color: #155298;
}
a:hover {
    text-decoration: underline;
}

nav {
    text-align: center;
    display: flex;
    gap: 15px; /* space between nav items */
    position: fixed;  /* Fixes navbar at the viewport top */
    top: 0;           /* Aligns it to the very top */
    left: 0;
    width: 100%;      /* Full width */
    background-color:  var(--background-colour1); /* Background color to cover content behind */
    z-index: 1000;    /* Keeps navbar above other content */
    padding: 15px 10%; /* vertical horizontal */
    white-space: nowrap;
    /*overflow-x: auto; /* Optional: allow horizontal scroll if needed */
}

.navbar {
  transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
}

/* When screen width is 600px or less, reduce font size */
@media (max-width: 400px) {
  nav {
    font-size: 0.85rem;
  }
}

/* Even smaller on very narrow screens */
@media (max-width: 300px) {
  nav {
    font-size: 0.6rem;
  }
}

h1 {
    font-style: italic;
    font-weight: normal;
    padding-top: 50px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 1.5rem;
}
h2 {
    font-size: 2.3rem;
    font-weight: normal;
    margin-top: 60px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
h3 {
    padding-top: 40px;
    margin-top: 0px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.moreGap {
    margin-bottom: 30px;
}

.listDescriptor {
    margin-top: 12px;
    margin-bottom: 0;
}

ul {
    margin-top: 20px;
    margin-bottom: 10px;
}

li {
    margin-bottom: 12px;
}

footer {
    font-size: 0.8rem;
    padding-top: 90px;
    padding-bottom: 15px;
    margin-bottom: 0px;
}

.sideImage {
    display: flex;
    justify-content: space-between; /* Heading on left, image on right */
    /*align-items: flex-end; /* Align bottom edges */
    align-items: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

.imageDescription {
    display: flex;
    align-items: center; /* Align vertically */
    gap: 20px;
    margin-bottom: 15px;
    margin-top: 30px;
}

.publication {
    margin-top: 50px;
}

.publication p {
    margin: 12px 0;
}

.pub-title {
    font-size: 1.5rem;
}

.pub-journal {
    font-style: italic;
}