*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /*Check out what this is about */
}
      /* ALL CODING ON THIS PAGE RELATES TO (index) IE THE HOME PAGE CONTENT AND NAVIGATION BAR */
      
body {
	background-image: url('../images/WoodyLightRender.jpg'); 
}

.website-name h1 {    /* Duffys Home Page */
font-family: "Tangerine";  
	color: #FF9933;
	font-style: italic;
	font-weight: normal;
	background-color: #000000;
	font-size: 42pt;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line if needed */
  justify-content: flex-start;  /* align items from the left */
 /* justify-content: center;  */ /*Uncomment this if you want to center the items */
  gap: 20px; /* Adjust as needed for spacing between each */
  margin-top: 20px;
  margin-left: 20px; /* Add some left margin to the row */
  padding-bottom: 40px;
}

.person {
  text-align: center;
  flex: 0 1 27%;          /* Try 30% width with flexibility */
  
}

.person.wide3 {
  flex: 0 1 40%; /* wider than the standard 30% */
}

.person.wide4 {
  flex: 0 1 33%; /* wider than the standard 30% */
}

.person.wide6 {
  flex: 0 1 33%; /* wider than the standard 30% */
}

.person p {
  font-family: Tangerine;
  font-size: 30px;
  color: blue;
  font-weight: bold;
  margin-bottom: 10px;
}


/* Base styles */
.navbar {
  background-color: #333;
  position: relative;
}

.navbar .hamburger {
  display: none;
  font-size: 30px;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
}

.navbar input[type="checkbox"] {
  display: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

.menu li {
  position: relative;
}

.menu li a {
  display: block;
  padding: 14px 75px;
  background-color: #333333;
  text-decoration: none;
  color: #FF9933;
  font-family: Tangerine;
  font-size: 26px;
  white-space: nowrap;
}

.menu li a:hover {
  background-color: #444;
}

.menu .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #444;
  z-index: 1000;
}

.menu li:hover > .dropdown {
  display: block;
}

/* Responsive rules */
@media screen and (max-width: 768px) {
  .navbar .hamburger {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
  }

  #menu-toggle:checked ~ .menu {
    display: flex;
  }

  .menu li {
    width: 100%;
  }

  .menu .dropdown {
    position: static;
  }

  .menu li:hover > .dropdown {
    display: none;
  }

  .menu li:focus-within > .dropdown,
  .menu li:active > .dropdown {
    display: block;
  }
}