@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/manrope-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/assets/manrope-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

:root {
    --global-font-size: 15px;
    --global-space: 5px;
    --primary-color: #006400;
    --font-stack: "Manrope";
}

.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1em;
    margin-bottom: 0.1em;
    height: 0.9em;
    width: 0.9em;
    opacity: 70%;
}

.talk-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Three equal-width columns */
    grid-auto-rows: auto; /* Rows will automatically adjust based on content height */
    grid-auto-flow: dense; /* Fill in the grid from left to right, not row by row */
    gap: 0em;
    grid-column-gap: 4em;
    margin-top: 20px; /* Optional: add space above the container */
}

.talk-item {
    padding-top: 0.5em;
    padding-bottom: 1.5em;
}

@media (max-width: 768px) {
    .talk-container {
        grid-template-columns: 1fr; /* Single column layout for mobile devices */
    }
    .talk-item {
        padding: 1em;
    }
}

.news-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Three equal-width columns */
    grid-auto-rows: auto; /* Rows will automatically adjust based on content height */
    grid-auto-flow: dense; /* Fill in the grid from left to right, not row by row */
    gap: 0em;
    grid-column-gap: 4em;
    margin-top: 20px; /* Optional: add space above the container */
}

/* Media query for smaller devices */
@media (max-width: 768px) {
    .news-container {
        grid-template-columns: 1fr; /* Single column layout for mobile devices */
    }
}

/* Styling for individual news items */
.news-item {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.notes-list {
    width: 100%;
    margin: 0 auto;
}

.note {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
}

.note .note-title {
    padding-right: 1em;
}

.note .note-category,
.note .note-date {
    text-align: right;
    font-style: italic;
    opacity: 0.7;
    align: center;
}

.note .note-category {
    margin-right: 1em; /* Space between category and date */
    opacity: 0.7;
}

.note .note-date {
    margin-left: auto; /* Push the date to the far right */
}

@media (max-width: 600px) {
    .note {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .note .note-category,
    .note .note-date {
        text-align: left;
        margin-right: 0;
        margin-left: 0;
    }
}

.page-menu {
    display: flex;
    flex-direction: column;
}

.page-menu header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-top: 0.5em;
    font-weight: bolder;
}

.page-menu nav {
    text-align: left;
}

.site-name {
    vertical-align: text-top;
    text-align: left;
}

.site-name::after {
    content: "";
    animation: cursor 800ms infinite;
    background: var(--primary-color);
    border-radius: 0;
    display: inline-block;
    height: 1em;
    margin-left: 0.2em;
    width: 3px;
    bottom: -2px;
    position: relative;
}

.menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 2em;
}

.menu a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.menu a:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    .page-menu header {
        grid-template-columns: 1fr;
    }

    .menu {
        grid-template-columns: repeat(8, auto);
        justify-content: left;
    }
}

@media (max-width: 480px) {
    .menu {
        grid-template-columns: repeat(4, auto);
    }
}

.notes-list ul > li::after {
    content: "/ ";
}

.notes-list p {
    margin-bottom: 0.5em;
}

.papers-list table {
    margin: 0;
}

.paper-one td {
    padding: 0;
    border: 0;
}

.paper-text td {
    border: 0;
    padding-right: 10px;
}

.paper-text-thumb {
    border: 1px solid #999999;
    width: 15%;
}

@media (max-width: 600px) {
    .paper-text-thumb {
        display: none;
    }
}

li,
li > ul > li {
    margin-bottom: 0.6em;
    padding-left: 15px;
}

.nobreak {
    white-space: nowrap;
}

.icon {
    padding: 0;
    margin: 0;
    margin-left: -0.1em;
    margin-right: -0.4em;
    margin-top: -0.2em;
    width: 0.8em;
    vertical-align: top;
    height: auto;
    mask-image: linear-gradient(to top right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
    mask-size: 100% 100%;
}

.terminal-page-card {
    margin-top: 1em;
    margin-bottom: 1em;
}

.terminal-page-card > header {
    color: black;
    text-align: left;
    font-weight: bold;
}

.components-grid {
    display: grid;
    grid-column-gap: 1.4em;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.image-grid {
    display: grid;
    grid-template-rows: auto;
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--page-width) / 12), 1fr));
}

.image-item {
}

.paper-thumb {
    max-width: 80%;
    margin: 2em;
    text-align: center;
    border: 1px solid #999999;
}

.image-il {
    float: left;
    max-width: 30%;
    margin-right: 2em;
    margin-bottom: 2em;
}

.image-ir {
    float: right;
    max-width: 30%;
    object-fit: contain;
    margin-left: 2em;
    margin-bottom: 2em;
}

.video-ir {
    float: right; /* Positions the video to the right */
    margin-left: 20px; /* Adds space between the video and the text */
    width: 560;
    height: 315;
}

.video-c {
    margin-bottom: 2em;
    text-align: center;
}

.video-ir iframe {
    width: 100%; /* Ensures the iframe fills the width of its container */
    height: auto; /* Maintains the aspect ratio of the iframe */
}

.image-irs {
    float: right;
    max-width: 130px;
    margin-left: 2em;
    margin-bottom: 2em;
}

.image-irs img {
    border-radius: 20%;
}

.image-ic {
    max-width: 70%;
    margin: auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

figcaption {
    font-style: italic;
}

@media only screen and (min-width: 70em) {
    .components-grid {
        grid-template-columns: 3fr 9fr;
    }

    .components-grid aside {
        position: sticky;
        top: calc(var(--global-space) * 2);
    }
}