/* =======================================
   SUNSET DIARIES
======================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Quicksand',sans-serif;

    overflow-x:hidden;

    color:white;

    background:linear-gradient(
    180deg,
    #ffb347 0%,
    #ff944d 20%,
    #ff7b54 45%,
    #ff6b6b 70%,
    #7158a3 100%);

    min-height:100vh;

}

/* ===========================
NAVBAR
=========================== */

nav{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:90%;

padding:18px 35px;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(20px);

border-radius:30px;

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

z-index:999;

}

.logo{

font-size:28px;

font-weight:bold;

font-family:'Caveat',cursive;

}

nav ul{

display:flex;

gap:25px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:600;

transition:.35s;

}

nav a:hover{

color:#FFE59A;

}

/* ===========================
HERO
=========================== */

.hero{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:30px;

}

.hero h1{

font-size:80px;

font-family:'Caveat',cursive;

margin-bottom:20px;

text-shadow:0 8px 20px rgba(0,0,0,.2);

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

}

.hero p{

max-width:700px;

font-size:22px;

line-height:1.8;

margin-bottom:45px;

}

/* ===========================
BUTTON
=========================== */

.button{

display:inline-block;

padding:18px 45px;

border-radius:40px;

background:#fff;

color:#ff7b54;

font-weight:bold;

text-decoration:none;

transition:.3s;

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

}

.button:hover{

transform:translateY(-8px);

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

}

/* ===========================
CARDS
=========================== */

#cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:35px;

padding:80px;

}

.card{

padding:35px;

border-radius:25px;

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

backdrop-filter:blur(15px);

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

transition:.4s;

}

.card:hover{

transform:
translateY(-10px)
scale(1.02);

}

.card h2{

margin-bottom:18px;

font-size:28px;

}

.card p{

line-height:1.7;

}

/* ===========================
FOOTER
=========================== */

footer{

padding:80px;

text-align:center;

font-size:18px;

}

/* ===========================
SUN
=========================== */

.sun{

position:absolute;

top:90px;

right:120px;

width:180px;

height:180px;

background:#FFD86B;

border-radius:50%;

box-shadow:

0 0 80px #FFD86B,

0 0 150px #FFD86B,

0 0 220px #FFD86B;

animation:pulse 6s infinite;

}

/* ===========================
CLOUDS
=========================== */

.cloud{

position:absolute;

background:white;

opacity:.85;

border-radius:100px;

}

.cloud::before,
.cloud::after{

content:"";

position:absolute;

background:white;

border-radius:50%;

}

.cloud1{

width:170px;
height:60px;

top:140px;

left:-250px;

animation:cloudMove 60s linear infinite;

}

.cloud1::before{

width:70px;
height:70px;

left:20px;
top:-35px;

}

.cloud1::after{

width:90px;
height:90px;

right:20px;
top:-45px;

}

.cloud2{

width:220px;
height:70px;

top:280px;

left:-500px;

animation:cloudMove 85s linear infinite;

}

.cloud2::before{

width:80px;
height:80px;

left:35px;
top:-40px;

}

.cloud2::after{

width:95px;
height:95px;

right:25px;
top:-45px;

}

.cloud3{

width:160px;
height:55px;

top:430px;

left:-350px;

animation:cloudMove 100s linear infinite;

}

.cloud3::before{

width:60px;
height:60px;

left:25px;
top:-30px;

}

.cloud3::after{

width:80px;
height:80px;

right:18px;
top:-38px;

}

/* ===========================
ANIMATIONS
=========================== */

@keyframes cloudMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(170vw);

}

}

@keyframes pulse{

50%{

transform:scale(1.08);

}

}

@keyframes floatTitle{

50%{

transform:translateY(-10px);

}

}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:900px){

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

}

.hero h1{

font-size:56px;

}

.hero p{

font-size:18px;

}

#cards{

padding:30px;

}

}
/* ==========================
CURSOR SPARKLES
========================== */

.sparkle{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

pointer-events:none;

background:#FFF4A8;

animation:sparkle .7s linear forwards;

box-shadow:
0 0 15px #fff,
0 0 25px gold;

}

@keyframes sparkle{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:
translateY(-30px)
scale(0);

}
}