html, body{
    height:100%;
    margin:0;
}

body{
    background-color:#E9FDFF;
    overflow-x:hidden;
    position:relative;
}


#navigation{
    position:relative;
    z-index:3;

    width:50%;
    margin-top:-10px;
    padding:35px 10px;

    background:linear-gradient(to bottom,#f3f7f5,#c6e0d2);

    clip-path:polygon(
        0% 20%,10% 5%,30% 0%,50% 10%,
        70% 0%,90% 5%,100% 20%,
        100% 100%,0% 100%
    );

    border-top:6px solid #bcd6c9;
    border-bottom:3px dashed #b0c4b1;

    box-shadow:0 0 40px rgba(150,180,160,.4);

    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:20px;

    opacity:.45;
}

#navigation::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    animation:wingBreath 18s ease-in-out infinite;
}

@keyframes wingBreath{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.015);}
}


#navigation a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 32px;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
    font-family:'Cinzel Decorative',serif;

    color:#314138;
    background:#e7efe9;
    border:2px solid #a3b8ac;

    clip-path:ellipse(50% 60% at 50% 50%);
    text-decoration:none;

    transition:.35s ease;
}

#navigation a::before{
    content:"🪶";
    margin-right:10px;
    animation:featherSway 5s ease-in-out infinite;
}

@keyframes featherSway{
    0%{transform:rotate(-6deg);}
    50%{transform:rotate(6deg);}
    100%{transform:rotate(-6deg);}
}

#navigation a:nth-child(2)::before{animation-delay:.8s;}
#navigation a:nth-child(3)::before{animation-delay:1.6s;}
#navigation a:nth-child(4)::before{animation-delay:2.4s;}

#navigation a:hover{
    background:#d8ece0;
    transform:translateY(-4px);
}

#navigation a:hover::before{
    animation-play-state:paused;
    transform:rotate(-12deg) scale(1.2);
}


#header{
    background:url('images/head.jpg') center no-repeat;
    height:654px;
    width:100%;
}

#content{
    width:54%;
    margin:-33px auto;
    position:relative;
    z-index:3;
}

.contentx{
    width:100%;
    max-width:none; 
    padding:28px 36px;
    margin:20px 0;

    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;

    line-height:1.95;
    letter-spacing:.35px;
    font-family:'Lora',serif;
    font-size:19px;
    color:#5f6e69;
    background:rgba(245,255,250,.35);
    backdrop-filter:blur(4px);

    border-radius:60% 40% 55% 45% / 40% 60% 45% 55%;
    opacity:.7;
}


a{
    position:relative;
    color:#6d8e7c;
        font-size:19px;font-family:'Lora',serif;
    letter-spacing:1.2px;

    text-decoration:none;
    transition:.35s ease;
}

a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:100%;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #95c3a2,
            transparent
        );

    transform:scaleX(0);
    transform-origin:center;
    transition:.4s ease;
}

a:hover{
    color:#3f5c52;
    text-shadow:0 0 6px rgba(180,220,200,.5);
}

a:hover::after{
    transform:scaleX(1);
}

i, em{
        font-size:19px;font-family:'Lora',serif;
    font-style:italic;

    color:#8a86b3;

    background:none;
    padding:0 4px;

    letter-spacing:.6px;

    text-shadow:
        0 0 6px rgba(210,210,240,.4);

    transition:.4s ease;
}

i:hover,
em:hover{
    color:#5e5a86;
}


b, strong{
    font-size:19px;font-family:'Lora',serif;
    font-weight:600;

    color:#4e6f64;

    background:none;
    padding:0;

    letter-spacing:1.5px;

    text-shadow:
        0 1px 0 rgba(255,255,255,.6),
        0 0 8px rgba(170,210,200,.4);

    position:relative;
}


b::after,
strong::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(120,170,150,.6),
            transparent
        );

    opacity:.6;
}

h1{
    position:relative;
    display:inline-block;

    padding:22px 48px;

    font-family:'Cinzel Decorative',serif;
    font-size:38px;
    font-weight:500;
    letter-spacing:4px;

    color:#5f7f7f;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.55),
        rgba(200,230,230,.25)
    );

    border-radius:40px;

    text-shadow:
        0 0 12px rgba(255,255,255,.6),
        0 2px 4px rgba(0,0,0,.15);

    backdrop-filter:blur(4px);

    box-shadow:
        inset 0 0 20px rgba(255,255,255,.4),
        0 8px 25px rgba(120,170,170,.25);

    transition:.6s ease;
}


h1::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.35),
            transparent 70%
        );

    opacity:.25;
    animation:titleGlow 14s linear infinite;
}

@keyframes titleGlow{
    from{transform:translateX(-120%);}
    to{transform:translateX(120%);}
}


textarea,
input,
select {
    width: 40%;
    max-width: 40%;
    padding: 16px 20px;
    margin: 16px 0;

    font-family: 'Lora', serif;
    font-size: 18px;
    color: #3f4e45;

    background: #D3F0F3;
    backdrop-filter: blur(4px);

    border: 2px solid #b4cbc2;
    border-radius: 18px;

    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.2),
        0 3px 6px rgba(0, 0, 0, 0.05);

    transition: all 0.35s ease;
    caret-color: #8ea6a0;
}

textarea:focus,
input:focus,
select:focus {
    outline: none;
    border-color: #a3bfae;
    box-shadow:
        0 0 14px rgba(150, 200, 180, 0.6),
        inset 0 0 6px rgba(255, 255, 255, 0.08);
    background-color: rgba(245, 255, 250, 0.45);
}

textarea::placeholder,
input::placeholder,
select::placeholder {
    color: rgba(95, 110, 105, 0.6);
    font-style: italic;
}

textarea:hover,
input:hover,
select:hover {
    border-color: #95c3a2;
    box-shadow:
        0 0 12px rgba(160, 210, 190, 0.35),
        inset 0 0 4px rgba(255, 255, 255, 0.08);
}

textarea:disabled,
input:disabled,
select:disabled {
    background: rgba(245, 255, 250, 0.2);
    color: #748279;
    cursor: not-allowed;
}


.forest-footer{
    position:relative;
    margin-top:120px;
    padding:70px 20px 60px;

    text-align:center;
    font-family:'Cinzel',serif;
    color:#6f8f86;
}


.footer-ornament{
    width:320px;
    height:1px;
    margin:0 auto 30px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(160,210,190,.8),
            transparent
        );

    position:relative;
}

/* feather ornaments */
.footer-ornament::before,
.footer-ornament::after{
    content:"❧";
    position:absolute;
    top:-14px;

    font-size:20px;
    color:#9dc5b4;

    opacity:.7;
}

.footer-ornament::before{
    left:-25px;
}

.footer-ornament::after{
    right:-25px;
}


.footer-title{
    font-size:20px;
    letter-spacing:3px;
    margin-bottom:18px;

    text-shadow:
        0 0 8px rgba(210,240,230,.5);
}


.footer-links{
    display:flex;
    justify-content:center;
    gap:34px;
    margin-bottom:22px;
}

.footer-links a{
    font-size:18px;
    text-decoration:none;
    color:#7fa79a;
    position:relative;
    transition:.35s;
}

.footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:100%;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #a8d6c3,
            transparent
        );

    transform:scaleX(0);
    transition:.4s;
}

.footer-links a:hover{
    color:#45645c;
    text-shadow:0 0 6px rgba(180,220,210,.6);
}

.footer-links a:hover::after{
    transform:scaleX(1);
}


.footer-copy{
    font-size:14px;
    letter-spacing:1.5px;
    opacity:.75;
    font-style:italic;
}


.forest-footer::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(220,255,240,.15),
            transparent 70%
        );

    animation:footerBreath 18s ease-in-out infinite;
}

@keyframes footerBreath{
    0%,100%{opacity:.25;}
    50%{opacity:.5;}
}

@media (prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}


blockquote{
    position:relative;

    margin:50px auto;
    padding:44px 56px 40px;

    font-family:'Lora',serif;
    font-size:21px;
    line-height:1.9;
    letter-spacing:.45px;
    text-align:center;

    color:#4f645c;

    /* layered forest gradients */
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(220,255,240,.65),
            transparent 55%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(190,235,215,.45),
            transparent 60%
        ),
        linear-gradient(
            145deg,
            rgba(245,255,250,.85),
            rgba(210,235,225,.55),
            rgba(200,230,215,.65)
        );

    backdrop-filter:blur(8px);

    border-radius:
        65% 35% 55% 45% /
        45% 65% 35% 55%;

    border:1px solid rgba(160,210,190,.35);

    box-shadow:
        inset 0 0 35px rgba(255,255,255,.45),
        inset 0 0 80px rgba(180,230,210,.25),
        0 18px 45px rgba(110,160,145,.35);

    overflow:hidden;
}


blockquote::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:inherit;

    background:
        radial-gradient(
            circle,
            rgba(210,255,240,.35),
            transparent 70%
        );

    z-index:-1;
    animation:quoteBreath 16s ease-in-out infinite;
}

@keyframes quoteBreath{
    0%,100%{opacity:.35; transform:scale(1);}
    50%{opacity:.6; transform:scale(1.03);}
}


blockquote::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:inherit;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(210,255,235,.45),
            transparent 70%
        );

    opacity:.5;
    z-index:-1;

    animation:forestBreath 20s ease-in-out infinite;
}

@keyframes forestBreath{
    0%,100%{
        transform:scale(1);
        opacity:.35;
    }
    50%{
        transform:scale(1.05);
        opacity:.65;
    }
}


blockquote::after{
    content:"❝";
    position:absolute;

    top:-30px;
    left:36px;

    font-size:70px;
    font-family:'Cinzel Decorative',serif;

    color:#a6d6c3;

    text-shadow:
        0 0 18px rgba(210,255,240,.8),
        0 0 35px rgba(170,230,210,.5);

    animation:leafLight 12s ease-in-out infinite;
}

@keyframes leafLight{
    0%,100%{opacity:.55;}
    50%{opacity:.9;}
}


/* ===============================
   LINKLIST CONTAINER
=================================*/

#linklist ul{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;

    padding:0;
    margin:0;
    list-style:none;
}


#linklist ul li{
    width:100%;
    box-sizing:border-box;

    padding:26px 48px;
    text-align:center;

    font-family:'Lora', serif;
    font-style:italic;
    font-size:19px;
    letter-spacing:.4px;

    color:#5f6e69;

    background:rgba(245,255,250,.38);
    backdrop-filter:blur(6px);

    border-radius:
        55% 45% 60% 40% /
        45% 55% 40% 60%;

    border:1px solid rgba(160,210,190,.35);

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.35),
        0 10px 30px rgba(120,170,160,.25);

    transition:.45s ease;

    position:relative;
    overflow:hidden;
}


#linklist ul li::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:inherit;

    background:
        radial-gradient(
            circle,
            rgba(210,255,240,.35),
            transparent 70%
        );

    opacity:.35;
    z-index:-1;

    animation:linkBreath 18s ease-in-out infinite;
}

@keyframes linkBreath{
    0%,100%{
        transform:scale(1);
        opacity:.25;
    }
    50%{
        transform:scale(1.04);
        opacity:.55;
    }
}


#linklist ul li::after{
    content:"🪶";
    position:absolute;
    top:10px;
    right:18px;

    opacity:.55;
    font-size:18px;

    animation:featherSway 6s ease-in-out infinite;
}

@keyframes featherSway{
    0%,100%{ transform:rotate(0deg); }
    50%{ transform:rotate(-8deg); }
}



#linklist ul li:hover{
    transform:translateY(-6px);

    color:#3f5c52;

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

    box-shadow:
        0 0 25px rgba(180,230,210,.45),
        0 12px 40px rgba(120,170,160,.35);
}

#linklist ul li:hover::after{
    transform:rotate(-12deg) scale(1.15);
}


@media (max-width:700px){
    #linklist ul{
        grid-template-columns:1fr;
    }
}