:root {
  --primary-green: #0F8A5F;
  --secondary-green: #34A65F;
  --text-dark: rgb(33, 37, 41);
  --border-color: #0F8A5FB0;
  --bg-light-green: #34A65F30;
  --bg-medium-green: #34A65F40;
  --border-light: #0F8A5F30;
}

body {
  font-family: "Truculenta", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  margin: 0px;

  /* https://pattern.monster/candy-cane-1 */
  background-color: white;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23f4f1be00'/><path d='M9.498-2.496c.633.967 1.234 1.967 1.9 2.967.2.333.4.632.633.832.767.7 1.7 1.334 2.8.3 1.166-1.1.367-2.233-.366-3.367-1.033-.1-2-.333-3.033-.5-.634-.1-1.3-.165-1.934-.232zm-7.437 25.98c-.567.033-1.176.183-1.864.42-.566.567-1.034 1.234-1.3 1.967-.267.833-.5 1.999-.2 2.865.367-.5.867-.899 1.467-1.265.7-1.067 1.567-1.967 2.867-2.567a5.484 5.484 0 011.7-.5c-.896-.708-1.726-.975-2.67-.92zm29.998 0c-.567.033-1.174.183-1.862.42-.566.567-1.034 1.234-1.3 1.967-.267.833-.5 1.999-.2 2.865.367-.5.867-.899 1.467-1.265.7-1.067 1.567-1.967 2.867-2.567a5.484 5.484 0 011.7-.5c-.896-.708-1.728-.975-2.672-.92zm-4.395 1.653c-2.1 1.433-2.934 3.666-3.201 6-.1.933.5 2.067 1.5 2.334 1 .233 2.1-.6 2.3-1.6.1-.5-.3-.9-.333-1.334-1.1-1-1-2.867-.633-4.367.1-.367.2-.7.367-1.033zM5.832 26.305c-.698-.011-1.393.057-2.068.332-.5.2-.9.5-1.233.834.167.133.367.267.533.4a8.91 8.91 0 011.166 1.6c1.367.133 2.733.3 4.1.467.3.033.567.033.867.066-.9-1.3-1.8-2.568-2.666-3.668a12.577 12.577 0 00-.699-.031zm-.201 5.299c.567.866 1.166 1.732 1.7 2.6.232.366.5.732.733 1.099 1.234.166 2.466.267 3.666.433.434.067.868.135 1.301.235-.766-1.267-1.6-2.567-2.433-3.867-.967-.167-2.034-.135-3-.268-.634-.067-1.3-.166-1.967-.232zm3.867 5.9c.633.967 1.234 1.967 1.9 2.967.2.333.4.632.633.832.767.7 1.7 1.334 2.8.3 1.166-1.1.367-2.233-.366-3.367-1.033-.1-2-.333-3.033-.5-.634-.1-1.3-.165-1.934-.232z'  stroke-width='1' stroke='none' fill='%23226d5330'/><path d='M-.06 1.86c-.945-.056-1.775.211-2.67.92a5.483 5.483 0 011.699.5c1.3.6 2.167 1.499 2.867 2.566.6.366 1.1.765 1.467 1.265.3-.866.065-2.032-.201-2.865-.267-.733-.733-1.4-1.3-1.967-.687-.237-1.296-.387-1.863-.42zm30 0c-.945-.056-1.777.211-2.672.92a5.494 5.494 0 011.7.5c1.3.6 2.168 1.499 2.868 2.566.6.366 1.1.765 1.467 1.265.3-.866.065-2.032-.201-2.865-.267-.733-.733-1.4-1.3-1.967-.687-.237-1.296-.387-1.863-.42zM4.335 3.511c.167.333.265.666.365 1.033.367 1.5.467 3.367-.633 4.367-.033.433-.432.834-.332 1.334.2 1 1.3 1.833 2.3 1.6 1-.267 1.6-1.4 1.5-2.334-.268-2.334-1.1-4.567-3.2-6zM26.168 4.68c-.233.003-.466.014-.7.03-.866 1.1-1.767 2.369-2.667 3.669.3-.033.567-.033.867-.066 1.367-.167 2.733-.334 4.1-.467.333-.567.7-1.1 1.168-1.6.166-.133.366-.267.533-.4a3.665 3.665 0 00-1.235-.834c-.675-.275-1.368-.343-2.066-.332zm.201 5.299c-.667.066-1.333.165-1.967.232-.966.133-2.033.1-3 .268-.833 1.3-1.667 2.6-2.433 3.867.433-.1.865-.168 1.299-.235 1.2-.166 2.434-.267 3.668-.433.233-.367.499-.733.732-1.1.533-.867 1.134-1.733 1.701-2.6zm-3.867 5.9c-.633.067-1.3.132-1.934.232-1.033.167-2 .4-3.033.5-.733 1.134-1.534 2.268-.367 3.368 1.1 1.033 2.034.399 2.8-.301.234-.2.434-.499.634-.832.666-1 1.267-2 1.9-2.967z'  stroke-width='1' stroke='none' fill='%23f4403430'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
}

header {
  padding-top: 60px;
  width: 100%;
  height: 100%;
  min-height: 900px;
  background-image: url('img/header.jpg');
  background-position: center;
  background-position-y: -200px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
  font-family: "Kranky", serif;
  font-weight: 400;
  color: red;
  text-align: center;
  line-height: 1.2;
}

header h1 {
  font-size: 4rem;
  margin-top: 0px;
  margin-bottom: 0.5rem;
  padding: 0px 10px;
}

header h2 {
  font-size: 2.5rem;
  margin-top: 0px;
  margin-bottom: 0.5rem;
  padding: 0px 10px;
}

header h3 {
  font-size: 1.75rem;
  margin-top: 0px;
  margin-bottom: 0.5rem;
  padding: 0px 10px;
}

section {
  margin: auto;
  width: 75%;
  padding-top: 20px;
}

section h2 {
  text-align: center;
  font-size: 2.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

#hours .card-group {
  display: flex;
  flex-flow: row wrap;
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

#hours .card-group .card {
  border: 1px solid var(--border-color);
  flex: 1 1 calc(25% - 2px);
  max-width: 25%;
  display: flex;
  flex-direction: column;
}

#hours .card-group .card-header {
  margin-bottom: 0px;
  padding: 8px 16px;
  background-color: var(--bg-light-green);
  border-bottom: 1px solid var(--border-light);
}

#hours .card-group .card-header .card-title {
  font-size: 1.9em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 8px;
  min-width: 120px;
}

#hours .card-group .card-header .card-subtitle {
  font-size: 1.4em;
  line-height: 1.2;
  margin-top: 0;
  color: var(--text-dark);
}

#hours .card-group .card-body {
  flex: 1 0 0;
  padding: 16px;
  min-height: 70px;
}

#hours .card-group .card-body .card-text {
  font-size: 1.2em;
  margin-top: 0px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

#hours .card-group .card-footer {
  color: var(--text-dark);
  height: 40px;
  border-top: 1px solid var(--border-light);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  background-color: var(--bg-medium-green);
}

#directions #group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

#directions #group .address-wrapper {
  background-color: white;
  font-size: 1.3rem;
  flex: 1 1 0;
}

#directions #group .address-wrapper .bg-d-green {
  background-color: var(--bg-light-green);
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

#directions #group .address-wrapper .bg-d-green address {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  flex: 1 1 0;
}

#directions #group .address-wrapper .bg-d-green address strong {
  font-size: 1.6rem;
}

#directions #group .address-wrapper .bg-d-green .big-group {
  padding: 1rem;
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#directions #group .address-wrapper .bg-d-green .big-group a {
  text-decoration: none;
}

#directions #group iframe {
  width: 50%;
  min-width: 320px;
  aspect-ratio: 3 / 2;
  flex: 1 1 0;
}

footer {
  margin-top: 80px;
  width: 100%;
  height: 60px;
  font-family: "Kranky", serif;
  font-weight: 400;
  color: red;
  text-align: center;
  line-height: 1.2;
  background-image: url('img/header.jpg');
  background-position: center;
  background-position-y: -450px;
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

footer div {
  background-color: var(--bg-light-green);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer div p {
  margin-top: 40px;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
  header {
    min-height: 600px;
    background-position-y: 0px;
    background-size: cover;
  }

  header h1 {
    font-size: 2.5rem;
  }

  header h2 {
    font-size: 1.75rem;
  }

  header h3 {
    font-size: 1.25rem;
  }

  section {
    width: 90%;
  }

  section h2 {
    font-size: 2rem;
  }

  #hours .card-group {
    flex-direction: column;
  }

  #hours .card-group .card {
    border-bottom: 1px solid var(--border-color);
    max-width: 100%;
  }

  #directions #group {
    flex-direction: column;
  }

  #directions #group iframe {
    width: 100%;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 2rem;
  }

  header h2 {
    font-size: 1.5rem;
  }

  header h3 {
    font-size: 1rem;
  }

  section {
    width: 95%;
  }
}