/*==================================================
    My Lolita Wardrobe
    Elegant / Classic Lolita Archive Theme
    Designed for Neocities
==================================================*/


/*==============================
    DESIGN TOKENS
==============================*/

:root{

    /* blush + petal surfaces */
    --ivory:#fff1f6;
    --ivory-deep:#ffe0eb;
    --card:#fffafc;

    /* raspberry + rose, the "ink" of the palette */
    --wine:#c2185b;
    --wine-deep:#8c0f45;
    --rose:#ec4899;
    --rose-soft:#f472b6;

    /* rose-gold, the "trim" of the palette */
    --gold:#d4a574;
    --gold-deep:#b8824c;
    --gold-pale:#f6ddba;
    --gold-line:#eccca0;

    /* text */
    --ink:#4a2038;
    --ink-soft:#a13d63;

    --radius:22px;
    --shadow:0 8px 22px rgba(194,24,91,.15);

    /* rounded, continuous scalloped frame (white semicircle bumps on
       all four edges with rounded corners), used as a border-image
       so it wraps every box on all sides without extra markup */
    --bunting-frame:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2796%27%20height%3D%2796%27%20viewBox%3D%270%200%2096%2096%27%3E%3Cpath%20id%3D%27e%27%20d%3D%27M0%2C24%20A12%2C12%200%200%201%2024%2C24%20A12%2C12%200%200%201%2048%2C24%20Z%27%20fill%3D%27white%27%2F%3E%3Cpath%20id%3D%27c%27%20d%3D%27M0%2C24%20A24%2C24%200%200%201%2024%2C0%20L24%2C24%20Z%27%20fill%3D%27white%27%2F%3E%3Cg%20transform%3D%27rotate%280%2048%2048%29%20translate%2824%2C0%29%27%3E%3Cuse%20href%3D%27%23e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%2890%2048%2048%29%20translate%2824%2C0%29%27%3E%3Cuse%20href%3D%27%23e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%28180%2048%2048%29%20translate%2824%2C0%29%27%3E%3Cuse%20href%3D%27%23e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%28270%2048%2048%29%20translate%2824%2C0%29%27%3E%3Cuse%20href%3D%27%23e%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%280%2048%2048%29%27%3E%3Cuse%20href%3D%27%23c%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%2890%2048%2048%29%27%3E%3Cuse%20href%3D%27%23c%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%28180%2048%2048%29%27%3E%3Cuse%20href%3D%27%23c%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27rotate%28270%2048%2048%29%27%3E%3Cuse%20href%3D%27%23c%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}


/*==============================
    GLOBAL
==============================*/

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

body{

    background-color:var(--ivory);

    /* a soft blush glow over a quiet damask lattice, with tiny heart
       studs standing in for the polka-dot print of a sweeter theme */
    background-image:
        radial-gradient(ellipse 900px 520px at 50% -8%, rgba(236,72,153,.14), transparent 62%),
        radial-gradient(ellipse 700px 420px at 100% 100%, rgba(212,165,116,.12), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.6C8 13.6 2 9.8 2 5.9 2 3.8 3.6 2.4 5.5 2.4 6.6 2.4 7.6 3 8 3.9 8.4 3 9.4 2.4 10.5 2.4 12.4 2.4 14 3.8 14 5.9 14 9.8 8 13.6 8 13.6Z' fill='%23ec4899' opacity='0.16'/%3E%3C/svg%3E"),
        repeating-linear-gradient(45deg, rgba(236,72,153,.045) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(-45deg, rgba(236,72,153,.045) 0 1px, transparent 1px 34px);

    background-size:100% 100%, 100% 100%, 40px 40px, 68px 68px, 68px 68px;

    background-attachment:fixed, fixed, fixed, fixed, fixed;

    color:var(--ink);

    font-family:'Lora',serif;

    font-size:16px;

    line-height:1.75;

}

a{

    color:var(--rose);

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:.25s;

}

a:hover{

    color:var(--gold-deep);

    border-bottom-color:var(--gold);

}

img{

    max-width:100%;

}

h1,h2,h3{

    font-family:'Cormorant Garamond',serif;

}


/*==============================
    ORNAMENT UTILITIES
    A continuous, rounded scalloped frame (white
    semicircle bumps) wraps every box on all four
    edges via border-image, with a slim pink
    outline tracing the box itself.
==============================*/

.frame,
header,
footer,
.sidebarbox,
main section{

    position:relative;

    background:var(--card);

    border-style:solid;

    border-width:18px;

    border-image-source:var(--bunting-frame);

    border-image-slice:24;

    border-image-repeat:round;

    border-radius:var(--radius);

    outline:2px solid var(--rose);

    outline-offset:0;

    box-shadow:var(--shadow);

}

/* small filigree corner flourish, echoing a Victorian frame corner */
.sidebarbox::before,
main section::before{

    content:"❦";

    position:absolute;

    top:22px;

    left:28px;

    font-size:.8rem;

    color:var(--gold);

    opacity:.75;

    pointer-events:none;

}


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

#container{

    width:1200px;

    margin:30px auto;

    display:grid;

    grid-template-columns:280px 1fr;

    gap:25px;

}



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

header{

    grid-column:1 / span 2;

    border-radius:var(--radius);

    padding:34px 30px 40px;

    text-align:center;

}

header h1{

    font-family:'Cormorant Garamond',serif;

    font-weight:700;

    font-size:3.4rem;

    letter-spacing:1px;

    color:var(--wine);

}

header h1::before,
header h1::after{

    content:"⋆";

    color:var(--gold);

    font-size:1.2rem;

    vertical-align:middle;

    margin:0 14px;

}

header h2{

    margin-top:10px;

    font-size:1.05rem;

    font-style:italic;

    letter-spacing:.5px;

    color:var(--ink-soft);

    font-weight:normal;

}

marquee{

    margin-top:22px;

    background:var(--ivory-deep);

    padding:10px;

    border-radius:16px;

    border:1.5px solid var(--rose-soft);

    color:var(--wine);

    font-weight:600;

    letter-spacing:.3px;

}

.corner{

    width:60px;

    position:absolute;

    top:16px;

    opacity:.9;

}

.left{

    left:16px;

}

.right{

    right:16px;

}



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

aside{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.sidebarbox{

    border-radius:var(--radius);

    padding:20px 18px 26px;

}

.sidebarbox h3{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    color:var(--wine);

    margin-bottom:14px;

    font-size:1.5rem;

    letter-spacing:.5px;

}

.sidebarbox nav{

    display:flex;

    flex-direction:column;

}

.sidebarbox nav a{

    padding:10px 12px;

    border-radius:2px;

    margin-bottom:6px;

    background:var(--ivory);

    border:1px solid transparent;

    border-bottom:1px solid var(--gold-line);

    color:var(--ink-soft);

    font-family:'Cormorant Garamond',serif;

    font-size:1.05rem;

    letter-spacing:.3px;

}

.sidebarbox nav a:hover{

    background:var(--ivory-deep);

    padding-left:20px;

    color:var(--rose);

    border-bottom-color:var(--gold);

}

.sidebarbox nav a.active{

    background:var(--ivory-deep);

    border-left:4px solid var(--gold);

    border-bottom:1px solid var(--gold-line);

    font-weight:700;

    color:var(--wine);

}

.rabbit{

    display:block;

    margin:auto;

    width:120px;

}

#rabbitQuote{

    text-align:center;

    margin-top:12px;

    font-style:italic;

    color:var(--ink-soft);

}



/*==============================
    MAIN
==============================*/

main{

    display:flex;

    flex-direction:column;

    gap:28px;

}

section{

    border-radius:var(--radius);

    padding:28px 30px 34px;

}

section h2{

    font-family:'Cormorant Garamond',serif;

    font-weight:700;

    font-size:2rem;

    color:var(--wine);

    margin-bottom:6px;

}

/* a quiet gold-rule divider under section titles, in place of the
   sparkle-heart motif - reads as an engraved letterhead rule */
section h2::after{

    content:"";

    display:block;

    width:90px;

    height:2px;

    margin-top:10px;

    background:linear-gradient(90deg,var(--gold),transparent);

}



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

#featuredCard{

    text-align:center;

}

#featuredImage{

    width:300px;

    border:1px solid var(--gold-line);

    outline:6px solid var(--ivory);

    box-shadow:0 0 0 1px var(--gold), 0 10px 20px rgba(194,24,91,.18);

    border-radius:18px;

    margin-bottom:15px;

}

#featuredName{

    font-size:1.5rem;

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    color:var(--wine);

}

#featuredBrand{

    color:var(--ink-soft);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

}

#featuredCut{

    color:var(--ink-soft);

    font-style:italic;

    margin-bottom:10px;

}

#featuredTags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px;

    margin-bottom:15px;

}

#rerollFeature{

    font-size:.85rem;

    padding:8px 20px;

}



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

.button,
button{

    display:inline-block;

    background:linear-gradient(180deg,var(--wine) 0%,var(--wine-deep) 100%);

    color:var(--gold-pale);

    padding:11px 26px;

    border:1px solid var(--gold);

    border-radius:24px;

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    font-size:1rem;

    letter-spacing:.6px;

    cursor:pointer;

    margin:10px;

    transition:.3s;

    box-shadow:0 4px 10px rgba(194,24,91,.25);

}

.button:hover,
button:hover{

    transform:translateY(-3px);

    background:linear-gradient(180deg,var(--rose) 0%,var(--wine) 100%);

    color:#fff;

}



/*==============================
    STATS
==============================*/

.statgrid{

    display:grid;

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

    gap:20px;

}

.stat{

    background:var(--ivory);

    border:1px solid var(--gold-line);

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

    border-radius:16px;

    text-align:center;

    padding:20px;

}

.stat span{

    display:block;

    font-family:'Cormorant Garamond',serif;

    font-size:2.4rem;

    font-weight:700;

    color:var(--wine);

}

.stat p{

    margin-top:8px;

    font-size:.82rem;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:var(--ink-soft);

}



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

footer{

    margin:44px auto;

    width:1200px;

    text-align:center;

    border-radius:var(--radius);

    padding:26px;

    font-style:italic;

    color:var(--ink-soft);

}

footer img{

    height:31px;

    margin:2px;

}



/*==============================
    MUSIC
==============================*/

.musicBox{

    text-align:center;

}

.musicBox .noteRow{

    font-size:1.2rem;

    letter-spacing:4px;

    color:var(--gold);

    margin-bottom:6px;

}

.musicBox .trackTitle{

    font-family:'Cormorant Garamond',serif;

    font-size:1.1rem;

    color:var(--wine);

    font-weight:700;

}

.musicBox .trackArtist{

    font-size:.85rem;

    color:var(--ink-soft);

    margin-bottom:12px;

}

.musicBox audio{

    width:100%;

    border-radius:4px;

    outline:none;

    accent-color:var(--wine);

    background:var(--ivory);

    border:1px solid var(--gold-line);

    padding:4px;

}

.musicBox audio::-webkit-media-controls-panel{

    background-color:var(--ivory);

}



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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:var(--ivory-deep);

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--wine);

}



/*==============================
    SELECTION
==============================*/

::selection{

    background:var(--gold-pale);

    color:var(--wine-deep);

}



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

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

.rabbit{

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

}



/*==============================
    MOBILE
==============================*/

@media (max-width:1200px){

#container{

    width:95%;

    grid-template-columns:1fr;

}

header{

    grid-column:1;

}

footer{

    width:95%;

}

.statgrid{

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

}

}

@media (max-width:700px){

.statgrid{

    grid-template-columns:1fr;

}

header h1{

    font-size:2.2rem;

}

header h1::before,
header h1::after{

    margin:0 6px;

}

.corner{

    display:none;

}

.button{

    display:block;

}

}
/*==============================
WARDROBE
==============================*/


#filters{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

margin-top:20px;

}



#filters select,
#filters input{

padding:10px;

border-radius:14px;

border:1px solid var(--gold-line);

background:var(--ivory);

color:var(--ink);

font-family:inherit;

}




#wardrobeGrid{


display:grid;

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

gap:25px;


}



.wardrobeCard{

position:relative;

background:var(--card);

border:1px solid var(--gold-line);

border-radius:18px;

padding:22px 15px 15px;

text-align:center;

transition:.3s;

overflow:visible;

}

/* rounded bunting-flag trim across the top of every wardrobe card */
.wardrobeCard::before{

content:"";

position:absolute;

left:10px;

right:10px;

top:-9px;

height:16px;

background-color:var(--rose-soft);

-webkit-mask-image:var(--bunting);

mask-image:var(--bunting);

-webkit-mask-size:26px 16px;

mask-size:26px 16px;

-webkit-mask-repeat:repeat-x;

mask-repeat:repeat-x;

opacity:.9;

pointer-events:none;

}



.wardrobeCard:hover{

transform:translateY(-6px);

box-shadow:0 10px 20px rgba(194,24,91,.2);

}




.wardrobeCard img{


height:250px;

object-fit:contain;

border-radius:10px;

margin-bottom:10px;


}



.wardrobeCard h3{


font-family:'Cormorant Garamond';

font-size:1.5rem;

color:var(--wine);


}



.brand{


color:var(--rose);

font-weight:bold;

}



.tag{

display:inline-block;

background:var(--ivory-deep);

border:1px solid var(--gold-line);

border-radius:20px;

padding:3px 10px;

margin:3px;

font-size:.8rem;

color:var(--ink-soft);

}




@media(max-width:900px){

#wardrobeGrid{

grid-template-columns:1fr 1fr;

}

}


@media(max-width:600px){

#wardrobeGrid{

grid-template-columns:1fr;

}

}