/* Ensure the body and html take up the full viewport height */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling on the entire page */
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
}

body {
    margin: 0;
    font-family: 'Josephine Sans', sans-serif; /* Ensure consistency */
    font-size: 13.5px; /* Default font size */
    color: #333; /* Default text color */
    line-height: 1.5; /* Ensure good readability */
}

/* Header container */
header {
    position: fixed; /* Fix the header at the top */
    top: 50px;
    left: 0;
    width: 100%; /* Full width of the viewport */
    z-index: 10; /* Ensure the header is above other content */
    text-align: center;
    padding: 0; /* Remove padding */
    background-color: transparent; /* Keep your existing background */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center the header-box horizontally */
}


/* Header box */
.header-box {
    height: auto;
    max-height: 55px;
    display: flex;
    flex-direction: column; /* Stack h1 and p vertically */
    align-items: center; /* Center-align both h1 and p */
    position: relative; /* Enable positioning for child elements */
    width: clamp(300px, 28vw, 50vw); /* Scale between 300px and 600px based on viewport width */
    text-align: justify; /* Justify text inside the box */
    background-color: transparent;
}

/* Header title */
header h1 {
    margin: 0; /* Remove default margin */
    font-size: clamp(1.5em, 2vw, 6em); /* Scale font size between 1.5em and 3em */
    font-weight: 600;
    padding: 0; /* Remove padding */
    text-align: center; /* Center the text inside the h1 */
    width: 100%; /* Ensure h1 spans the full width */
    display: block; /* Ensure h1 behaves like a block element */
    line-height: 1.2; /* Adjust line height for compact spacing */
}

/* Force justification for single-line text in h1 */
header h1::after {
    content: '\00a0'; /* Add a non-breaking space to force justification */
    display: inline-block; /* Treat it as an inline element */
    width: 100%; /* Force the last line to justify */
    height: 0; /* Ensure it doesn't affect layout */
    line-height: 0;
    visibility: hidden; /* Make it invisible */
}

/* Header paragraph */
header p {
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-weight: 300;
    color: #000000; /* Default text color */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 16px */
    margin: 5px 0 0; /* Adjust the margin */
    padding: 0; /* Remove padding */
    text-align: center; /* Center the paragraph text */
    display: inline-block; /* Ensure proper justification behavior */
    line-height: 1.4; /* Adjust line height for readability */
    position: relative; /* Enable positioning */
    top: -30px; /* Move the paragraph upwards */
    width: 100%; /* Ensure the paragraph spans the full width of the container */
}

/* Make the header title clickable */
header h1 a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the text color */
    font-family: inherit; /* Use the same font as the header */
    position: relative; /* Set the link as a positioning context for the pseudo-element */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Add hover effect for the header link */
header h1 a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: -4px; /* Position the underline slightly below the text */
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: #b7b7b7; /* Use the current text color for the underline */
    transition: width 0.6s ease, left 0.6s ease; /* Animate the width and position */
    z-index: -1;
    transform: translateX(-50%);
}

header h1 a:hover::after {
    width: 200vw; /* Expand the underline to the full width */
}

/* Remove link styling for phone number and email */
header p a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the paragraph */
    position: relative; /* Set the link as a positioning context for the pseudo-element */
    
}

/* Add hover effect for phone number and email */
header p a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: 0; /* Position the underline at the bottom of the text */
    width: 0; /* Initially, the underline has no width */
    height: 0.5px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    transition: width 0.3s ease, left 0.3s ease; /* Animate the width and position */
}

header p a:hover::after {
    width: 100%; /* Expand the underline to the full width */
    left: 0; /* Move the starting point to the left */
}

header h3 {
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-weight: 300;
    color: #999; /* Default text color */
    font-size: 2em; /* Set the font size */
    margin: -10px 0 0; /* Adjust the margin */
    padding: 0; /* Remove padding */
    text-align: right; /* Justify the paragraph text */
    text-align-last: right; /* Force justification for the last line */
    display: inline-block; /* Ensure proper justification behavior */
    line-height: 1.4; /* Adjust line height for readability */
    position: relative; /* Enable positioning */
    top: -30px; /* Move the paragraph upwards */
    width: 100%; /* Ensure the paragraph spans the full width of the container */
}


/* Footer container */
footer {
    position: fixed; /* Fix the footer at the bottom */
    bottom: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 22px; 
    z-index: 100; /* Ensure the footer is above other content */
    text-align: right; /* Keep your existing alignment */
    padding: 2px; /* Keep your existing padding */
    background-color: white; /* Keep your existing background */
    font-size: 6px;
    color: #333;
}

/* Footer paragraph (2025) */
.footer-paragraph {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 6px; /* Match the font size of the other paragraph */
    font-weight: 300;
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    cursor: pointer; /* Indicate that the text is clickable */
}

/* Footer links (hidden by default) */
.footer-links {
    display: none; /* Initially hidden */
    position: absolute;
    bottom: 15px; /* Match the bottom value of .footer-paragraph */
    right: 40px; /* Position the links to the left of "2025" */
    font-size: 6px; /* Match the font size of the other paragraph */
    font-weight: 300;
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    color: #333; /* Ensure the links match the footer's text color */
}

/* Remove underline from links */
.footer-links a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the footer */
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    position: relative;
}

/* Add separator between links */
.footer-links a::after {
    content: " | "; /* Add the separator */
    color: inherit; /* Match the text color */
    margin: 0 5px; /* Add spacing around the separator */
}

/* Remove the separator after the last link */
.footer-links a:last-child::after {
    content: ""; /* Remove the separator */
}

/* Add hover effect for links */
.footer-links a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.embedded-content {
    width: 100%;
    height: 100%;
    border: none;
}

/* Popup container */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 100%; /* Full height of the viewport */
    background-color: rgba(0, 0, 0, 0.8); /* Black overlay with 70% opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above all other content */
    padding: 20px; /* Add padding around the popup */
    box-sizing: border-box; /* Include padding in the dimensions */
}

/* Hide the popup by default */
.popup.hidden {
    display: none;
}

/* Popup content */
.popup-content {
    background: transparent; /* Keep the popup background transparent */
    max-width: 100%; /* Limit the popup width to 80% of the viewport */
    max-height: 100%; /* Limit the popup height to 80% of the viewport */
    display: flex;
    flex-direction: column; /* Stack image and description vertically */
    justify-content: center; /* Center content vertically */
    overflow: visible; /* Prevent scrolling */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Enlarged image */
.popup-content img {
    max-width: 90vw; /* Ensure the image doesn't exceed the popup width */
    max-height: 90vh; /* Ensure the image doesn't exceed the popup height */
    object-fit: scale-down; /* Scale the image proportionally to fit within the container */
    display: block; /* Ensure the image is treated as a block element */
    align-items: center; /* Center content horizontally */
}

/* Image description */
.popup-content p {
    font-size: 10px; /* Keep the existing font size */
    font-weight: 300;
    color: white; /* Keep the text color white */
    margin: 10px 0 0; /* Add spacing above the description */
    text-align: left; /* Center the description text */
    word-wrap: break-word; /* Ensure long text wraps properly */
    max-width: 100%; /* Ensure the description doesn't exceed the popup width */
    padding: 0; /* Remove unnecessary padding */
    box-sizing: border-box; /* Include padding in dimensions */
}

/* Close button */
#popup-close {
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 10px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#popup-close:hover {
    background-color: #555;
}

/* Close icon */
.popup-close {
    position: absolute;
    top: 10px; /* Position it near the top of the popup */
    right: 10px; /* Position it near the right of the popup */
    font-size: 20px; /* Adjust the size of the "+" */
    color: white; /* Set the color to white */
    background: none; /* Remove any background */
    border: none; /* Remove any border */
    cursor: pointer; /* Change the cursor to a pointer */
    z-index: 1001; /* Ensure it appears above the popup content */
    transition: transform 1s ease; /* Smooth rotation animation */
}

.popup-close::before {
    content: "+"; /* Display the "+" sign */
    display: inline-block; /* Ensure it behaves like an inline element */
    transform-origin: center; /* Set the rotation point to the center */
}

.popup-close:hover::before {
    transform: rotate(-45deg); /* Rotate the "+" 45° to the left */
}

/* Off-canvas panel styles */
.off-canvas-panel {
    position: fixed;
    top: 0;
    right: calc(-21vw + 5px); /* Initially hidden off-screen */
    width: 21vw; /* Approx. 1/8 of the screen */
    height: 100%;
    z-index: 5; /* Ensure it appears above other content */
    transition: right 0.3s ease; /* Smooth slide-in animation */
    display: flex;
    flex-direction: column;
    padding: 0px;
    overflow-y: auto; /* Allow scrolling if content overflows */
    background-color:#f4f4f4; /* Background color for the off-canvas panel */
}

/* Off-canvas panel active state */
.off-canvas-panel.active {
    right: 0; /* Slide into view */
}

/* Style for paragraphs inside the off-canvas panel */
.off-canvas-panel p,
.off-canvas-panel p a {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 400; /* Light font weight */
    font-size: clamp(8px, 3vw, 18px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 1.5; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    position: relative; /* Enable positioning for the pseudo-element */
    text-decoration: none;
    margin-right: 15px;
    margin-left: 10px;
}

/* Add hover effect for paragraphs inside the off-canvas panel */
.off-canvas-panel p:hover::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 0; /* Start the underline from the left */
    bottom: -2px; /* Position the underline slightly below the text */
    width: calc(100%); /* Subtract 15px from the full width */    height: 1px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    transition: width 0.3s ease; /* Smooth transition for the underline */
}

/* Style for paragraphs inside the off-canvas panel */
.off-canvas-panel p1,
.off-canvas-panel p1 a {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 300; /* Light font weight */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 1.5; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    display: block;
    text-decoration: none;
    margin-right: 15px;
    margin-left: 10px;
}

/* Hover effect for links inside p1 */
.off-canvas-panel p1 a:hover {
    font-weight: 500; /* Change font weight on hover */
    text-decoration: none; /* Ensure no underline appears */
}

/* Style for p2 inside the off-canvas panel */
.off-canvas-panel p2 {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 300; /* Light font weight */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 3; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    display: block;
    margin-right: 15px;
    margin-left: 10px;
    position: relative; /* Enable positioning for the pseudo-element */
}

/* Always show underline for p2 */
.off-canvas-panel p2::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    bottom: 8px;
    left: 0; /* Start the underline from the left edge of the container */
    width: 100%; /* Make the underline span the full width of the container */
    height: 0.5px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    z-index: -1; /* Place the underline behind the text */
    margin-right: 0;
}

/* Ensure <a> inside <p1> has no extra spacing */
.off-canvas-panel p1 a,
.off-canvas-panel p a {
    margin-left: 0; /* Remove any extra margin */
    padding: 0; /* Remove any extra padding */
    display: inline; /* Ensure it behaves as an inline element */
}

/* Close button */
.close-panel {
    background: none;
    border: none;
    z-index: 2000; /* Ensure it is above the off-canvas panel */
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    align-self: flex-end; /* Align close button to the top-right */
}

/* "+" sign styling */
.off-canvas-trigger {
    position: fixed; /* Fix the "+" sign at the top */
    top: 46px;
    right: 50px;
    font-size: clamp(1.5em, 2vw, 6em); /* Scale font size between 1.5em and 3em */
    z-index: 2000; /* Ensure it is above other content */
    text-align: right;
    color: #999; /* Default color */
    font-weight: 300; /* Light font weight */
    padding: 0; /* Remove padding */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center the "+" horizontally */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for text color */
    cursor: pointer; /* Show pointer cursor */
}

/* Hover effect for the "+" sign */
.off-canvas-trigger:hover {
    color: #171717; /* Darker color */
}

/* Underline effect for the "+" sign */
.off-canvas-trigger::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    z-index: 2000; /* Ensure it is above other content */
    left: 50%; /* Start from the middle */
    bottom: 4px; /* Position the underline slightly below the text */
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: #acacac; /* Use the current text color for the underline */
    transition: width 0.6s ease, left 0.6s ease; /* Animate the width and position */
    transform: translateX(-50%);
}

.off-canvas-trigger:hover::after {
    width: 200vw; /* Expand the underline to the full width */
    left: 0; /* Move the starting point to the left */
}

/* Remove underline when not hovering */
.off-canvas-trigger.active::after {
    width: 0; /* Reset the underline width */
    left: 50%; /* Reset the starting point */
}

/* Hint element for the off-canvas panel */
.off-canvas-hint {
    position: absolute;
    top: 0;
    right: 0; /* Position it slightly outside the panel */
    width: 1vw; /* Width of the hint */
    height: 100%; /* Full height of the panel */
    background-color: #f4f4f4; /* Same background color as the panel */
    z-index: -1; /* Ensure it is above other content */
    cursor: pointer; /* Indicate it's clickable */
    border-left: none; /* Add a subtle border to indicate the panel's edge */
}

/* When the panel is active, hide the hint */
.off-canvas-panel.active .off-canvas-hint {
    display: none; /* Hide the hint when the panel is open */
}

.blog-container, .blog-entry, .blog-text, .image-carousel {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    color: #333; /* Default text color */
}

/* Scrollable blog container */
.blog-container {
    position: absolute;
    top: calc(5vh + 100px); /* Adjust spacing from the header */
    bottom: 30px; /* Adjust spacing from the footer */
    left: 0;
    right: 0;
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 40px; /* Spacing between blog entries */

}

/* Blog entry container */
.blog-entry {
    display: flex;
    flex-direction: column; /* Stack the image carousel and blog text vertically */
    align-items: center; /* Center the content horizontally */
    width: 100%; /* Full width of the container */
    margin-bottom: 40px; /* Add spacing between blog entries */
}

/* Wrapper for the date and image carousel */
.image-carousel-wrapper {
    position: relative; /* Enable absolute positioning for children */
    display: flex;
    justify-content: center; /* Center the carousel horizontally */
    align-items: center; /* Align the date and carousel vertically */
    width: 100%; /* Full width of the blog entry */
}

.image-date,
.image-date h2 {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency */
    font-weight: 300;
    font-size: clamp(8px, 1vw, 12px);
    color: #333; /* Default text color */
}

/* Date container */
.image-date {
    position: absolute; /* Remove it from the layout flow */
    right: calc(100% - 24.5vw); /* Position the right side of the text 26vw from the left */
    top: 0; /* Adjust the vertical position */
    font-weight: 300;
    z-index: 100;
    color: #333;
    text-align: right; /* Align the text to the right */
}


.blog-text h2 {
    font-weight: 300;
    margin-bottom: 10px;
    text-align: right;
}

.blog-text a {
    color: #333; /* Ensure links match the text color */
    text-decoration: underline; /* Remove underline from links */
    font-weight: 300;
}

.blog-text a:hover {
    font-weight: 500; /* Add underline on hover */
}

/* Image carousel container */
.image-carousel-container {
    width: 60%; /* Set the width of the carousel container */
    display: flex;
    justify-content: center; /* Center the carousel horizontally */
    align-items: flex-start; /* Align the carousel to the top */
}

/* Image carousel */
.image-carousel {
    width: 100%; /* Full width of the container */
    position: relative;
    overflow: hidden; /* Hide overflowing images */
    display: flex; /* Ensure the images are aligned properly */
    align-items: flex-start; /* Align images to the top */
    justify-content: center; /* Center images horizontally */
}

/* Images inside the carousel */
.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
    align-items: flex-start; /* Align all images to the top */
    width: max-content; /* Ensure the container's width matches the total width of all images */
}

.carousel-images img {
    width: 100%; /* Ensure each image takes up the full width of the container */
    height: auto; /* Maintain the aspect ratio of the image */
    max-height: 20vh; /* Set a maximum height for the image */
    object-fit: contain; /* Ensure the entire image is visible within the container */
    flex-shrink: 0; /* Prevent images from shrinking */
    align-self: flex-start; /* Align each image to the top of the container */
}

/* Blog text */
.blog-text {
    width: 45vw; /* Match the width of the image carousel */
    margin-top: 0; /* Add spacing between the carousel and the text */
    text-align: left; /* Center-align the text */
    font-weight: 300;
    font-size: clamp(8px, 1vw, 10px);
    line-height: 1.6;
    padding: 0 0 0 0;
    color: #333;
}

/* Remove padding and margin from the image-carousel and its images */
.image-carousel-wrapper,
.image-carousel-container,
.image-carousel,
.carousel-images,
.carousel-images img {
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
    box-sizing: border-box; /* Ensure padding and borders are included in the width/height */
}


/* Image carousel */
.image-carousel {
    width: 45vw; /* Set the width to 40% of the viewport */
    position: relative;
    overflow: hidden; /* Hide overflowing images */
    display: flex; /* Ensure the images are aligned properly */
    align-items: flex-start; /* Align images to the top */
    justify-content: flex-start; /* Align images to the left */
    height: auto; /* Let the height adjust dynamically */
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
    align-items: flex-start; /* Align all images to the top */
    width: max-content; /* Ensure the container's width matches the total width of all images */
}

.carousel-images img {
    width: 100%; /* Ensure each image takes up the full width of the container */
    height: auto; /* Maintain the aspect ratio of the image */
    max-height: 500px; /* Set a maximum height for the image */
    object-fit: contain; /* Ensure the entire image is visible within the container */
    flex-shrink: 0; /* Prevent images from shrinking */
    align-self: flex-start; /* Align each image to the top of the container */
}

/* Hover zones */
.hover-zone {
    position: absolute;
    top: 0;
    height: 100%; /* Full height of the carousel */
    z-index: 10; /* Ensure it is above the images */
    background-color: transparent; /* Invisible but clickable */
    pointer-events: auto; /* Allow pointer events */
}

/* Left hover zone */
.hover-left {
    left: 0;
    width: 20%; /* Cover the left 10% of the carousel */
    cursor: url('/Arrows/left_32.png'), auto; /* Custom left arrow cursor */
}

/* Right hover zone */
.hover-right {
    right: 0;
    width: 20%; /* Cover the right 10% of the carousel */
    cursor: url('/Arrows/right_32.png'), auto; /* Custom right arrow cursor */
}

/* Center hover zone */
.hover-center {
    left: 10%; /* Start after the left hover zone */
    width: 60%; /* Cover the central 80% of the carousel */
    cursor: url('/Arrows/plus_32.png'), auto; /* Custom plus symbol cursor */
}

/* Define font weights for Josefin Sans */
@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josephine Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/Josefin Sans/JosefinSans-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Define font weights for Roboto Mono */
@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Light.ttf') format('truetype');
    font-weight: 200; /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto Mono/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@media (max-width: 768px) {
    
    .off-canvas-panel,
    .off-canvas-trigger,
    .off-canvas-hint {
        display: none; /* Hide the side panel and hint on smaller screens */
    }

    .blog-container {
        padding: 10px 0 10px; /* Reduce padding for smaller screens */
    }

    .image-date {
        position: static; /* Remove absolute positioning */
        margin: 10px 0; /* Add spacing above and below */
        text-align: left; /* Center-align the date text */
        font-weight: 500;
    }

    .image-carousel-wrapper {
        display: flex;
        flex-direction: column; /* Stack the carousel and date vertically */
        align-items: center; /* Center-align the content */
    }
    
    /* Set consistent width for all blog entry elements */
    .blog-entry > * {
        width: 90%; /* Set all child elements of blog-entry to 90% width */
        margin: 0 auto; /* Center-align the elements */
    }

    /* Remove absolute positioning for image-date */
    .image-date,
    .image-date h2 {
        position: static; /* Remove absolute positioning */
        width: 100%;
        margin-bottom: 10px; /* Add spacing below the date */
        text-align: center; /* Center-align the date text */
    }

    /* Adjust image-carousel-container */
    .image-carousel-container {
        width: 100%; /* Match the width of other elements */
    }

    /* Adjust image-carousel */
    .image-carousel {
        width: 100%; /* Match the width of the container */
    }

    /* Adjust blog-text */
    .blog-text {
        width: 90%; /* Match the width of other elements */
        text-align: justify; /* Optional: Justify text for better readability */
    }

}