/* Base styles for mobile-first approach */
body {
    text-underline-offset: 0.4em;
    margin: 0;
    font-family: 'Cardo', serif;
    font-size: 18px;
    line-height: 1.7;
}

body a:link{
    color: #000;
    font-weight: bold;
}

body a:visited {
    color: grey;
}

/* Page container with max-width and dynamic width for default (mobile) layout */
.container {
    max-width: 800px;
    width: 85%;
    margin: 0 auto;        /* Center the container */
}

/* Image container styles */
.image-container {
    text-align: center;          /* Center the image and the caption */
    margin: 20px 0;              /* Add spacing around the images */
}

.image {
    max-width: 100%;             /* Make the image responsive */
    height: auto;                /* Maintain aspect ratio */
}

.caption {
    font-family: 'Cardo', serif; /* Use the same serif font as the body */
    color: #6c757d;              /* Set the caption color to grey (#6c757d) */
    font-size: 14px;             /* Caption font size */
    margin-top: 10px;            /* Add space between the image and the caption */
    text-align: center;          /* Ensure the text is centered */
}

/* Header styling with increased top margin and white background */
header {
    text-align: center;
    background-color: #fff;
    color: #000;
    padding: 20px 0;
    margin-top: 30px;
}

h1, h2, h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 2.7rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.5rem;
}

/* Justify paragraph text */
p {
    text-align: justify;
}

/* Mobile Navbar: centered, with black lines on top and bottom */
nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #000;
    padding: 10px;
    gap: 20px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.nav-group {
    display: flex;
    justify-content: center;
    gap: 20px;  /* Gap between the items */
}

/* Center the icons inside navbar links */
nav a {
    display: flex;           /* Apply flexbox to center the content */
    justify-content: center; /* Horizontally center the content */
    align-items: center;     /* Vertically center the content */
    color: #000;             /* Black text */
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1rem;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
}

nav a:link{
    color: #000;
}

nav a:visited{
    color: #000;
}

/* Style the icon */
.icon {
    width: 25px;
    height: 25px;
}

code {
  padding: .2rem .2rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: wrap-flow;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1rem;
  white-space:pre;
  overflow:auto;
}

/* Larger screens (desktops) */
@media (min-width: 1024px) {

    .container {
        width: 80%;
    }

    /* Header with increased top margin */
    header {
        margin-top: 50px;
    }

    /* Navbar for larger screens: Flex groups to divide links */
    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 50px;
        align-items: center;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    /* Group styling remains the same */
    .nav-group {
        gap: 20px;  /* Gap between the items */
    }

    /* Reset alignment for larger screens */
    .nav-left {
        justify-content: flex-start; /* Align first group to the left */
    }

    .nav-right {
        justify-content: flex-end;   /* Align second group to the right */
    }
}

/* Footer styles */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    font-size: 0.9rem;
}