/* color pallete */
:root {
		--bg: #eff1f5;
		--card-bg:#acb0be;
		--highlight: #dc8a78;
		--highlight-alt: #40a02b;
		--fg: #4c4f69;
		--blue: #7287fd;
		--red: #e64553;
		--purple: #8839ef;
		--context: #7c7f93;
}

:root:has(#themeToggle:checked) {
    --bg: #1e1e2e;
    --card-bg: #313244;
    --highlight: #f5e0dc;
    --highlight-alt: #a6e3a1;
    --fg: #cdd6f4;
    --blue: #b4befe;
    --red: #f38ba8;
    --purple: #cba6f7;
		--context: #737994;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e2e;
    --card-bg: #313244;
    --highlight: #f5e0dc;
    --highlight-alt: #a6e3a1;
    --fg: #cdd6f4;
    --blue: #b4befe;
    --red: #f38ba8;
    --purple: #cba6f7;
		--context: #737994;
  }
	:root:has(#themeToggle:checked) {
			--bg: #eff1f5;
			--card-bg:#acb0be;
			--highlight: #dc8a78;
			--highlight-alt: #40a02b;
			--fg: #4c4f69;
			--blue: #7287fd;
			--red: #e64553;
			--purple: #8839ef;
			--context: #7c7f93;
	}
}


/* basic site settings */
body {
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		background: var(--bg);
		color: var(--fg);
		padding-left: 30%;
		padding-right: 30%;
		font-size: 16px;
}

/* headers */
h1  {
		text-align: center;
		font-size: 42px;
		color: var(--highlight);
}
h2  {
		text-align: center;
		font-size: 36px;
		color: var(--highlight-alt);
}
h3  {
		text-align: center;
		font-size: 30px;
		color: var(--highlight);
}
h4  {
		text-align: center;
		font-size: 24px;
		color: var(--highlight-alt);
}
h5  {
		text-align: center;
		font-size: 18px;
		color: var(--highlight);
}
/* using more then 5 headers should mean moving into different files please */

/* common objects */
i {
		color: var(--purple);
}
strong {
		color: var(--red);
}
a {
		text-decoration: none;
		color: var(--fg);
}
a:hover {
		text-decoration: underline;
		color: var(--fg);
}
a:visited {
				color: var(--fg);
}

/* custom objects */
.card {
		background: var(--card-bg);
		padding: 10px;
		border-radius: 10px;
		margin-top: 20px;
		h4 {
				padding: 0;
				margin: 0;
				text-align: left;
				color: var(--fg);
				text-decoration: underline;
		}
}

.context {
		font-size: 14px;
		color: var(--context);
}

#themeToggle {
		background: var(--bg);
		color: var(--fg);
}