/* GOOGLE FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* CSS VARIABLES */
:root {
	--text: #5a1f3d;
	--bg: #fff2f8;

	--border: #ff8ecb;
	--borderDark: #d84a9a;

	--accent: #ff3fa4;

	--gradientTop: #ffe1f0;
	--gradientMid: #ffc2e1;
	--gradientBottom: #fff8fc;

	--glassWhite: rgba(255,255,255,0.65);
}

/* GLOBAL RESET */
* {
	box-sizing: border-box;
}

/* BODY – FRUTIGER AERO BACKGROUND */
body {
	padding: 10px;
	font-family: 'Nunito', sans-serif;
	color: var(--text);

	background:
		radial-gradient(circle at top left, #ffffff 0%, transparent 40%),
		radial-gradient(circle at bottom right, #ffd6eb 0%, transparent 45%),
		linear-gradient(to bottom, #ffe6f3, #fff);
}

/* MAIN CONTAINER – GLOSSY PANEL */
.container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	padding: 6px;
	gap: 6px;

	display: flex;
	flex-wrap: wrap;

	border-radius: 14px;
	border: 2px solid var(--borderDark);

	background:
		linear-gradient(
			to bottom,
			var(--gradientTop),
			var(--gradientMid) 40%,
			var(--gradientBottom)
		);

	box-shadow:
		inset 0 1px 0 #ffffff,
		0 8px 18px rgba(255,105,180,0.25);
}

/* COLUMN WIDTHS */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full  { flex: 1 1 100%; }
.half  { flex: 1 1 49%; }

/* HEADER – GLOSSY BAR */
header {
	width: 100%;
	height: 120px;
	position: relative;

	border-radius: 10px;
	border: 1px solid var(--borderDark);

	background:
		linear-gradient(
			to bottom,
			#ffffff 0%,
			#ffe3f2 30%,
			#ffb7dc 100%
		);

	box-shadow:
		inset 0 1px 0 #ffffff,
		0 4px 8px rgba(255,105,180,0.35);
}

/* HEADER TITLE */
header span {
	position: absolute;
	bottom: 8px;
	right: 12px;

	font-size: 2.5rem;
	font-weight: bold;
	font-family: 'Nunito', sans-serif;

	color: #ff5bb3;

	text-shadow:
		0 1px 0 #fff,
		0 2px 3px rgba(255,0,128,0.5);
}

/* NAV – AERO BUTTON PANEL */
nav {
	padding: 6px;
	border-radius: 10px;
	border: 1px solid var(--borderDark);

	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,0.9),
			rgba(255,200,230,0.9)
		);

	box-shadow:
		inset 0 1px 0 #fff,
		0 3px 6px rgba(255,105,180,0.3);
}

nav div {
	text-align: center;
	font-size: 1.25rem;
	margin-bottom: 8px;
	font-family: 'Nunito', sans-serif;
}

/* NAV BUTTONS – GLOSSY Y2K */
nav a {
	display: block;
	margin: 6px;
	padding: 4px 10px;

	border-radius: 999px;
	border: 1px solid var(--borderDark);

	text-decoration: none;
	color: var(--text);

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

	box-shadow:
		inset 0 1px 0 #ffffff,
		0 2px 4px rgba(255,105,180,0.4);

	transition: all 0.15s ease;
	font-family: 'Nunito', sans-serif;
}

nav a:hover,
nav a:focus {
	transform: translateY(-1px);
	background:
		linear-gradient(
			to bottom,
			#ffffff,
			#ff9fd3
		);
	box-shadow:
		inset 0 1px 0 #ffffff,
		0 4px 8px rgba(255,64,160,0.5);
}

/* OPTIONAL IMAGE BUTTON */
div.small > img {
	display: block;
	margin: 6px auto;

	border-radius: 8px;
	border: 1px solid var(--borderDark);

	box-shadow:
		inset 0 1px 0 #ffffff,
		0 3px 6px rgba(255,105,180,0.4);
}

/* CONTENT SECTIONS – GLASS CARDS */
section {
	padding: 6px;
	border-radius: 10px;
	border: 1px solid var(--borderDark);

	background:
		linear-gradient(
			to bottom,
			var(--glassWhite),
			rgba(255,215,235,0.9)
		);

	box-shadow:
		inset 0 1px 0 #ffffff,
		0 4px 8px rgba(255,105,180,0.25);
	font-family: 'Nunito', sans-serif;
}

/* FOOTER */
footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
	color: #8a2d5f;
	font-family: 'Nunito', sans-serif;
}

/* TEXT */
h1, h2, h3, h4, h5, h6, p {
	margin: 6px;
	line-height: 1.25;
	font-family: 'Nunito', sans-serif;
}

h1 {
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;

	color: #ff4fa7;

	text-shadow:
		0 1px 0 #ffffff,
		0 2px 3px rgba(255,0,128,0.4);
}

h2 {
	font-size: 1.25rem;
	text-align: center;
	color: #ff63b5;
}

h3 {
	font-size: 1.1rem;
	color: #d83c8c;
}

h4 {
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* MEDIA SAFETY */
img { max-width: 100%; }
pre { overflow-x: auto; }

/* LINKS */
a:visited {
	color: #c83b83;
}

a:hover,
a:focus {
	font-style: italic;
}