/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* 07.27.2025 
What's up dudes. Literally haven't coded in 20 years but it's whatever. When I coded my forum profiles back in the day I Would always leave a change log so I'm going to do that here as well. Everything is blank right now so if you see something on the website that isn't base neocities that's me fucking around. Aiming for a very simple style blog rn think those Japanese blogs from y2k (some dudes still upkeep those to this day!) I just want somewhere to personal post and that would be good! */
/* start light mode styling */


/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: #F8D794;
			--border: #809076;
			--accent: #BB6830;
			--bg: rgb(17,20,25,.8);
			--gradientBottom: rgb(40, 65, 57);
			--gradientTop: black;
			a:link { color: #BB6830; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}
/* end dark mode styling */


* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);

	/* page background pattern */
	background-image: url("https://cdn-gen.shabbyfabrics.com/image/1200x1200/pid-195508-f-lilaclane-mas10955-g-green-8x8.avif?1753124888");
  background-color: #cccccc;
	background-size: 1200px 1200px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}


.container {
	max-width: 80rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;

	/* container background pattern */
	background-color: var(--gradientBottom);
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, var(--gradientBottom) 9px ), repeating-linear-gradient( var(--bg), var(--bg));
}
/* these control the column widths */
.small { flex: 1 1 2%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}
header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--bg),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge var(--border);
	border-radius: 5px;
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}