body {
	background-position: inherit;
	background: #FEFEED;
	font-family: 'Lato', calibri, Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-shadow: 0px 0px 1px #bbb;
	color: #EF6A6D;
	letter-spacing: 1px;
	line-height: 11px;
	margin: 0;
	padding: 0;
	background-image: url("https://cynthia-in-lace.neocities.org/Decoration/HL_Edit.png");
	background-repeat: repeat;
	background-size: 200px 200px;
	background-attachment: fixed;
}

a {
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}

a:hover { color:#F07671; }
b { color:#D46666; }
i { color:#aaa; }
u { color:#daac5c; text-decoration:none; }

#layout {
	width:720px;
	margin:80px auto;
	background-color: transparent;
	/* float-based columns, no flex */
}

/* HEADER */
#header {
	height: 50px;
	text-align: center;
}

#sitename a {
	color: #FFFFFF;
	font: bold 9px 'Lato';
	text-decoration: none;
	font-size: large;
}

/* NAVIGATION - safe for all pages */
#navigation {
    text-align: center;
    margin-bottom: 10px;
    padding-top: 1px;
}

#navigation a {
    display: inline-block;
    width: 80px;         /* equal width buttons */
    background: #FCDAD6;
    font: bold 9px 'Lato';
    text-transform: uppercase;
    padding: 4px 0;
    color: #000;
    border-radius: 0 0 5px 5px;
    margin: 0 2px;       /* spacing between buttons */
    text-align: center;
    transition: 0.2s;
}

#navigation a:hover {
    background: #FFADA5;
    color: #fff;
}

/* COLUMNS */
#left, #content, #right {
	padding:6px;
	box-sizing:border-box;
}

#left { width:180px; float: left; }
#content { width:450px; float: center; text-align: center; } /* center column */
#right { width:180px; float: left; }

/* BOXES */
.box, .box-without-title {
	border-color: #FCDAD6;
	background: #fff;
	box-shadow: none;
	border-radius: 0 0 5px 5px;
	padding: 8px;
	margin-bottom: 14px;
}

.title {
	font: 10px monospace;
	text-transform: uppercase;
	color: #fff;
	background: #FCDAD6;
	letter-spacing: 3px;
	padding: 4px;

}

/* MENU */
#menu a {
	display: block;
	background: #FCDAD6;
	color: #000;
	padding: 4px;
	margin-bottom: 4px;
	text-align: center;
	border-radius: 5px;
}

/* FOOTER */
#footer {
	width:100%;
	text-align:center;
	padding:10px 0;
}

/* --- WARDROBE TABS --- */
#wardrobe-content input[type=radio] { display: none; }

.wardrobe-tab {
	display: block;
	padding: 8px 12px;
	margin-bottom: 4px;
	background: #FCDAD6;
	cursor: pointer;
	font-weight: bold;
	border-radius: 4px;
	text-align: center;
	transition: 0.2s;
}

.wardrobe-tab:hover { background: #FFADA5; color: #fff; }

/* Highlight active tab */
#tab-onepiece:checked ~ .onepiece,
#tab-jsk:checked ~ .jsk,
#tab-blouse:checked ~ .blouse,
#tab-headdress:checked ~ .headdress,
#tab-legwear:checked ~ .legwear,
#tab-accessories:checked ~ .accessories,
#tab-skirts:checked ~ .skirts {
	display: grid;
}

/* --- WARDROBE GRIDS --- */
.wardrobe-grid {
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(150px, 100px));
	justify-content: center;
	justify-items: center;
	gap: 12px;
	margin-top: 6px;
}

/* --- IMAGES --- */
.wardrobe-grid img {
	width: 100px;
	height: auto;
	border: 1px solid #FFADA5;
	border-radius: 6px;
	transition: transform 0.15s ease;
}

.wardrobe-grid img:hover { transform: scale(1.1); }

/* --- ITEM TITLES & PRICES --- */
.wardrobe-grid .item {
	text-align: center;
	font-size: 9px;
	color: #EF6A6D;
	margin-top: 4px;
}

.wardrobe-grid .item .title { font-weight: bold; }
.wardrobe-grid .item .price { color: #D46666; font-size: 8px; }

/* BLOG POST STYLES */
.blog-post {
	margin-bottom: 18px;
}

.post-title {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #EF6A6D;
	margin: 0 0 6px 0;
}

.post-date {
	font-size: 8px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

/* Sidebar Links */
.sidebar-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.sidebar-list li a {
	display: block;
	text-decoration: none;
	padding: 4px 0;
	color: #000;
	font-size: 10px;
}

.sidebar-list li a:hover {
	color: #EF6A6D;
}


/* --- CENTER COLUMN DYNAMIC WIDTH --- */
#content {
    float: left;
    width: 360px;      /* default width when sidebars exist */
    text-align: center;
    transition: width 0.2s;
}

/* Expand center column if no sidebar */
#layout.no-sidebar #content {
    width: 100%;       /* match nav bar width */
    float: none;
    margin: 0 auto;
}

/* Optional: remove left column float when missing */
#layout.no-sidebar #left,
#layout.no-sidebar #right {
    display: none;
}