/*======================================================
    Sakura's Blossoms
    Main Stylesheet
    Part 1
    A nostalgic Babyz fansite for Neocities
======================================================*/

/* ---------- Google Fonts ---------- */

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

/* ---------- Color Palette ---------- */

:root{

    --pink:#f8b8d6;
    --lightpink:#ffe5f1;

    --lavender:#ddd7ff;
    --purple:#b59ddb;

    --sky:#c6efff;
    --mint:#dcf9ef;

    --cream:#fffdf9;

    --text:#6b5072;

    --border:#efb4d2;

    --shadow:rgba(126,92,130,.18);

}

/* ---------- Reset ---------- */

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

/* ---------- Page ---------- */

body{

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

    background-repeat: repeat-y;

    background-size:100% auto;

    background-position:center top;

    background-attachment:fixed;

    font-family:Verdana, Geneva, sans-serif;

    font-size:15px;

    line-height:1.7;

    color:var(--text);

}

/* ---------- Center Wrapper ---------- */

#wrapper{

    width:min(1200px,92%);
    margin:100px auto 25px;

}

/*======================================================
                    HEADER
======================================================*/

header{

    text-align:center;

}

/* Banner */
.banner{

    width:min(850px,95%);
    display:block;
    margin:auto;

    border-radius:24px;

    box-shadow:
        0 0 25px rgba(255,255,255,.9),
        0 8px 25px rgba(230,170,205,.35);

}

/*======================================================
                NAVIGATION
======================================================*/

nav{

    margin-top:18px;
    margin-bottom:28px;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;

}

/* Buttons */

nav a{

    text-decoration:none;

    color:#875a78;

    font-weight:bold;

    background:linear-gradient(
        to bottom,
        #fff8fc 0%,
        var(--lightpink) 40%,
        var(--pink) 100%
    );

    padding:

        11px
        30px;

    border-radius:999px;

    border:2px solid var(--border);

    box-shadow:

        0 4px 10px rgba(0,0,0,.08),

        inset 0 2px 0 rgba(255,255,255,.8);

    transition:.25s;

}

/* Hover */

nav a:hover{

    transform:translateY(-3px);

    background:white;

    box-shadow:

        0 0 15px #ffd7ef,

        0 5px 12px rgba(0,0,0,.15);

}

/* Active */

nav a.active{

    background:

        linear-gradient(

            to bottom,

            #ffeaf5,

            #f4c2dc

        );

}

/*======================================================
            MAIN CONTENT WINDOW
======================================================*/

.content{

    background:

        rgba(255,255,255,.90);

    backdrop-filter:blur(4px);

    border:

        3px solid var(--border);

    border-radius:22px;

    padding:35px;

    box-shadow:

        0 8px 22px var(--shadow);

}

/*======================================================
                    HEADINGS
======================================================*/

h1{

    font-family:

        "Cherry Bomb One",
        cursive;

    color:#df76ac;

    text-align:center;

    font-size:2.5rem;

    margin-bottom:20px;

}

h2{

    font-family:

        "Cherry Bomb One",
        cursive;

    color:#d86ca2;

    font-size:1.7rem;

    margin-top:30px;
    margin-bottom:12px;

}

h3{

    color:#b8749c;

    margin-top:20px;

}

/*======================================================
                TEXT
======================================================*/

p{

    margin-bottom:16px;

}

a{

    color:#b96ea0;

}

a:hover{

    color:#d8589e;

}

/*======================================================
            DIVIDERS
======================================================*/

.divider{

    text-align:center;

    margin:

        28px
        0;

    color:#dc8db6;

    letter-spacing:4px;

    font-size:18px;

}

/*======================================================
            SMALL STATUS BAR
======================================================*/

.status{

    background:

        linear-gradient(

            to right,

            #fff,

            #fef2fa

        );

    border:

        1px solid #f1b7d4;

    border-radius:12px;

    padding:12px 18px;

    margin-bottom:25px;

    text-align:center;

    font-size:.92rem;

}

/*======================================================
                UPDATE BOX
======================================================*/

.updates{

    margin-top:30px;

    background:#fff8fc;

    border:

        2px dashed #e8add0;

    border-radius:18px;

    padding:22px;

}

.updates h2{

    margin-top:0;

    text-align:center;

}

.update-entry{

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:

        1px dotted #efc4db;

}

.update-entry:last-child{

    border:none;

    margin-bottom:0;

    padding-bottom:0;

}

.update-date{

    color:#d56ea4;

    font-weight:bold;

    margin-bottom:6px;

}

/*======================================================
            FEATURE WINDOW
======================================================*/

.feature-box{

    margin-top:30px;

    background:

        linear-gradient(

            #ffffff,

            #fff6fb

        );

    border:

        2px solid #efc0db;

    border-radius:20px;

    padding:25px;

    text-align:center;

}

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

img{

    max-width:100%;

}

.image-frame{

    background:white;

    border:

        3px solid #f0bfd8;

    border-radius:16px;

    padding:10px;

    box-shadow:

        0 4px 12px rgba(0,0,0,.10);

}

/*======================================================
        SAKURA'S BLOSSOMS
        STYLE.CSS
        PART 2
        Profile Cards, Galleries & Components
======================================================*/


/*======================================================
                SECTION TITLES
======================================================*/

.section-title{

    text-align:center;

    margin:40px 0 25px;

    position:relative;

}

.section-title::before,
.section-title::after{

    content:"✿";

    color:#f2a6cb;

    margin:0 12px;

}

/*======================================================
                PROFILE GRID
======================================================*/

.profile-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(230px, 230px));

    gap: 20px;

    justify-content: center;

}


/*======================================================
                PROFILE CARD
======================================================*/

.profile-card{

    background:white;

    border:3px solid var(--border);

    border-radius:20px;

    overflow:hidden;

    text-align:center;

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

    transition:.25s;

}

.profile-card:hover{

    transform:translateY(-6px);

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

}

.profile-image {

    width: 220px;
    height: 220px;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("images/profile-bg.png");

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}


.profile-image img {

    max-width: 170px;
    max-height: 170px;

    object-fit: contain;

}
.profile-info{

    padding:18px;

}

.profile-info h3{

    margin:0 0 8px;

    color:#d96ea5;

}

.profile-info p{

    font-size:.92rem;

    margin-bottom:10px;

}


/*======================================================
                BABY INFO TAGS
======================================================*/

.tag{

    display:inline-block;

    padding:

        5px
        12px;

    margin:3px;

    border-radius:999px;

    background:#ffe7f3;

    color:#b46695;

    font-size:.82rem;

    border:1px solid #efbdd9;

}


/*======================================================
            FEATURED BABY CARD
======================================================*/

.featured-card{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    align-items:center;

    background:white;

    border:3px solid #f0bfd8;

    border-radius:20px;

    padding:20px;

}

.featured-card img{

    width:240px;

    max-width:100%;

}


/*======================================================
                ADOPTION GRID
======================================================*/

.adoption-grid{

    display:grid;

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

    gap:25px;

}


/*======================================================
            ADOPTION CARD
======================================================*/

.adoption-card{

    background:#fff;

    border:3px solid #f3c4dd;

    border-radius:18px;

    padding:18px;

    text-align:center;

}

.adoption-card img{

    width:100%;

    height:220px;

    object-fit:contain;

    margin-bottom:14px;

}

.status-open{

    color:#3f9a68;

    font-weight:bold;

}

.status-adopted{

    color:#d35b88;

    font-weight:bold;

}


/*======================================================
                GALLERY
======================================================*/

.gallery{

    display:grid;

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

    gap:16px;

}

.gallery img{

    width:100%;

    border-radius:12px;

    border:2px solid #f0bfd8;

    transition:.2s;

}

.gallery img:hover{

    transform:scale(1.03);

}


/*======================================================
                DOWNLOAD BOX
======================================================*/

.download-box{

    background:#fffdfd;

    border:2px dashed #efbdd9;

    border-radius:18px;

    padding:20px;

    margin:20px 0;

}


/*======================================================
                BUTTONS
======================================================*/

.button{

    display:inline-block;

    padding:

        10px
        22px;

    margin:6px;

    text-decoration:none;

    color:#8d5a7d;

    font-weight:bold;

    border-radius:999px;

    border:2px solid #efbdd9;

    background:

        linear-gradient(

            #ffffff,

            #ffe6f2

        );

    transition:.25s;

}

.button:hover{

    background:white;

    transform:translateY(-2px);

}


/*======================================================
                SIDEBAR BOXES
======================================================*/

.side-box{

    background:white;

    border:2px solid #efbdd9;

    border-radius:16px;

    padding:18px;

    margin-bottom:20px;

}

.side-box h3{

    text-align:center;

    margin-top:0;

}


/*======================================================
                TWO COLUMN
======================================================*/

.two-column{

    display:grid;

    grid-template-columns:

        2fr
        1fr;

    gap:25px;

    align-items:start;

}


/*======================================================
                TABLES
======================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:20px 0;

}

th{

    background:#ffdceb;

    color:#9b5b84;

}

th,
td{

    padding:10px;

    border:1px solid #efbdd9;

    text-align:left;

}

tr:nth-child(even){

    background:#fff8fc;

}


/*======================================================
                LISTS
======================================================*/

ul{

    padding-left:25px;

}

li{

    margin-bottom:6px;

}


/*======================================================
                SMALL BADGES
======================================================*/

.badge{

    display:inline-block;

    background:#dff8ef;

    border:1px solid #bde6d8;

    color:#5b9278;

    border-radius:999px;

    padding:

        4px
        10px;

    font-size:.8rem;

}


/*======================================================
                NOTICE BOX
======================================================*/

.notice{

    background:#fff9d8;

    border:2px solid #f0e29c;

    border-radius:16px;

    padding:18px;

    margin:20px 0;

}


/*======================================================
            PIXEL LINK BUTTONS
======================================================*/

.link-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin:25px 0;

}

.link-buttons img{

    image-rendering:pixelated;

    transition:.2s;

}

.link-buttons img:hover{

    transform:translateY(-2px);

}


/*======================================================
                FOOTER BUTTON AREA
======================================================*/

.button-bar{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;

}


/*======================================================
                SPACERS
======================================================*/

.space-small{

    height:20px;

}

.space{

    height:40px;

}

.space-large{

    height:70px;

}

/*======================================================
        SAKURA'S BLOSSOMS
        STYLE.CSS
        PART 3
        Footer • Forms • Decorations • Responsive
======================================================*/


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

footer{

    text-align:center;

    margin-top:40px;

    padding:25px;

    color:#967698;

    font-size:.9rem;

}

footer p{

    margin:6px 0;

}

.footer-divider{

    margin-bottom:18px;

    color:#e29ec4;

    letter-spacing:6px;

}


/*======================================================
                MARQUEE BOX
======================================================*/

.marquee-box{

    background:white;

    border:2px solid #efbdd9;

    border-radius:16px;

    padding:10px;

    margin:20px 0;

    overflow:hidden;

}

.marquee-box marquee{

    color:#cf71a3;

    font-weight:bold;

}


/*======================================================
            VISITOR COUNTER BOX
======================================================*/

.counter{

    display:inline-block;

    background:#fff8fc;

    border:2px solid #efbdd9;

    border-radius:14px;

    padding:10px 18px;

    margin-top:15px;

}


/*======================================================
                FORMS
======================================================*/

input,
textarea,
select{

    width:100%;

    padding:12px;

    margin:8px 0 16px;

    border:2px solid #efbdd9;

    border-radius:12px;

    background:#fffdfd;

    color:var(--text);

    font-family:Verdana,sans-serif;

}

textarea{

    min-height:140px;

    resize:vertical;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#d784b2;

    box-shadow:0 0 8px rgba(240,170,205,.5);

}


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

.float-right{

    float:right;

    margin:0 0 15px 20px;

}

.float-left{

    float:left;

    margin:0 20px 15px 0;

}

.clear{

    clear:both;

}


/*======================================================
            SCROLLBAR (WEBKIT)
======================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#fff8fc;

}

::-webkit-scrollbar-thumb{

    background:#f0bfd8;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#e39fc2;

}


/*======================================================
            DECORATIVE BOX
======================================================*/

.sparkle-box{

    border:2px dashed #efbdd9;

    background:linear-gradient(
        white,
        #fff8fc
    );

    border-radius:18px;

    padding:20px;

    position:relative;

}

.sparkle-box::before{

    content:"✦";

    position:absolute;

    top:10px;

    left:14px;

    color:#ef9fc5;

}

.sparkle-box::after{

    content:"♡";

    position:absolute;

    bottom:10px;

    right:14px;

    color:#ef9fc5;

}


/*======================================================
                HORIZONTAL RULE
======================================================*/

hr{

    border:none;

    border-top:2px dashed #efbdd9;

    margin:35px 0;

}


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

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(255,192,220,0);

    }

    50%{

        box-shadow:0 0 16px rgba(255,192,220,.5);

    }

    100%{

        box-shadow:0 0 0 rgba(255,192,220,0);

    }

}

.float{

    animation:float 4s ease-in-out infinite;

}

.glow{

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

}


/*======================================================
            TEXT UTILITIES
======================================================*/

.center{

    text-align:center;

}

.left{

    text-align:left;

}

.right{

    text-align:right;

}

.small{

    font-size:.85rem;

}

.large{

    font-size:1.2rem;

}

.bold{

    font-weight:bold;

}

.italic{

    font-style:italic;

}


/*======================================================
            FLEX UTILITIES
======================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.wrap{

    flex-wrap:wrap;

}


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

@media (max-width:900px){

    .two-column{

        grid-template-columns:1fr;

    }

    .featured-card{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:700px){

    .content{

        padding:22px;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.45rem;

    }

    nav{

        gap:10px;

    }

    nav a{

        padding:10px 18px;

    }

    .profile-grid{

        grid-template-columns:1fr;

    }

    .gallery{

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

    }

}

@media (max-width:450px){

    .gallery{

        grid-template-columns:1fr;

    }

    .banner{

        width:100%;

    }

}

.pageant-badge {

    margin: 15px auto;

    padding: 10px 18px;

    border-radius: 12px;

    text-align: center;

    font-size: 0.95rem;

    width: fit-content;

    min-width: 130px;

    font-weight: 600;

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

}



/* Gemstone Pageant Tiers */


.pageant-badge.topaz {

    background: #ffe7a3;

    border: 2px solid #d9a441;

    color: #805900;

}



.pageant-badge.sapphire {

    background: #b9d8ff;

    border: 2px solid #3c74c9;

    color: #17437c;

}



.pageant-badge.ruby {

    background: #ffc0c8;

    border: 2px solid #c43b55;

    color: #7d1c2e;

}



.pageant-badge.emerald {

    background: #b9f0c8;

    border: 2px solid #32945a;

    color: #176033;

}



.pageant-badge.diamond {

    background: #edf7ff;

    border: 2px solid #a8cde8;

    color: #4b728c;

}

/*======================================================
            MINI BANNER SECTION
======================================================*/


.links-title {

    text-align:center;

    font-family:
        "Cherry Bomb One",
        cursive;

    color:#d86ca2;

    font-size:1.7rem;

    margin-top:30px;

    margin-bottom:20px;

}



.banner-grid {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    margin:20px auto;

    background:

        linear-gradient(
            white,
            #fff6fb
        );

    border:

        2px dashed #efbdd9;

    border-radius:18px;

    box-shadow:

        0 4px 12px rgba(0,0,0,.08);

    max-width:700px;

}



.banner-link {

    display:block;

    padding:5px;

    background:white;

    border:

        1px solid #f0bfd8;

    border-radius:8px;

    transition:.25s;

}



.banner-link:hover {

    transform:translateY(-3px);

    box-shadow:

        0 0 12px #ffd7ef;

}



.mini-banner {

    width:88px;

    height:31px;

    display:block;

    object-fit:contain;

}