/* reset */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}



.page-wrapper {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.1);
}



@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito Sans', sans-serif;
  color: #333;
  text-align: center;

  background-image: url('images/zengarden1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
#zen-designs {
  position: relative;
}
#zen-designs section {
  margin-bottom: 2rem;
}

#zen-designs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  height: calc(300% + 4rem); 
  border: 4px solid green; 
  border-radius: 16px;
  z-index: -1;
  background: transparent;
}

p {
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding: 0.5rem;
}


.headline-container {
  margin-bottom: 3rem;
}

h1 {
  font-family: 'Tinos', serif;
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  display: inline-block;
  padding: 1rem 2rem;
  background-image: 
    url('images/zengarden1.jpg');
  background-color: #000000;
  border: 4px solid #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  margin-bottom: 1rem;
  color: white; 
  text-shadow:
    -.5px -.5px 0 green,
	 .5px  -.5px 0 green,
    -.5px .5px 0 green,
     .5px  .5px 0 green;
}

h2 {
  font-family: 'Tinos', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  color: #eee;
  margin-top: 0;
  margin-bottom: 3rem;
  text-shadow:
    -1px -1px 0 green,
     1px -1px 0 green,
    -1px  1px 0 green,
     1px  1px 0 green;
}

h3 {
  font-family: 'Tinos', serif;
  font-weight: bold;
  font-size: 2rem;
  color: #000000;
  margin-top: 0;
  padding: 1rem 1rem 0rem;
  margin-bottom: 1rem;
}

.content {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #222;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

nav {
  padding: 1em 0;
}

.nav-menu {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  display: inline;
}

.nav-menu a {
  color: #eee;
  text-decoration: none;
  font-weight: bold;
}

.nav-menu a:hover {
  color: #ffcc00;
}
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
    align-items: center;
  }
}
  .flex-item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
#zen-supporting,
#zen-summary,
#zen-preamble,
#zen-explanation,
#zen-participation,
#zen-benefits,
#zen-requirements
h2, h3, h5, h6, li, blockquote {
  max-width: 800px !important;
  margin: 2rem auto !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  text-align: left !important;
}


#zen-supporting p,
#zen-summary p,
#zen-preamble p,
#zen-explanation p,
#zen-participation p,
#zen-benefits p,
#zen-requirements p,
#zen-designs p { 
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.8;
}