style.css

body {
    margin: 50px 20px;
    font-family: "Ubuntu", system-ui; /* Apply Barriecito font */
    font-weight: 400; /* Default to regular font weight */
    font-style: normal;
}
  
h1, h2 {
  color: #0B6623;
  /*
  margin: 16px 0; */
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  padding: 0px; 
  gap: 10px;
  background-color: transparent;
  max-width: 700px;
  margin: 0 auto;
}

/* ... Other styles ... */

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    padding: 10px;
  }
 }

@media (min-width: 601px) { /* Adjust the breakpoint if needed */ 
  .item:nth-child(3) {
    grid-column: span 2; 
  }
}

.item-1 {
  display: grid;
  align-items: center;
  justify-content: center; 
  text-align: center;
}


.item {
  background-color: transparent;
  color: black;
  border-radius: 20px;
  padding: 20px;
  font-size: 150%;
  word-break: break-word; 
  hyphens: auto; 
}

.item img {
  width: 100%;
  height: auto; 
  max-width: 100%; 
  border-radius: 20px;
}

/* ===============
   Navigation Menu
   =============== */
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333; /* Dark charcoal */
  position: fixed; /* Set the navbar to fixed position */
  left: 0;
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 999; /* above content */
}

/* Add a margin to the content to avoid overlapping with the fixed menu
.content {
  margin-top: 50px; Adjust this value based on the height of your menu
}*/

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000
}

/* Add a black background color on mouse-over */
.topnav a:hover {
  background-color: black;
  color: white;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4F7942;
  color: white;
}

/* Hide the links inside the navigation menu (except for logo/home) */
#myLinks {
  display: none;
}

/* Show the links when the hamburger menu is clicked */
@media screen and (min-width: 600px) {
  .topnav a, .topnav #myLinks {
    display: inline;
  }
  .topnav a.icon {
    display: none;
  }
}
/* ===================
   Navigation Menu End
   =================== */
  
/* Google font */
  .ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* pop-up message */
#popup-message {
  display: none; /* Initially hide the message */
  position: fixed; /* Stay in place even when scrolling */
  left: 50%;  
  top: 50%; 
  transform: translate(-50%, -50%); /* Center the popup */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  width: 100%; 
  height: 100%; 
  z-index: 1000; /* Ensure it's above other content */
}

.popup-content {
  background-color: #fefefe; 
  margin: 15% auto; /* Center within the overlay */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Adjust the width as needed */
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}