@charset "utf-8";

/*  Color Scheme (light-dark)   */
/* Primary:        #621D77      */
/* Secondary:      #9E4770      */
/* Accent:    #AD6B00 - #FFBA49 */

:root {
	color-scheme: light dark;

	--primary-color: hsl(286, 61%, 29%);
	--secondary-color: hsl(332, 38%, 45%);
	--accent-color: light-dark(hsl(37, 100%, 34%), hsl(37, 100%, 64%));

	--dark-accent-color: hsl(37, 100%, 64%);

	--primary-color-20: hsl(286, 61%, 49%);
	--secondary-color-20: hsl(332, 38%, 65%);
	--accent-color-20: light-dark(hsl(37, 100%, 54%), hsl(37, 100%, 84%));

	--background: light-dark(hsl(0 0 95), hsl(0 0 5));
	--background-10: light-dark(hsl(0 0 85), hsl(0 0 15));
	--background-20: light-dark(hsl(0 0 80), hsl(0 0 20));

	--text-color: light-dark(hsl(0 0 10), hsl(0 0 90));
	--light-text-color: hsl(0 0 10);
	--dark-text-color: hsl(0 0 90);

	--text-color-20: light-dark(hsl(0 0 20), hsl(0 0 80));
	--light-text-color-20: hsl(0 0 20);
	--dark-text-color-20: hsl(0 0 80);

	--heading-size: 2rem;
	--subheading-size: 1.2rem;
	--text-size: 1rem;
	--subtext-size: 0.8rem;

	--text-space: 5px;
	--heading-space: 10px;

	--default-bradius: 10px;
}

.light-theme {
	color-scheme: only light;
}

.dark-theme {
	color-scheme: only dark;
}

* {
	padding: 0px;
	margin: 0px;

	box-sizing: border-box;
	vertical-align: middle;
}

body {
	font: var(--text-size) Arial, Helvetica, sans-serif;
	color: var(--text-color);
	background-color: var(--background);

	h1 {
		margin: var(--heading-space);
		font-size: var(--heading-size);
	}

	hr {
		border-color: var(--text-color);
	}

	a {
		color: var(--text-color);
	}

	a:hover {
		color: var(--accent-color)
	}

	a:active {
		color: var(--accent-color-20);
	}

	strong.colorful {
		color: var(--accent-color);
	}

	sup { font-size: var(--subtext-size); }

	.default-button {
		display: inline-block;
		padding: 5px;

		cursor: pointer;
		user-select: none;

		border: none;
		border-radius: var(--default-bradius);
		background-color: var(--primary-color);
		box-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.30);

		&,
		&>a {
			color: var(--dark-text-color);
			font-size: var(--text-size);
			font-weight: bold;
			text-decoration: none;
		}

		&:hover {
			background-color: var(--primary-color-20);
		}

		&:active {
			background-color: var(--secondary-color-20);
		}

		&.alt {
			background-color: var(--secondary-color);

			&:hover {
				background-color: var(--secondary-color-20);
			}

			&:active {
				background-color: var(--primary-color-20);
			}
		}

		&.big {
			padding: 15px;
			font-size: var(--subheading-size);
		}
	}

	.secondary-button {
		display: inline-block;
		padding: 3px;

		font-size: var(--text-size);

		border: 2px solid var(--secondary-color);
		border-radius: var(--default-bradius);
		background-color: transparent;

		cursor: pointer;
		user-select: none;

		&:hover {
			background-color: var(--secondary-color);

			svg {
				fill: var(--dark-text-color);
			}
		}

		&.alt {
			border-color: var(--primary-color);

			&:hover {
				background-color: var(--primary-color);
			}
		}

		&.big {
			padding: 8px;
			font-size: var(--subheading-size);
		}
	}
}