@layer reset, defaults, themes, utilities;

/* ===========
	THEMES
=========== */

@layer themes {
	:root {
		--fore-colour: #0ca1a5;
		--back-colour: #fbf5e9;
		--hot-colour: #c24d51;
		--cold-colour: #c24d51;
		background-color: #1b1f27;
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--fore-colour: white;
			--back-colour: #282828;
			--hot-colour: darkOrange;
			--cold-colour: powderBlue;
		}
	}

	/* =========== END THEMES */
}

/* ==========
	RESET
========== */

@layer reset {
	*,
	::before,
	::after {
		box-sizing: border-box;
		align-items: center;
		max-width: 950px;
		margin: auto;

	}

	/* ========== END RESET */
}

/* ==============
	UTILITIES
============== */

@layer utilities {
	.uppercase {
		text-transform: uppercase;
	}
	.lowercase {
		text-transform: lowercase;
	}
	.undo-case {
		text-transform: none;
	}

	/* ============== END UTILITIES */
}

/* ==============
	DEFAULTS
============== */

@layer defaults {
	/* STRUCTURE */

	:root {
		--gap: 1.5rem;
		--line-height: 1.5em;
		--interface-font-size: 1.2em;
		--meta-font-size: 0.8em;
		
	}
	h1 {
		max-width: 950px;
		border-radius: 0.3em;
		font-family: "Exo 2", sans-serif;
		font-optical-sizing: auto;
		font-style: bold;
		margin-bottom: 0;
		color: #fbf5e9;
		background-color: #0b7876;
		/* you can change the text-align to center or right if you want it placed differently */
		text-align: center;
	}
	body {
		display: block;
		margin-top: 25px;
		margin-left: 10%;
		margin-right: 10%;
		margin-bottom: 10%;
		align-items: center;
		font-size: 16px;
		color: #1b1f27;
		background-color: var(--back-colour);
		border: solid 2px;
		border-color: var(--back-colour);
		line-height: 1.5;
		border-radius: 5px;
				outline-color:#0ca1a5;
			outline-style:solid;
		font-family: Verdana, sans-serif;

		outline-width:5px;
		box-shadow: 20px 13px 0px 5px#c24d51;
	}
	#skip-link {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		color: var(--back-colour);
		background-color: var(--fore-colour);
		clip-path: inset(50%);
		&:focus {
			clip-path: unset;
		}
	}
	#container {
		margin: 3rem auto;
		max-inline-size: 750px;
		border-inline: var(--line);
		& > * {
			padding-inline: 1rem;
		}
	}
	.flex-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-inline-start: 0;
		list-style-type: "";
	}
	p{margin:15px;}

	/* HEADER */

	#header {
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 10px;
		max-width: 950px;
		padding: 1em;
		border-radius: 5px 5em 0 0;
		color: var(--back-colour);
		background-color: var(--fore-colour);
		* {
			margin-block: 0;
			font-family: "Exo 2", sans-serif;
			font-size: 20px;
			font-weight: 500;
		}
	}
	#main-nav {
		a {
			padding-block-start: 0.3em;
			padding-block-end: 0.2em;
			padding-inline: 0.4em;
			font-size: var(--interface-font-size);
			color: var(--back-colour);
			text-decoration: unset;
			&:hover {
				background-color: var(--hot-colour);
				border-radius: 5em;
				margin-top: 10px;
				font-family: "Exo 2", sans-serif;
			}
		}
	}
	#header-message {
		padding-block-start: 0.3rem;
		padding-block-end: 0.2rem;
		padding-inline: 0.5rem;
		border-block-start: var(--line);
		border-color: var(--back-colour);
		&::before {
			content: "\25c9 \a0"; /* fisheye + non-breaking space */
			color: var(--hot-colour);
		}
		a {
			color: inherit;
			background-color: inherit;
		}
	}

	/* TEXT */
	:is(h1, h2, h3) + * {
		margin-block-start: 0;
	}
	h1 {
		margin-block-start: 1rem;
		margin-block-end: 1rem;
	}
	h2 {
		color:#0b7876;
		margin-block-start: 3rem;
		margin-block-end: 0.25rem;
	}
	h3 {
		color:#0b7876;;
		margin-block-start: 2rem;
		margin-block-end: 0.25rem;
	}
	details {
		margin-block: 1rem;
		margin-inline-start: var(--gap);
	}
	summary {
		cursor: pointer;
		font-weight: bold;
		margin-inline-start: -1rem;
		& + * {
			margin-block-start: 0;
		}
	}
	a:link {
		color: #0b7876;
	}
	a:visited {
		color: #36b3b6;
	}
	a:hover {
		color: var(--back-colour);
		&:link {
			background-color: var(--hot-colour);
		}
		&:visited {
			background-color: var(--cold-colour);
		}
	}

	
	
	
	secondlink ul {
    list-style: none;
    padding: .5em;
    justify-content: center; 
		color: #fbf5e9;
		font-style: bold;
}

/* Link Styling */
.secondlink li {
    list-style: none;
    padding: .5em;
    justify-content: center;
		color: #fbf5e9;
		font-style: bold;
}
.secondlink a {
    list-style: none;
    padding: .5em;
    justify-content: center;
		color: #fbf5e9;
		font-style: bold;
}
.secondlink a:hover {
    list-style: none;
    padding: .5em;
    justify-content: center;
		color: #fbf5e9;
		font-style: bold;
}
	
	
	

	code {
		font-size: 0.8em;
	}
	.code-block {
		display: block;
		margin-block: 1rem;
		color: var(--back-colour);
		background-color: var(--fore-colour);
		overflow-x: auto;
		white-space: pre;
		tab-size: 4ch;
	}
	blockquote {
		margin-inline: var(--gap);
	}
	::marker {
		color: var(--hot-colour);
	}

	/* MEDIA */

	img {
		display: block;
		margin-inline: auto;
	}
	figure {
		margin-inline: var(--gap);
	}
	figcaption {
		text-align: center;
		blockquote + &::before {
			content: "\2014 \a0"; /* em dash + non-breaking space */
		}
	}
	.gallery {
		--gallery-cols: 1;
		display: grid;
		grid-template-columns: repeat(var(--gallery-cols), 1fr);
		gap: calc(2rem / var(--gallery-cols));
		padding-left: 0;
		list-style-type: "";
		&:has(:nth-child(2)) {
			--gallery-cols: 2;
		}
		&:has(:nth-child(5)) {
			--gallery-cols: 3;
		}
		&:has(:nth-child(10)) {
			--gallery-cols: 4;
		}
		img {
			height: 100%;
			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
		}
	}
	iframe {
		max-inline-size: 100%;
		display: block;
		margin-block: 1rem;
		border: var(--line);
	}

	/* POST LISTS */

	.post-list {
		padding-inline-start: var(--gap);
		list-style-type: "";
		text-indent: calc(-1 * var(--gap));
		font-size: var(--interface-font-size);
		display: block;
		align-items: center;
	}
	#tag-index {
		
		padding-inline-start: 0;
		list-style-type: "";
		details {
			margin-block: 0;
		}
		[open] {
			margin-block-end: 1rem;
		}
		summary {
			font-size: var(--interface-font-size);
		}
	}

	/* POSTS */

	article > header {
		display: block;
		align-items: center;
		margin-block-end: 1rem;
		padding-block-end: 1rem;
		border-block-end: var(--line);
		h1 {
			margin-block-end: 0.5rem;
			font-size: 2.2rem;
		}
		& + * {
			margin-block-start: 1rem;
		}
	}
	#post-tags {
		margin-block: 0;
		& > li:not(:last-child)::after {
			content: ",\a0"; /* comma + non-breaking space */
		}
		a::before {
			content: "#";
		}
	}
	#post-nav > ul {
		border-radius: 0.3em;
		font-family: "Exo 2", sans-serif;
		font-size: larger;
		font-style: bold;
		padding: 10px;
		margin-bottom: 0;
		background-color: #0b7876;
color: white;
		margin-top: 40px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-inline-start: 0;
		list-style-type: "";
		& > :first-child > a::before {
			content: "\2190 \a0"; /* left arrow + non-breaking space */
		}
		& > :last-child {
			text-align: right;
			a::after {
				content: "\2192 \a0"; /* right arrow + non-breaking space */
			}
		}
	}

	/* FOOTER */

	#footer {
		padding-block-start: 1rem;
		border-block: var(--line);
		font-size: var(--meta-font-size);
		[rel="return"]::before {
			content: "\2191 \a0"; /* up arrow + non-breaking space */
		}
	}
	#contact-links {
		& > li:not(:last-child)::after {
			content: "\a0 |\a0";
			/* non-breaking space + pipe + non-breaking space */
		}
	}

	/* ============== END DEFAULTS */
}