/* ==========================================
   Emily's Pastel Zen Garden
========================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Pacifico&family=Playfair+Display:wght@700&display=swap');

/* BODY*/

body{
    margin:0;
    padding:0;
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(-45deg,#ffe8f3,#fff7d6,#dff6ff,#ece4ff);
    background-size:400% 400%;
    animation:gradientMove 10s ease infinite;
    color:#555;
    line-height:1.8;
}

/* Animated background */
@keyframes gradientMove{

0%{background-position:0% 25%;}

50%{background-position:75% 50%;}

100%{background-position:0% 50%;}

}

/*Main wrapper*/

.page-wrapper{

width:90%;
max-width:1000px;
margin:auto;

}

/*Header*/

header{

text-align:center;
padding:25px;
margin:30px 0;

background:rgba(255,255,255,.55);

backdrop-filter:blur(12px);

border-radius:35px;

box-shadow:0 15px 30px rgba(0,0,0,.15);

}

/* Main title */

h1{

font-family:'Pacifico',cursive;

font-size:70px;

color:#66AEDD;

text-shadow:4px 4px 8px rgba(0,0,0,.15);

animation:floatTitle 3s ease-in-out infinite;

}

/* Floating title */

@keyframes floatTitle{

0%{transform:translateY(0);}

50%{transform:translateY(-8px);}

100%{transform:translateY(0);}

}

/* Subtitle */

h2{

font-size:25px;

font-style:italic;
  
  font-weight: bold;

color:#8B74D8;

}

/* General section spacing */

.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements{

margin:30px 0;

padding:30px;

transition:.5s;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

/* Hover animation */

.summary:hover,
.preamble:hover,
.explanation:hover,
.participation:hover,
.benefits:hover,
.requirements:hover{

transform:translateY(-8px) scale(1.05);

box-shadow:0 18px 35px rgba(0,0,0,.25);

}

/*BOX 1
   Pastel Blue*/

.summary{

background:linear-gradient(135deg,#dff6ff,#bfeaff);

border-radius:40px;

border:4px dashed pink;

}

.summary h3{

font-family:'Playfair Display',serif;

color:#4C9ED4;

letter-spacing:4px;

text-transform:uppercase;

}

/*BOX 2
   Pastel Pink*/

.preamble{

background:linear-gradient(135deg,#ffe5ec,#ffd4e5);

border-radius:15px 50px;

border:4px dotted white;

}

.preamble h3{

font-family:Georgia,serif;

font-style:italic;

color:#ff6ea8;

text-decoration:underline;

}

/*BOX 3
   Pastel Yellow*/

.explanation{

background:linear-gradient(135deg,#fff8c8,#fff0a3);

border-radius:50px 15px;

border:4px double #E8D8FF;

}

.explanation h3{

letter-spacing:5px;

color:#d69d00;

text-shadow:2px 2px white;

}

/* Paragraphs */

p{

background:rgba(255,255,255,.45);

padding:18px;

border-radius:18px;

backdrop-filter:blur(6px);

}

/* Fancy first letter */

p::first-letter{

font-size:220%;

font-weight:bold;

color:#ff7eb6;

}

/* Highlight selected text */

::selection{

background:#ffb6d9;

color:white;

}

/* Links */

a{

color:#6a8cff;

font-weight:bold;

text-decoration:none;

transition:.3s;

}

a:hover{

color:#ff5c8d;

text-decoration:underline;

}

/* Sidebar */

.sidebar{

background:rgba(255,255,255,.45);

padding:20px;

border-radius:35px;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}
/* =====================================
   BOX 4
   Pastel Purple
=====================================*/

.participation{

background:linear-gradient(135deg,#E8D8FF,#DCC7FF);

border-radius:50px;

border:4px groove white;

}

.participation h3{

font-family:"Georgia",serif;

font-style:italic;

color:#7A5FD6;

letter-spacing:3px;

text-shadow:2px 2px white;

}

/* =====================================
   BOX 5
   Pastel Peach
=====================================*/

.benefits{

background:linear-gradient(135deg,#FFE3CC,#FFD2B0);

border-radius:20px 50px 20px 50px;

border:4px solid white;

}

.benefits h3{

font-family:"Trebuchet MS",sans-serif;

color:#D37A32;

text-transform:uppercase;

letter-spacing:4px;

}

/* =====================================
   BOX 6
   Pattern repeats (Blue)
=====================================*/

.requirements{

background:linear-gradient(135deg,#DFF6FF,#BFEAFF);

border-radius:40px;

border:4px dashed white;

}

.requirements h3{

font-family:"Playfair Display",serif;

color:#4C9ED4;

letter-spacing:4px;

}

/* ==========================
   Sidebar
==========================*/

.sidebar{

background:rgba(255,255,255,.55);

padding:25px;

margin-top:30px;

border-radius:35px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.sidebar h3{

color:#8B74D8;

text-align:center;

letter-spacing:2px;

}

/* ==========================
   Navigation Links
==========================*/

nav a{

display:block;

padding:12px;

margin:10px 0;

background:white;

border-radius:25px;

transition:.3s;

box-shadow:0 5px 10px rgba(0,0,0,.1);

}

nav a:hover{

background:#FFD6EC;

transform:translateX(8px);

}

/* ==========================
   Lists
==========================*/

ul{

list-style:"🌸 ";

padding-left:30px;

}

li{

padding:8px;

}

/* Alternate list colors */

li:nth-child(odd){

background:rgba(255,255,255,.25);

border-radius:12px;

}

li:nth-child(even){

background:rgba(255,255,255,.45);

border-radius:12px;

}

/* ==========================
   Footer
==========================*/

footer{

margin-top:40px;

padding:30px;

text-align:center;

background:linear-gradient(135deg,#FFFFFF,#F6F0FF);

border-radius:35px;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

footer a{

padding:10px 18px;

margin:8px;

display:inline-block;

background:#DFF6FF;

border-radius:25px;

}

footer a:hover{

background:#FFE5EC;

transform:scale(1.08);

}

/* ==========================
   Decorative Scrollbar
==========================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#F9F3FF;

}

::-webkit-scrollbar-thumb{

background:#CDB8FF;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#A98CFF;

}

/* ==========================
   Decorative Line
==========================*/

h3::after{

content:" ✿";

color:#FF8FAB;

}

/* ==========================
   Responsive Layout
==========================*/

@media(max-width:900px){

.page-wrapper{

width:95%;

}

header{

padding:25px;

}

h1{

font-size:48px;

}

.sidebar{

margin-top:20px;

}

nav a{

font-size:15px;

}

}

/* ==========================
   Small Screen
==========================*/

@media(max-width:600px){

body{

padding:10px;

}

h1{

font-size:38px;

}

h2{

font-size:22px;

}

.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements{

padding:18px;

margin:18px 0;

}

}

/* ==========================
   End of Stylesheet
==========================*/