/*
	INDEX :
	I. THEME
		Set colors and values to use.
		Prioritize using those over adding new ones.
		If needed, add it as a variable here.


	II. MAIN BODY
		Default styles for default elements.
		
		1. Paragraphs
		2. Titles
		3. Links
		4. Lists


	III. CUSTOM ELEMENTS
		Styles for more specific elements.

		1. Shell Terminal line
			A fake shell line used for navigation and aesthetic.
			Usually at the top and bottom of some pages.
				- path : (for navigation links to parent pages)
				- caret : (blinking caret)
				- editable terminal : (allows typing as if in a terminal, just for fun/looks)
		2. Accent class
			for color accent on specific things
		3. ls results
			some tweaks to links that want to look like a ls result
		4. whispers
*/

/* I. THEME */
:root {
  --font-size: 1rem;
  --line-height: 1.54em;
  --tab-size: 1rem;
  --background: #110314;
  --foreground: #f7e9f9;
  --accent: #c46bfe;
}

/* II. MAIN BODY */

	body {
		background-color: var(--background);
		color: var(--foreground);
		font-family:"Ubuntu Mono", monospace;
		margin:auto;
		font-size: var(--font-size);
		font-weight: 400;
		line-height: var(--line-height);
		text-rendering: optimizeLegibility;
		font-variant-ligatures: contextual;
		-webkit-text-size-adjust: 100%;
		margin: 1rem;
		padding: 0;
	}

	html {
	box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	}

	/* 1. PARAGRAPHS */
		p {
			margin-top: calc(var(--line-height) / 2);
		}
	/* END PARAGRAPHS */

	/* 2. TITLES */
		h1 {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: calc(var(--font-size) * 0.2);
		}

		h1, h2 {
		text-transform: uppercase;
		}

		h1, h2, h3, h4, h5, h6 {
		display: block;
		font-size: var(--font-size);
		letter-spacing: 0.04em;
		}

		h1, h2, h3, h4, h5, h6 {
		margin-top: var(--line-height);
		}

		h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		}
	/* END TITLES */

	/* 3. LINKS */
		a {
			color: var(--accent);
			font-weight: bold;
		}

		a:visited {
			color: var(--foreground)
		}

		a:hover {
			color: var(--accent);
			text-decoration: none;
		}
	/* END LINKS */

	/* 4. LISTS */
		/* descriptions */
		dd, ul, li {
			margin-left: var(--tab-size);
		}
	/* END LISTS */

	/* 5. LINES */
		hr {
			margin-top: calc(var(--line-height) / 2);
		}
	/* END LINES */

/* END MAIN BODY */

/* III. CUSTOM ELEMENTS */

	/*1. SHELL TERMINAL LINE */

		/* PATH */
			.path {
				color: var(--accent);
				font-weight: bold;
			}

			/* showing underline on path links only on hover */
				.path a {
					text-decoration: none;
				}
				.path a:hover {
					text-decoration: underline;
				}
			/* path links should stay accented even once visited */
				.path a:visited {
					color: inherit;
				}
		/* END PATH */

		/* CARET */
			p.cmd-caret-underscore > span.caret {
				animation: blink 1s step-end infinite;
				border-bottom: 2pt solid var(--foreground);
			}

			@keyframes blink {
				from,
				to {
					border-color: transparent;
				}
				50% {
					border-color: var(--foreground);
				}
			}
		/* END CARET */

		/* EDITABLE TERMINAL */
			[contenteditable=true]:focus {
				outline: none;
			}

			[contenteditable=true] {
				caret-color: transparent;
				background: none;
				border: none;
			}

			[contenteditable=true] br{
				display:none;
			}
		/* END EDITABLE TERMINAL */

	/* END SHELL TERMINAL LINE */

	/* 2. ACCENT CLASS */
	.accent {
		color: var(--accent);
	}

	/* 3. LS RESULTS */
	.ls {
		text-decoration: none;
		font-weight: normal;
	}
	.ls:hover {
		text-decoration: underline;
	}

	/* 4. WHISPERS */
	.whisper {
		display: none;
	}
	.hint:hover + .whisper {
		display: block;
	}

/* END CUSTOM ELEMENTS */