/* Reset some default styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* cursor: crosshair; */
    }

    /* Body styles */
    body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        background-color: #FFF8E7;
        display: flex;
        align-items: flex-start;
        /* margin-bottom: 50px; */
    }

    .nav-menu hr{
        border: 1px solid #303030;
    }

    .main-content hr {
        border: 1px solid #303030;
        margin-bottom: 20px;
    }


    /* Navigation menu styles */
    .nav-menu {
        width: 30%;
        min-width: 350px;
        background-color: #FFF8E7;
        color: #303030;
        padding: 30px;
        height: 100vh; /* make menu fille screen height */
        overflow-y: auto /* add scrollbar if menu is too long */
    }

    .nav-menu h2 {
        font-size: max(min(1.5vw,36px),24px);
        font-weight: 500;
        /* margin-bottom: 20px; */
    }

    .nav-menu ol {
        font-size: 24px; /* Adjusted from 'size' to 'font-size' */
        font-weight: 500;
        list-style-position: inside;
        margin-left: 0; /* Resets any default margin */
        padding-left: 0; /* Resets any default padding */
    }

    .nav-menu li {
        font-size: max(min(1.5vw, 28px), 24px);
        font-weight: 500;
        margin-bottom: 3px;
        text-indent: -20px; /* Negatively indent the text */
        padding-left: 20px; /* Add padding to create space after the number */
    }

    .nav-menu a {
        text-decoration: none;
        font-size: max(min(1.5vw,28px),19px);
        transition: color 0.2s;
        font-weight: 500;
        margin-bottom: 10px;
        color: #303030;
    }

    .nav-menu a:hover {
        color: #5F9EA0;
    }

    /*-----------------------------------------------------------------------------------------*/

    /* Main content styles */
    .main-content {
        /* flex: 1; */
        max-width: 90%;
        min-width: 800px;
        padding: 20px;
        padding-left: 0px;
        padding-right: 120px;
        background-color: #FFF8E7;
        color: #303030;

        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    }

    .main-content h1 {
        font-size: 36px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .main-content h2 {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .main-content h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .main-content p {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .main-content ol {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 30px;
        /* display: list-item; */
        list-style-position: inside;
    }

    .main-content ul {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 30px;
        /* display: list-item;  */
    }

    .main-content table{
        border-spacing: 0;
        padding: 0;
        margin: 0;
    }

    .main-content img{
       margin-bottom: 20px;
    }


    .main-content video{
        margin-bottom: 40px;
    }

    .gallery{
        margin-bottom: 30px;
    }

    .main-content a {
        color: rgb(14, 127, 156);
    }

 /*-----------------------------------------------------------------------------------------*/

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Adjust based on your layout needs */
        grid-gap: 20px;
        padding: 20px;
    }

    .week {
        border: 1px solid #ddd;
        padding: 15px;
        text-align: center;
    }

    .week img {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }


    .main-content-frame {
        flex-grow: 1;
        height: 100vh;
        border: none;
    }

    /* Add this new rule to the end of your style.css */
    .image-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Creates two equal-width columns */
        gap: 10px; /* Sets the space between the images */
        margin-bottom: 10px; /* Adds space below the gallery */
    }

    /* This makes sure images inside the gallery also behave correctly */
    .image-grid-2 img {
        width: 100%;
        height: auto;
        margin-bottom: 0; /* The gallery's margin is used instead */
    }

    .image-grid-4 {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Define 2 equal-width columns */
        row-gap: 5px;    /* This sets ONLY the vertical gap to a smaller value */
        column-gap: 10px; /* This keeps the horizontal gap the same */
        margin-bottom: 10px;            /* Add space below the entire grid */
    }

    /* This ensures images inside the grid behave correctly */
    .image-grid-4 img {
        width: 100%;
        height: auto;
    }

    figure {
      /* This removes default browser margins and aligns with your other content */
      margin: 0 0 10px 0;
    }

    /* This specifically targets figures inside your grid */
    .image-grid-4 figure {
        margin: 5px; /* Resets/removes the margin */
    }


    figcaption {
      font-size: 16px;
      font-style: italic;
      color: #454545;
      text-align: center;
      margin-top: 8px;
    }

    /* Styling for foldable code blocks */
    details {
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 20px; /* Adds space between foldable blocks */
    }

    summary {
      font-weight: bold;
      padding: 15px;
      cursor: pointer; /* Changes cursor to a hand to indicate it's clickable */
      background-color: #ffff;    /* A light gray background */
      border-bottom: 2px solid #dddd; /* Separates summary from code */
    }

    /* Style for when the details element is open */
    details[open] > summary {
      border-bottom: 2px solid #dddd;
    }


    /* Add this to your style.css */
	pre code {
	    display: block; /* Makes the block take up the full width */
        /* background and border are now in summary and details style
	    border: 1px solid #ddd;
	    border-radius: 5px;
        */
	    background-color: #f4f4f4;
	    padding: 15px; /* Adds space inside the block */
	    font-family: 'Courier New', Courier, monospace; /* A standard monospaced font */
	    font-size: 14px;
	    overflow-x: auto; /* Adds a horizontal scrollbar if a line is too long */
	}

    model-viewer {
        width: 100%;
        height: 70vh;
        display: block; /* Ensures it takes up space correctly */
        margin-bottom: 25px;
    }