body{
    margin: 0px;
    background-image: url("hairypalm\ background\ image\ 2025.png");
    background-size: cover;    
    background-repeat: no-repeat;  
    background-position: center; 
    background-attachment: fixed;
}
main{
    margin-left: 20px;
    margin-right: 20px;
}
h1{
    text-align: center;
}

/*navbar stuff*/
.navbar {
  text-align: center; 
}
.navbar ul{
    list-style-type: none;
    background-color:black;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
    display:inline-flex;
    white-space: nowrap;
}
.navbar a{
    color: white;
    text-decoration: none;
    padding: 15px;
    display:inline-block;
}
.navbar a:hover{
    background-color: rgb(41, 41, 41);
}
.navbar li{
}
/*mobile navbar stuff */
@media screen and (max-width: 768px) {
  .navbar ul {
    display: flex;          /* Add this line */
    flex-direction: column; /* Now this will function */
    width: 100%;           
    text-align: center;    
  }
}

/*hero text container so text is same size as hero-image*/
.zine-container {
  display: flex; 
  flex-direction: column;
  text-align: center;   
  margin: 0 auto;
  width: fit-content;
}
/* force text to match parent container width */
.zine-text {
  width: 0;
  min-width: 100%;
  margin: 0 auto; 
  color: white;
  text-align: justify;
}
/*removing space between heading and paragraph*/
.zine-text h1 {
  margin-top: 0;
  margin-bottom: 0;
}
.zine-text p {
  margin-top: 0;
  margin-bottom: 0;
}
.zine-text h3 {
  margin-top: 0;
  margin-bottom: 0;
}
/*image settings for zine-image (repurposed hero-image)*/
.zine-image {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  max-width: 100%;
  max-height: calc(100vh - 150px); 
  height: auto;
  border: 2px solid #efff14;
}

/*settings for hero image at bottom of each page*/
.hero-image {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  max-width: 100%;
  max-height: calc(100vh - 150px); 
  height: auto;
  border: 2px solid #efff14;
}

/*grid for pictures, 4x a line*/
.sights-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /*keeps columns repeating 4x a line*/
  gap: 20px;
  padding: 10px;
}
/*sets initial size for pics + yellow outline*/
.sights-image {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #efff14;
}

/*reversible zine container*/
.zine2-container {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 700px;
  margin: 30px auto;
}

.zine2-image {
  width: 300px;
  max-width: 45%;
  height: auto;
  border: 2px solid #efff14;
}

.zine2-description {
  flex: 1;
  color: white;
  font-family: sans-serif;
}

.reverse {
  flex-direction: row-reverse;
}