/* =====================================================
   MY DIGITAL GARDEN
   Designed by Silviana Maristha
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@300;400;500;600&family=Caveat:wght@500;700&display=swap');

/* =====================================================
RESET
===================================================== */

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

html{

    scroll-behavior:smooth;

}

body{

    background:#FFFBF7;

    color:#4B3F39;

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

    overflow-x:hidden;

    position:relative;

}

/* =====================================================
SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#FFF7F2;

}

::-webkit-scrollbar-thumb{

    background:#E6B8C7;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#D58BA5;

}

/* =====================================================
BACKGROUND PAPER
===================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:url("assets/paper.png");

    opacity:.08;

    pointer-events:none;

    z-index:-10;

}

/* =====================================================
FLOATING DECORATION
===================================================== */

.flower{

    position:fixed;

    width:80px;

    opacity:.35;

    z-index:-5;

}

.flower1{

    top:8%;

    left:3%;

}

.flower2{

    bottom:5%;

    right:3%;

}

.blob{

    position:fixed;

    opacity:.15;

    z-index:-8;

}

.blob1{

    width:350px;

    top:-80px;

    right:-100px;

}

.blob2{

    width:280px;

    bottom:-80px;

    left:-60px;

}

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

.navbar{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1300px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 35px;

    z-index:999;

    transition:.4s;

}

.logo{

    font-family:'DM Serif Display',serif;

    font-size:30px;

    color:#D78BA5;

}

.nav-menu{

    display:flex;

    gap:40px;

    list-style:none;

}

.nav-menu a{

    text-decoration:none;

    color:#555;

    transition:.35s;

    font-size:15px;

}

.nav-menu a:hover{

    color:#D78BA5;

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    padding:0 8%;

    gap:70px;

}

.subtitle{

    color:#D78BA5;

    letter-spacing:2px;

    margin-bottom:20px;

}

.hero h1{

    font-family:'DM Serif Display',serif;

    font-size:92px;

    line-height:95px;

    margin-bottom:25px;

}

.typing{

    color:#93B59C;

    font-size:22px;

    margin-bottom:25px;

}

.hero-desc{

    line-height:2;

    color:#666;

    max-width:550px;

}

.hero-btn{

    display:inline-block;

    margin-top:45px;

    background:#D78BA5;

    color:white;

    padding:16px 36px;

    border-radius:60px;

    text-decoration:none;

    transition:.35s;

}

.hero-btn:hover{

    background:#A8C7A1;

    transform:translateY(-5px);

}

/* =====================================================
POLAROID
===================================================== */

.polaroid{

    width:380px;

    background:white;

    padding:18px;

    margin:auto;

    transform:rotate(-5deg);

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

    position:relative;

}

.polaroid img{

    width:100%;

    display:block;

}

.polaroid p{

    margin-top:18px;

    text-align:center;

    font-family:'Caveat',cursive;

    font-size:30px;

}

.tape{

    position:absolute;

    width:120px;

    height:28px;

    background:rgba(255,232,190,.7);

    top:-12px;

    left:50%;

    transform:translateX(-50%) rotate(-3deg);

    border-radius:6px;

}

/* =====================================================
SECTION TITLE
===================================================== */

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading span{

    color:#D78BA5;

    font-family:'Caveat',cursive;

    font-size:28px;

}

.section-heading h2{

    font-family:'DM Serif Display',serif;

    font-size:58px;

    margin-top:10px;

}

.section-heading p{

    margin-top:20px;

    color:#777;

}
/* =====================================================
OPENING
===================================================== */

.opening{

    padding:140px 10%;

    display:flex;

    justify-content:center;

}

.opening-card{

    max-width:820px;

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

    backdrop-filter:blur(15px);

    border-radius:35px;

    padding:70px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    position:relative;

}

.opening-card::before{

    content:"✿";

    position:absolute;

    font-size:80px;

    left:-20px;

    top:-20px;

    color:#F3D6DF;

}

.opening-card span{

    font-family:'Caveat',cursive;

    font-size:32px;

    color:#D58BA5;

}

.opening-card h2{

    font-family:'DM Serif Display',serif;

    font-size:58px;

    margin:20px 0;

    color:#594841;

}

.opening-card p{

    line-height:2;

    color:#666;

}

/* =====================================================
MY STORY
===================================================== */

.story{

    padding:120px 8%;

}

.story-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:flex-start;

}

/* Paper */

.paper{

    background:#FFFDF9;

    border-radius:25px;

    padding:45px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    position:relative;

}

.paper::before{

    content:"";

    position:absolute;

    top:25px;

    bottom:25px;

    left:35px;

    width:3px;

    background:#F5C9D8;

}

.paper h3{

    margin-left:25px;

    margin-bottom:25px;

    font-family:'DM Serif Display',serif;

    font-size:34px;

    color:#D58BA5;

}

.paper p{

    margin-left:25px;

    margin-bottom:20px;

    line-height:2;

    color:#555;

}

/* Sticky Note */

.sticky-note{

    background:#FFF3B8;

    border-radius:8px;

    padding:30px;

    transform:rotate(3deg);

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

    margin-bottom:40px;

    position:relative;

}

.sticky-note::before{

    content:"";

    width:70px;

    height:22px;

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

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%) rotate(-5deg);

}

.sticky-note h4{

    font-family:'DM Serif Display',serif;

    margin-bottom:20px;

    font-size:28px;

}

.sticky-note ul{

    list-style:none;

}

.sticky-note li{

    margin:12px 0;

}

/* Mini Polaroid */

.mini-polaroid{

    background:white;

    padding:15px;

    transform:rotate(-6deg);

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

}

.mini-polaroid img{

    width:100%;

    display:block;

}

.mini-polaroid p{

    margin-top:12px;

    text-align:center;

    font-family:'Caveat',cursive;

    font-size:24px;

}

/* =====================================================
HOVER EFFECT
===================================================== */

.paper,
.sticky-note,
.mini-polaroid{

    transition:.35s;

}

.paper:hover{

    transform:translateY(-8px);

}

.sticky-note:hover{

    transform:rotate(0deg) scale(1.03);

}

.mini-polaroid:hover{

    transform:rotate(-2deg) scale(1.03);

}

/* =====================================================
MEMORY WALL
===================================================== */

.memory-wall{

    padding:140px 8%;

}

/* Pinterest Layout */

.gallery-grid{

    columns:3 280px;

    column-gap:30px;

}

/* Semua Item */

.gallery-grid>*{

    break-inside:avoid;

    margin-bottom:30px;

}

/* =========================
PHOTO
========================= */

.photo{

    position:relative;

    background:white;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

}

.photo img{

    width:100%;

    display:block;

}

.photo p{

    padding:18px;

    text-align:center;

    font-family:'Caveat',cursive;

    font-size:25px;

}

/* Hover */

.photo:hover{

    transform:translateY(-10px) rotate(.5deg);

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

}

/* =========================
POLAROID STYLE
========================= */

.polaroid{

    background:white;

    padding:15px;

}

.rotate-left{

    transform:rotate(-4deg);

}

.rotate-right{

    transform:rotate(3deg);

}

/* =========================
BIG PHOTO
========================= */

.large img{

    min-height:420px;

    object-fit:cover;

}

/* =========================
QUOTE CARD
========================= */

.quote-card{

    background:#FDEFF4;

    border-radius:25px;

    padding:45px;

    text-align:center;

    font-family:'Caveat',cursive;

    font-size:34px;

    color:#6B5B53;

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

    position:relative;

}

.quote-card::before{

    content:"❝";

    position:absolute;

    top:10px;

    left:20px;

    font-size:70px;

    color:#F7C9DA;

}

/* =========================
NOTE CARD
========================= */

.note-card{

    background:#F7F4EB;

    border-radius:22px;

    padding:35px;

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

}

.note-card h3{

    font-family:'DM Serif Display',serif;

    margin-bottom:20px;

    color:#D58BA5;

}

.note-card ul{

    list-style:none;

}

.note-card li{

    margin:14px 0;

}

/* =========================
FLOWER STICKER
========================= */

.sticker{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

    height:150px;

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

}

/* =========================
PIN
========================= */

.photo::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#D95875;

    top:12px;

    left:50%;

    transform:translateX(-50%);

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

}

/* =========================
MASKING TAPE
========================= */

.photo::after{

    content:"";

    position:absolute;

    width:90px;

    height:22px;

    background:rgba(255,245,190,.65);

    top:-8px;

    left:50%;

    transform:translateX(-50%) rotate(-4deg);

    border-radius:4px;

}

/* =========================
ANIMATION
========================= */

@keyframes floatFlower{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* =====================================================
PROJECT SECTION
===================================================== */

.projects{

    padding:150px 8%;

}

/* ===========================
PROJECT CARD
=========================== */

.project-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:150px;

}

.project-card.reverse{

    direction:rtl;

}

.project-card.reverse>*{

    direction:ltr;

}

/* ===========================
IMAGE
=========================== */

.project-image{

    position:relative;

}

.project-image img{

    width:100%;

    border-radius:28px;

    display:block;

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

    transition:.45s;

}

.project-image::before{

    content:"";

    position:absolute;

    inset:-15px;

    border:2px dashed #EBC8D5;

    border-radius:35px;

    z-index:-1;

}

.project-card:hover .project-image img{

    transform:scale(1.03);

}

/* ===========================
CONTENT
=========================== */

.project-content{

    position:relative;

}

.category{

    display:inline-block;

    background:#F6E8EE;

    color:#C86E92;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:18px;

}

.project-content h3{

    font-family:'DM Serif Display',serif;

    font-size:52px;

    line-height:1.2;

    margin-bottom:25px;

    color:#4D413C;

}

.project-content p{

    color:#666;

    line-height:2;

    margin-bottom:35px;

}

/* ===========================
TOOLS
=========================== */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tags span{

    padding:10px 18px;

    border-radius:30px;

    background:white;

    border:1px solid #E8E8E8;

    transition:.3s;

}

.tags span:hover{

    background:#DFA6BA;

    color:white;

    transform:translateY(-3px);

}

/* ===========================
PROJECT NUMBER
=========================== */

.project-card::after{

    content:"0" counter(project);

    counter-increment:project;

    position:absolute;

    right:30px;

    top:-20px;

    font-size:130px;

    font-family:'DM Serif Display',serif;

    color:rgba(220,180,196,.12);

    pointer-events:none;

}

.projects{

    counter-reset:project;

}

/* ===========================
SMALL STICKERS
=========================== */

.project-card:nth-child(2)::before{

    content:"🌸";

    position:absolute;

    font-size:40px;

    left:-15px;

    top:40px;

}

.project-card:nth-child(3)::before{

    content:"☁";

    position:absolute;

    font-size:36px;

    right:-15px;

    top:50px;

}

.project-card:nth-child(4)::before{

    content:"🍀";

    position:absolute;

    font-size:38px;

    left:20px;

    bottom:-10px;

}

/* ===========================
HOVER
=========================== */

.project-card{

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

}

/* =====================================================
TOOLBOX
===================================================== */

.toolbox{

    padding:140px 8%;

}

.toolbox-wrapper{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:25px;

    margin-top:70px;

}

.tool{

    padding:18px 30px;

    border-radius:18px;

    font-size:18px;

    font-weight:500;

    cursor:pointer;

    transition:.35s;

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

}

.tool:hover{

    transform:translateY(-8px) rotate(-3deg);

}

.pink{
    background:#FFD8E6;
}

.green{
    background:#D7F0D8;
}

.cream{
    background:#FFF4D6;
}

.yellow{
    background:#FFF1B5;
}

.blue{
    background:#D9F0FF;
}

.sage{
    background:#DDE8D3;
}

.peach{
    background:#FFE2D2;
}

.lavender{
    background:#EADCF9;
}

.mint{
    background:#D6F4EA;
}

.rose{
    background:#F7D7DE;
}

/* =====================================================
LEARNING
===================================================== */

.learning{

    padding:120px 8%;

}

.learning-card{

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:35px;

    padding:60px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.learning-card span{

    font-family:'Caveat',cursive;

    color:#D58BA5;

    font-size:28px;

}

.learning-card h2{

    font-family:'DM Serif Display',serif;

    font-size:54px;

    margin:20px 0;

}

.learning-card p{

    color:#666;

    line-height:2;

}

.learning-list{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-top:40px;

}

.learning-list span{

    background:#F5F5F5;

    padding:12px 22px;

    border-radius:30px;

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

    font-size:15px;

}

/* =====================================================
CONTACT
===================================================== */

.contact{

    padding:150px 8%;

}

.letter{

    max-width:900px;

    margin:auto;

    background:#FFFDF9;

    border-radius:30px;

    padding:70px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    position:relative;

}

.letter::before{

    content:"💌";

    position:absolute;

    top:-25px;

    left:50%;

    transform:translateX(-50%);

    font-size:45px;

}

.letter span{

    color:#D58BA5;

    font-family:'Caveat',cursive;

    font-size:30px;

}

.letter h2{

    margin:15px 0 30px;

    font-size:54px;

    font-family:'DM Serif Display',serif;

}

.letter p{

    line-height:2;

    color:#666;

}

.contact-links{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.contact-links a{

    background:#FAFAFA;

    text-decoration:none;

    color:#555;

    padding:18px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:15px;

    transition:.3s;

}

.contact-links a:hover{

    background:#D58BA5;

    color:white;

    transform:translateY(-5px);

}

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

footer{

    padding:70px 8%;

    text-align:center;

}

.footer-line{

    width:120px;

    height:2px;

    background:#E8C4CF;

    margin:auto;

    margin-bottom:35px;

}

.footer-title{

    font-family:'Caveat',cursive;

    font-size:34px;

    color:#C97C9A;

}

.footer-copy{

    margin-top:18px;

    color:#888;

    font-size:14px;

}

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

#scrollTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#D58BA5;

    color:white;

    font-size:22px;

    cursor:pointer;

    display:none;

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

    transition:.3s;

}

#scrollTop:hover{

    transform:translateY(-5px);

    background:#A9C8A0;

}

/* =====================================================
REVEAL ANIMATION
===================================================== */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:all .9s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:150px;

}

.hero h1{

font-size:62px;

line-height:70px;

}

.story-wrapper{

grid-template-columns:1fr;

}

.project-card{

grid-template-columns:1fr;

}

.project-card.reverse{

direction:ltr;

}

.contact-links{

grid-template-columns:1fr;

}

.nav-menu{

display:none;

}

.toolbox-wrapper{

gap:15px;

}

}

@media(max-width:600px){

.section-heading h2{

font-size:38px;

}

.hero h1{

font-size:46px;

line-height:55px;

}

.polaroid{

width:100%;

}

.opening-card,
.paper,
.learning-card,
.letter{

padding:35px;

}

}