:root {
    --black: #2A2929;
    --white: #FFF;
    --green: #13402F;
    --orange: #FF5C27;
    --main: "Hedvig Letters Serif", serif;
    --heading: "Hedvig Letters", serif;
    --mono: "DM Mono", monospace;
    --reg: "DM Sans", sans-serif;
    --italic: "Hedvig Letters", serif;
    --base-size: 1rem;
    --scale: 1.3;
    --small: calc(var(--basesize) / var(--scale));
    --h1: calc(var(--h2) * var(--scale));
    --h2: calc(var(--h3) * var(--scale));
    --h3: calc(var(--h4) * var(--scale));
    --h4: calc(var(--h5) * var(--scale));
    --h5: calc(var(--h6) * var(--scale));
    --h6: var(--base-size);
}


h2 {
    font-family: var(--reg);
    color: var(--black);
    font-weight: 600;
    font-size: var(--h2);
    line-height: 125%;
    letter-spacing: -2px;
}

p {
    margin: 0 auto;
    padding: 0px 0px 0 0;
    font-family: var(--reg);
    color: var(--black);
    font-size: 22px;
    font-weight: 400;
    line-height: 125%;
}

.highlight {
    color: var(--green);
}

body {
    margin: 0 auto;
    background: var(--white);
    background-image: radial-gradient(rgba(0, 0, 0, .05) 25%, transparent 0%);
    background-size: 15px 15px;
    background-position: 0 0;
}

body a {
    color: var(--black);
    font-family: var(--mono);
    font-size: 20px;
    text-decoration: underline;
    text-decoration-thickness: 2px; 
}

.caption {
    font-size: 1rem; /* Adjust the size as needed */
    font-family: var(--mono); /* Change to --reg if using a variable */
}

body a:visited {
    color: var(--black);
}

.section {
    border-bottom: 1px solid var(--black);
    padding: 60px 5% 60px 10%;
}

.two-column {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    margin: 0 auto;
    gap: 2rem;
    padding: 0 100px 0 0;
}

.button{
    background-color: var(--black);
    color: var(--white) !important;
    font-family: var(--reg) !important;
    padding: 10px;
    text-decoration: none;
}


.left {
    flex: .5;
}

.right {
    flex: 1;
    padding: 50px 0 60px 0;
}

/* RESPONSIVE FIX - STACK COLUMNS ON SMALL SCREENS */
@media (max-width: 768px) {
    .h2 {
        padding: 0px;
    }

    .section {
        padding: 60px 0 60px 0 !important;
    }

    body {
        padding: 0px !important;
    }

    p {
        padding: 0 0 0 0 !important;
    }

    .left {
        padding: 0 0 0 0 !important;
    }

    .right {
        padding: 0 0 0 0 !important;
    }

    .two-column {
        flex-direction: column; /* Stacks columns on small screens */
        gap: none !important;
        padding: 0 0 0 0;
        width: 90%;
    }
}