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

:root {

	--text: #5f7fa3;

	--bg: #ffffff;

	--blue1: #dff4ff;
	--blue2: #bfe9ff;
	--blue3: #8ccfe9;
	--blue4: #74a2c6;

	--pink1: #ffd6e6;
	--pink2: #ffb0c9;

}

* {
	box-sizing: border-box;
}

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

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {

	background: linear-gradient(
		to bottom,
		#ffffffcc,
		#bfe9ffcc
	);

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

	border-radius: 8px;
}

::-webkit-scrollbar-track {

	background: linear-gradient(
		to bottom,
		#ffffff,
		#eefaff
	);

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

	border-radius: 8px;
}

/* ===================== FONTS ===================== */

@font-face {

	font-family: 'Cavalhatriz';

	src:
	url('https://file.garden/aXTkw7hiK3vn4ais/Cavalhatriz.ttf')
	format('truetype');
}

@font-face {

	font-family: 'Compagnon-Bold';

	src:
	url(https://humantooth.neocities.org/fonts/Compagnon-Bold.woff)
	format('woff');
}

/* ===================== BODY ===================== */

html,
body {

	height: 100%;

	margin: 0;

	overflow: hidden;
}

body {

	padding: 8px;

	font-family: 'MS PGothic', sans-serif;

	color: var(--text);

	background-image:
	url('https://www.fancyparts.com/fancyparts/cg/pattern/dot_03/dot-03-45.gif');

	background-size: 50px 50px;

	background-repeat: repeat;

	cursor:
	url(http://media.tumblr.com/5d840e545744e0ac94daf934b8cae286/tumblr_inline_mki7yxiPQs1qz4rgp.png),
	auto;
}

/* ===================== LAYOUT ===================== */

.container-wrap {

	max-width: 1000px;

	height: calc(100vh - 16px);

	margin: 0 auto;

	padding: 6px;

	background: #fff;

	border-radius: 1px;

	border-width: 8px;

	border-style: solid;

	border-image:
	url("https://i.postimg.cc/mZ8j7zvH/frill-3-brown-ish.png")
	8 fill round;

	overflow: hidden;
}

.container {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	padding: 6px;

	height: 100%;

	background: #f4fbff;

	border: 3px solid white;

	outline: 1px solid #b7d6e6;

	border-radius: 5px;

	outline-offset: 4px;

	overflow: hidden;
}

/* ===================== COLUMN WIDTHS ===================== */

.small {
	flex: 0 0 220px;
}

.large {
	flex: 1;
	min-width: 0;
}

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

header {

	width: 100%;

	height: 120px;

	border: 1px solid #b7d6e6;

	border-radius: 5px;

	position: relative;

	background:
	url('https://file.garden/aXTkw7hiK3vn4ais/Screenshot%202026-04-29%20001803.png');

	background-size: cover;

	background-position: center;
}

header span {

	font-family: 'Cavalhatriz';

	font-size: 2.5rem;

	position: absolute;

	bottom: 0;

	right: 10px;

	margin: 10px;

	color: white;

	text-shadow:
	0 0 4px var(--blue3),
	0 0 8px var(--blue3),
	0 0 12px var(--pink2);
}

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

.small {

	background: #f4fbff;

	border: 3px solid white;

	outline: 1px solid #b7d6e6;

	border-radius: 5px;

	padding: 6px;

	box-shadow: 2px 2px 2px #7db7d410;
}

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

#profile-box {

	background: white;

	border: 1px solid #b7d6e6;

	border-radius: 4px;

	padding: 10px;

	margin-bottom: 8px;

	text-align: center;
}

.pfp {

	width: 90px;

	height: 90px;

	object-fit: cover;

	border-radius: 100%;

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

	margin-bottom: 8px;
}

.profile-text p {

	font-size: 12px;

	line-height: 1.4;
}

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

nav {

	background: white;

	border: 1px solid #b7d6e6;

	border-radius: 4px;

	overflow: hidden;
}

nav div {

	background-image:
	url('https://pbs.twimg.com/media/G3W5MIMboAAFz3X?format=jpg&name=large');
	
	background-size: cover;

	background-size: 220px;

	padding: 7px;

	color: white;

	font-size: 17px;

	font-family: 'Compagnon-Bold';

	text-shadow:
	0 0 4px #ffb0c9,
	0 0 8px #ffb0c9;
}

.nav-button {

	width: 100%;

	border: none;

	border-top: 1px solid #c8e8f5;

	background:
	linear-gradient(#f8fdff 50%, #dff4ff 100%);

	padding: 5px;

	text-align: left;

	font-family: inherit;

	font-size: 17px;

	font-weight: bold;

	color: var(--blue4);

	cursor: pointer;
}

.nav-button:hover {

	background:
	linear-gradient(
	to right,
	#eefaff,
	#dff4ff,
	#ffffff
	);

	font-style: italic;

	text-decoration: underline;
}

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

#sidebar-image {

	width: 100%;

	height: 320px;

	margin-top: 8px;

	border: 1px solid #b7d6e6;

	border-radius: 4px;

	overflow: hidden;

	background: white;
}

#sidebar-image img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;
}

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

.large {

	background: white;

	border: 3px solid white;

	outline: 1px solid #b7d6e6;

	border-radius: 5px;

	padding: 10px;

	min-height: 700px;

	box-shadow: 2px 2px 2px #7db7d410;
}

/* ===================== HOME PAGE ===================== */

.home-box {

	background: #ffffff;

	border: 1px solid #b7dfff;

	border-radius: 4px;

	padding: 10px;

	margin-bottom: 10px;
}

.recent-card {

	display: flex;

	gap: 12px;

	align-items: flex-start;
}

.recent-card img {

	width: 100px;

	height: 145px;

	object-fit: cover;

	border-radius: 4px;

	border: 1px solid #b7d6e6;
}

.recent-info h3 {

	margin: 0 0 6px;

	color: #74a2c6;

	font-size: 18px;
}

.recent-info p {

	font-size: 13px;

	line-height: 1.5;

	margin: 0;
}

.planning-list {

	display: flex;

	flex-direction: column;

	gap: 8px;
}

.plan-item {

	background:
	linear-gradient(
	to right,
	#eef8ff,
	#ffffff
	);

	border: 1px solid #b7dfff;

	border-radius: 4px;

	padding: 10px;

	font-size: 13px;

	font-weight: bold;

	color: #74a2c6;
}

/* ===================== CATEGORY ===================== */

.category-page {
	display: none;
}

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

#title {

	font-family: 'Compagnon-Bold';

	font-weight: bold;

	color: var(--blue4);

	text-shadow:
	2px 0px 0px #ffffff,
	0px 2px 0px #ffffff,
	-2px 0px 0px #ffffff,
	0px -2px 0px #ffffff,
	2px 2px 0px #a3736750;
}

#title2 {

	font-size: 20px;

	font-family: 'Compagnon-Bold';
	font-weight: bold;
	color: #ffb0c9;
	text-shadow: 
		2px 0px 0px #ffffff,
		0px 2px 0px #ffffff,
		-2px 0px 0px #ffffff,
		0px -2px 0px #ffffff,
		2px 2px 0px #a3736750;

	margin-bottom: 10px;
}

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

.media-grid {

	display: grid;

	grid-template-columns:
	repeat(auto-fill, minmax(220px, 1fr));

	gap: 12px;
}

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

.card {

	background: #fcfeff;

	border: 1px solid #bfe9ff;

	border-radius: 5px;

	overflow: hidden;

	box-shadow: 2px 2px 0px #dff4ff;
}

.card img {

	width: 100%;

	height: 300px;

	object-fit: cover;

	display: block;
}

.card-body {
	padding: 10px;
}

.card h3 {

	margin: 0 0 6px;

	color: var(--blue4);

	font-size: 17px;
}

.meta {

	font-size: 12px;

	color: #8aa4bb;

	margin-bottom: 8px;
}

.review {

	font-size: 13px;

	line-height: 1.4;
}

.rating {

	margin-top: 10px;

	color: var(--pink2);

	letter-spacing: 2px;
}

.tag {

	display: inline-block;

	background: #eefaff;

	border: 1px solid #bfe9ff;

	padding: 2px 7px;

	border-radius: 999px;

	font-size: 11px;

	margin-bottom: 6px;

	color: var(--blue4);
}

/* ===================== SPOILER REVIEW ===================== */

.spoiler-button {

	width: 100%;

	background:
	linear-gradient(#f8fdff 50%, #dff4ff 100%);

	border: 1px solid #bfe9ff;

	border-radius: 4px;

	padding: 6px;

	font-family: inherit;

	font-size: 12px;

	font-weight: bold;

	color: var(--blue4);

	cursor: pointer;

	margin-top: 5px;
}

.spoiler-button:hover {

	font-style: italic;

	text-decoration: underline;

	background:
	linear-gradient(
	to right,
	#eefaff,
	#dff4ff,
	#fff0f6
	);
}

.review-content {

	display: none;

	margin-top: 6px;

	font-size: 13px;

	line-height: 1.4;

	background: #f8fdff;

	border: 1px dashed var(--pink2);

	border-radius: 4px;

	padding: 8px;
}

/* ===================== EMPTY ===================== */

.empty {

	background: #f8fdff;

	border: 1px dashed #bfe9ff;

	border-radius: 4px;

	padding: 20px;

	text-align: center;

	font-style: italic;
}

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

footer {

	width: 100%;

	text-align: center;

	font-size: 12px;

	color: var(--blue4);

	margin-top: 5px;
}

/* ===================== IFRAME ===================== */

#content-frame {

	width: 100%;

	height: 680px;

	border: none;

	border-radius: 4px;

	background: white;
}