* {
        margin: 0;
        padding: 0;
    }

    :root {
        --background: #faf6f1;
        --card-background: #faf6f188;
        --menu-hr: #faf6f1;
        --menu-bg: #004d40;
        --menu-text-color: rgb(63, 6, 6);
        --text-color: #004d40;
        --cta-color: #f16e00;;
        --cta-text-color: white;
        --white: #ffffff;
        --footer-color: #004d40;
        --footer-control-color: #faf6f1;
        --journal-background: #fae8d2;
        --journal-background-dark: #ffd7a6;
        --accent-hsl: 9.23076923076923,95.1219512195122%,59.80392156862745%;
        --headingExtraLargeColor: hsla(var(--accent-hsl),1);

        --darkColor: #2F4F4F
    }

    h1 {
        color: var(--darkColor);
    }

    body {
        font-family: 'VarelaRound', sans-serif;
    }

    a.logo {
        color: var(--darkColor);
        font-weight: bold;
        font-size: 30px;
        text-decoration: none;
    }

    .title-class {
        
    }

    .container {
        margin: 0px;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
       
    }

    .logo {
        font-weight: bold;
        font-size: 25px;
        text-decoration: none;
    }

    .nav-links {
        list-style: none;
        display: flex;
    }

    .nav-links li {
        margin-left: 20px;
    }

    .nav-links a {
        text-decoration: none;
        color: black;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }

    .line {
        width: 25px;
        height: 3px;
        background-color: black;
        margin-bottom: 5px;
    }

    .header-text {
        font-size: 30px;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr); 
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: row; /* By default, cards are arranged side by side */

        gap: 20px;
    }


    .card {
        color: var(--text-color);
        padding: 1rem;
       
        width: 330px;
        /* background-image: url("background.jpg") ; */
       
        
        display: flex;
        flex-direction: column;
    }

    @media screen and (max-width: 768px) {
        .cards {
            flex-direction: column; /* On mobile, stack the cards vertically */
        }
        
        .image-card {
            order: -1; /* Move the image card to the top */
        }
    }

    @media (max-width: 768px) {

        
        .nav-links {
            display: none;
        }

        .hamburger {
            display: flex;
        }

        .logo {
            font-size: 17px;
        }
    }

    body {background-color: var(--background)}

    .underline-nav {
        border-bottom: 1px solid black;
    }

    #menu_button {
        margin-top: 2vmin;
        margin-left: 2vmin;
        width: 8vmin;
        height: 8vmin;
        background-size: 100%;
        /* inline SVG element! */
        background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 80" width="40" height="40" version="1.0" xmlns="http://www.w3.org/2000/svg"><rect x="15" width="90" height="15" rx="10"></rect><rect x="15" y="30" width="90" height="15" rx="10"></rect><rect x="15" y="60" width="90" height="15" rx="10"></rect></svg>');
    }