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

body{

    font-family:"Segoe UI",sans-serif;

    background:linear-gradient(
        135deg,
        #e9f7ff,
        #ffeef6
    );

    min-height:100vh;

    overflow-x:hidden;

    color:#555;
}

/* Main Layout */

.page-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

}

/* Card */

.card{

    width:100%;

    max-width:460px;

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

    backdrop-filter:blur(12px);

    border-radius:30px;

    padding:35px 28px;

    text-align:center;

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

    position:relative;

    z-index:2;

}

/* Titles */

h1{

    font-size:34px;

    color:#8c7441;

    margin-bottom:12px;

}

h2{

    font-size:24px;

    font-weight:500;

    color:#8c7441;

    margin-bottom:18px;

}

p{

    line-height:1.7;

    margin-bottom:20px;

}

/* Buttons */

button{

    width:100%;

    padding:15px;

    margin:10px 0;

    background:white;

    color:#c5a357;

    border:none;

    border-radius:30px;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

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

}

button:hover{

    transform:translateY(-3px);

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

}

/* Images */

.cute-image{

    width:100%;

    border-radius:20px;

    margin:15px 0;

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

}

/* Spotify */

iframe{

    width:100%;

    border:none;

    border-radius:14px;

    margin:8px 0;

}

/* Giphy */

.gif-container{

    position:relative;

    width:100%;

    padding-bottom:77%;

    border-radius:20px;

    overflow:hidden;

}

.gif-container iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

/* Links */

.action-link{

    display:block;

    background:white;

    color:#c5a357;

    text-decoration:none;

    padding:14px;

    border-radius:24px;

    margin:12px 0;

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

    transition:.25s;

}

.action-link:hover{

    transform:translateY(-3px);

}

/* Hydrangeas */

#hydrangeas{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.flower{

    position:absolute;

    top:-60px;

    font-size:28px;

    opacity:.75;

    animation:fall linear infinite;

}

@keyframes fall{

    from{

        transform:
        translateY(-100px)
        rotate(0deg);

    }

    to{

        transform:
        translateY(115vh)
        rotate(360deg);

    }

}

/* Relax page */

.relax-page{

    animation:pastels 18s infinite alternate;

    border-radius:25px;

    padding:20px;

}

@keyframes pastels{

    0%{
        background:#ffeef6;
    }

    25%{
        background:#e9f7ff;
    }

    50%{
        background:#eefde8;
    }

    75%{
        background:#fff5dc;
    }

    100%{
        background:#efe8ff;
    }

}

/* Quote */

#quote-box{

    background:#fafafa;

    border-radius:18px;

    padding:18px;

    margin-bottom:20px;

    line-height:1.6;

    min-height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Mobile */

@media(max-width:480px){

.card{

padding:28px 22px;

}

h1{

font-size:30px;

}

h2{

font-size:21px;

}

button{

font-size:15px;

}

}
.relax-mode {

    animation: pastelShift 12s infinite alternate;

}


@keyframes pastelShift {

    0% {

        background:#dff4ff;

    }


    50% {

        background:#ffe6f2;

    }


    100% {

        background:#e8ffe8;

    }

}