@charset "utf-8";

/*
	Made changes to Zen Garden by making an animated title used transformations, along with using grids and columns to remake the ordering of everythong in the page, along with overhauling the entire background.
*/

/* Sets up the main body styling with light blue background, custom font, and padding */
body {
n custom monospaced font family.
    */
    background-color: #e3f2fd;
    font-family: 'Courier New', Courier, monospace;
    color: #1a237e;
    margin: 0;
    padding: 0;
    line-height: 1.8;
}


/* Sets up the max-width centering container for the page content */
.page-wrapper {

    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
}

/* Reszied the dimensions of the text boxes to fid the grid */
header, div[role="article"], .intro, .preamble, .explanations, .participation, .benefits, .requirements, .main, .sidebar, footer {
    display: block;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    margin-bottom: 2rem;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(13, 71, 161, 0.08);
    box-sizing: border-box;
}

/* Styles the header container at the top of the page */
header {
    background: #1976d2;
    padding: 0;
    overflow: hidden;
}

/* Styles the sidebar section container */
.sidebar {
    background: #bbdefb;
}

/* Styles the footer section at the bottom of the page */
footer {
    text-align: center;
    background: #0d47a1;
    color: #ffffff;
    padding: 2rem;
}

/* Making title anitmated */
@keyframes titleGlow {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px #64b5f6;
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
}

/* Styles the main title heading element */
header h1 {
  
    animation: titleGlow 4s ease-in-out infinite;
    font-family: 'Impact', Charcoal, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #ffffff;
    text-align: center;
    background: #1976d2;
    padding: 3rem 1rem;
    margin: 0;
    letter-spacing: 2px;
    width: 100%;
    box-sizing: border-box;
}

/* Styles the subtitle heading inside the header */
header h2 {

    text-align: center;
    background: #1565c0;
    color: #e3f2fd;
    margin: 0;
    padding: 1rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: normal;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   4. TYPOGRAPHY & INTERACTIVE ELEMENTS
   ========================================== */
/* Styles section heading elements */
h3 {

    color: #0d47a1;
    border-bottom: 3px solid #64b5f6;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

/* Styles paragraph text layout and spacing */
p {

    margin-bottom: 1.2rem;
    max-width: none;
    word-wrap: break-word;
}

/* Styles anchor links across the document */
a {
    color: #1565c0;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Adds hover effects for anchor links */
a:hover {
    color: #ffffff;
    background-color: #1976d2;
    padding: 2px 4px;
    border-radius: 4px;
}