/* ======================= START BASIC NAVIGATION FUNCTIONALITY =================================== */

nav ul {list-style-type: none;}
/* Hide menu bullets by default */


button {
  padding: 0 !important;
  background-image: url(bgimg/hamburger.svg);
  background-size: contain;
  height: 1rem;
  width: 1rem;
}
/* Remove default browser button styles to properly 
enable text-indent: 100% in .hide-text image replacement */


ul#menu {
 display: none;
}
/* Hide drop down menu by default when page loads */


ul#menu.show-nav {
  display: block !important;
}
/* force the navigation to display on click  */


#menu.show-nav {
	position: absolute;
    /* menu is on a layer, above normal page context: won't disrupt page when it appears */
	z-index: 10;
    /* layer 10: above everything else (random positive number) */
background-image: url(/global-project/img/card-back.jpg);
        border: 1px solid #444;
        max-width: 300px;
        margin: 1rem auto;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 12px;

        background-position: 50% 50%;
        background-size: 300px;
        background-repeat: no-repeat;
}
/* position the drop down menu when it displays */


#menu.show-nav li {
        margin: 1rem auto;
        padding: 1rem 1rem 1rem 1rem;
}


/* ======================= END BASIC NAVIGATION FUNCTIONALITY =================================== */




/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

input:not(.button), textarea, select {
        display: block;
        margin: 0;
        }
fieldset {
        margin: 1rem;
        border: 1px solid #444;
        padding: 1rem;
        background-color:#8d7c83;
  
    }
    label {
    color:#3e2723;
    }
    input:not(.button),
    textarea,
    select {
        display: block;
        margin: 0;
        width: 100%;
    }
   input[type="text"] {
        margin-bottom: 1rem;
    }
    legend {
  padding: 0 0.5rem;
  font-family: "Manufacturing Consent", system-ui;
  font-size: 30px;
  font-weight: bold;
  font-style: normal;
  color:rgb(0, 0, 0)
    }
    label {
        margin-bottom: 0.35rem;
        display: block;
    }
 .align-right {
        display: flex;

        justify-content: flex-end;
        /* Send buttons to the end of the flex box, ie right */

        margin-right: 1rem;
        /* match the width of the margin of the fieldset so it aligns */
    }
    .button[type="reset"] {
        margin-right: 1rem;
    }    
   textarea {
  min-height: 100px;
    }
    .comment-box {
        padding-top: 1rem;
        padding-bottom: 20rem;
        background-image: url(/global-project/img/me-holdingcardsgoldenhour.jpg);
        background-repeat: no-repeat;
        background-size: 30rem;
        background-position: 50% bottom;
    }
.header-container {
  display: flex;
  gap: 7px;
}

    .table {
      overflow-x:hidden;
      overflow-y:scroll;

    }
    .card {
        border: 1px solid #444;
        max-width: 300px;
        margin: 2rem auto;
        padding: 2rem 1rem 2rem 1rem;
        border-radius: 12px;

        background-position: 50% -120%;
        background-size: 300px;
        background-repeat: no-repeat;
    }

    .what2 {
        background-color: #8d7c83;
    }

    .today {
        background-color: #8d7c83;
    }

    .cards {
        background-color: #8d7c83;
    }

    span {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: bold;
  font-style:normal;
  color: #2f2f2c;
accent-color:  #e6e6e6;
    }
    .readmore {
        display: block;
        background-color: #3c4039;
        width: fit-content;
        padding: 1rem;
        color: white;
        font-weight: bold;
        margin: 2rem auto 0 auto;
        border-radius: 12px;
        box-shadow: 0px 0px 4px #444;
    }
        .card {
            border: 1px solid #444;
            max-width: 300px;
            margin: 2rem auto;
            padding: 2rem 1rem 2rem 1rem;
        }

        main ul {
            margin: 0 0 0 1rem;
            list-style-type: disc;
        }

        li {text-transform: capitalize;}

        .cellheader {
            font-weight: bold;
            text-align: left;
            color:#716976;
            font-size: 1.2rem;
            margin: 0 0 0.25rem 0;
        }

        .cellheader+h4 {
            color: #716976;
            font-weight: bold;
        }

        section {
            margin: 1rem 0 3rem 0;
        }
      @media screen and (min-width: 1068px) {
        /* css rules that only apply starting at a specific minimum page width */
        /* at the current font size and padding, the window must be at least 1068px wide to not cut off the the widest table row */

        .table {
          display: table;
        }

        .card {
          display: table-cell;
        }

        .row {
          display: table-row;
        }
      }
svg {
  height: 30px;
}

p {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: "400";
  font-style: normal;
  color:#2f2f2c;
}
h1 {
  font-family: "Manufacturing Consent", system-ui;
  font-size: 30px;
  font-weight: bold;
  font-style: normal;
  color:rgb(44, 44, 44)
}
h2 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 22px;
  font-weight: bold;
  font-style:normal;
  color: #2f2f2c;
}
h3 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 18px;
  font-weight: bold;
  font-style:normal;
  color: #2f2f2c;
}
h4 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 15px;
  font-weight: bold;
  font-style:normal;
  color: #2f2f2c;
}
tr {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: bold;
  font-style:normal;
}
th {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: "650";
  font-style:normal;
}
body {
  background-color: #f0eff7;
  color: rgb(115, 89, 99);
}

fieldset {
              font-weight: bold;
            margin: 10rem auto 0 auto;
            border-radius: 12px;
            box-shadow: 0px 0px 4px #444;
        }