/* Zen Garden CSS Style */

/* Beyond HTML Basics 
Regina Kang 
Nov. 2025 */


/* Basic Style */
body {
    /*border: 5px solid black;
    margin: 10px;*/
  background-color: #efe6ff; /*light purple*/
  color: white;
  font-family: Arial, sans-serif;
  padding: 25px;
}

/* Page wrapper */
.page-wrapper {
    /*border: 5px dashed black;
    padding: 10px;
    margin: 10px;*/
  margin: 25px;
}

/* Intro section */
#zen-intro {
    /*border: 3px solid red;
    padding: 10px;
    margin: 10px;*/
  background-color: #4b0082; /*Indigo*/
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 10px 18px grey;
}
/* Main header */
#zen-intro h1 {
  margin: 0;
  font-size: 2.5rem;
  text-align: center;
  border-bottom: 1px solid white;
  padding-bottom: 10px;
}

#zen-intro h2 {
  font-size: 1.1rem;
}
/* Intro Links */
#zen-intro a {
  color: white;
  font-weight: bold;
}
#zen-intro a:hover {
  color: purple;
}

/* Main Content */
#zen-supporting {
    /*border: 3px solid orange;
    padding: 10px;
    margin: 10px;*/
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  display: block;
}
/* Main Content Headings */
#zen-supporting h3 {
  color: #4b0082; /*Indigo*/
  font-size: 1.1rem;
}
/* Main Content Links */
#zen-supporting a {
  color: #4b0082; /*Indigo*/
  text-decoration: none; /*remove underline*/
}
#zen-supporting a:hover {
  color: rgba(90,48,140,0.5);
}

/* Sections within main */
#zen-explanation,
#zen-participation,
#zen-benefits,
#zen-requirements {
    /*border: 3px dotted orange;
    padding: 10px;
    margin: 10px;*/
  border: 2px solid rgba(90,48,140,0.40); /*light purple border*/
  background: linear-gradient(175deg, #fff, #efe6ff); /*gradient background*/
  color: black;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
}
/* Hover effect for each main section */
#zen-explanation:hover,
#zen-participation:hover,
#zen-benefits:hover,
#zen-requirements:hover {
  transform: translateY(-5px); /*slight raise*/
  border-color: rgba(90,48,140,1); /*border becomes darker*/
  box-shadow: 0 10px 18px grey;
  border-color: rgba(90,48,140,1); /*border becomes darker*/
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /*smoother transition*/
}

/* Sidebar */
.sidebar {
    /*border: 3px solid green;
    padding: 10px;
    margin: 10px;*/
  margin-top: 15px;
}
.sidebar h3 {
  margin: 0 0 10px 0;
  color: #4b0082;
}
.sidebar ul {
  list-style: none; /*remove bullets*/
  padding-left: 0;
  margin: 0;
}
.sidebar li {
  padding: 5px 0;
  border-top: 1px solid rgba(90,48,140,0.1);
}
/* Sidebar Links */
.sidebar a {
  color: #4b0082; /*Indigo*/
  font-weight: bold;
  text-decoration: none; /*remove underline*/
  transition: color 0.2s ease, transform 0.2s ease;
}
.sidebar a:hover {
  color: rgba(90,48,140,0.5);
}
/* Layout */
.sidebar .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /*two columns*/
  gap: 20px; /*space between columns*/
}
#design-selection {
  grid-column: 1 / 2; /*left column*/
  grid-row: 1 / 3; /*span vertically*/
}
/* Sections within sidebar */
#design-selection {
    /*border: 3px dotted green;
    padding: 10px;
    margin: 10px;*/
  background-color: #efe6ff;
  border: 2px solid rgba(90,48,140,0.1);
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 0px;
  margin: 5px;
}
#design-selection a:hover {
  color: #ae00ff;
}
#design-archives,
#zen-resources {
  background-color: white;
  border: 2px dashed rgba(90,48,140,0.1);
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 0px;
  margin: 5px;
}

/* Header Animations */
h1, h2, .preamble h3, .sidebar h3 {
    animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
    0% {
        text-shadow: 0 0 5px #d4a5ff, 0 0 10px #b47bff;
    }
    100% {
        text-shadow: 0 0 15px #ae00ff, 0 0 25px #6f26ff;
    }
}

/* Footer */
footer {
    /*border: 3px solid blue;
    padding: 10px;
    margin: 10px;*/
  text-align: center;
  font-size: 0.9rem;
  margin-top: 12px;
}