/*
Name:Raj Shrestha
Course: CIS89A
Project: Beyond HTML Basics - CSS Zen Garden
Date: June 2026

This stylesheet demonstrates:

* Gradients
* Flexbox
* Hover effects
* Shadows
* Rounded corners
* Responsive design
* Typography enhancements
    */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family: “Trebuchet MS”, Arial, sans-serif;
background: linear-gradient(135deg,#0f172a,#1e293b,#334155);
color:#f8fafc;
line-height:1.8;
}

.page-wrapper{
width:90%;
max-width:1400px;
margin:auto;
padding:20px;
}

/* HEADER */

header{
text-align:center;
padding:60px 20px;
background:linear-gradient(90deg,#2563eb,#06b6d4);
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
margin-bottom:30px;
}

header h1{
font-size:4rem;
text-transform:uppercase;
letter-spacing:4px;
margin-bottom:10px;
}

header h2{
font-size:1.5rem;
color:white;
}

/* INTRO BLOCKS */

.summary,
.preamble{
background:rgba(255,255,255,.08);
padding:25px;
border-radius:15px;
margin-bottom:25px;
box-shadow:0 5px 15px rgba(0,0,0,.2);
}

/* MAIN CONTENT */

.supporting{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.explanation,
.participation,
.benefits,
.requirements{
flex:1 1 450px;
background:rgba(255,255,255,.08);
padding:25px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.25);
transition:all .3s ease;
}

.explanation:hover,
.participation:hover,
.benefits:hover,
.requirements:hover{
transform:translateY(-8px);
}

h3{
color:#38bdf8;
margin-bottom:15px;
border-bottom:2px solid #38bdf8;
padding-bottom:8px;
}

p{
margin-bottom:15px;
}

/* LINKS */

a{
color:#fbbf24;
text-decoration:none;
transition:.3s;
}

a:hover{
color:#ffffff;
text-decoration:underline;
}

/* SIDEBAR */

.sidebar{
margin-top:40px;
}

.sidebar .wrapper{
background:rgba(255,255,255,.08);
padding:25px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.sidebar h3{
color:#fbbf24;
}

.sidebar ul{
list-style:none;
}

.sidebar li{
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.15);
}

/* FOOTER */

footer{
width:100%;
text-align:center;
margin-top:30px;
padding:20px;
}

footer a{
display:inline-block;
background:#2563eb;
color:white;
padding:10px 18px;
border-radius:30px;
margin:5px;
}

footer a:hover{
background:#0ea5e9;
text-decoration:none;
}

/* FIRST LETTER EFFECT */

p:first-letter{
font-size:1.4em;
font-weight:bold;
color:#38bdf8;
}

/* CUSTOM SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:10px;
}

/* RESPONSIVE DESIGN */

@media(max-width:768px){

header h1{
    font-size:2.5rem;
}
.supporting{
    flex-direction:column;
}
.page-wrapper{
    width:95%;
}

}