:root {
	--text-color: #dfffd0;
	--icon-color-light: white;
	--icon-color-dark: black;
	--dark-purple: #126f18;
	--light-blue: #afdd6c;
	--transparent-offwhite: #dfffd080;
	--glow: #cef29a;

	--default-font-size: 12px;
	--font-size-1: 3rem;
	--font-size-2: 2rem;
	--font-size-3: 1.5rem;
	--font-size-4: 1.25rem;
	--font-size-5: 0.8rem;

	--margin: 10px;
	--margin-text: 20px;
	--padding: 20px;
	--border-radius: 10px;
	--border-radius-2: 20px;

	--social-media-icon-size: 32px;

	--language-selector-min-width: 160px;
	--language-selector-min-height: 1.5rem;

	--triangle-up-sides: 25px;
	--triangle-up-bottom: 50px;

	--fade-in-translate-y: -20px;
	--transition-duration: 0.25s;
	--transition-duration-2: 0.5s;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

html, body {
	margin: 0;
	height: 100%;
	scroll-behavior: smooth;
	font-size: var(--default-font-size);
	overflow: visible;
}

h1 {
	font-size: var(--font-size-1);
	margin: 0;
}

h2 {
	font-size: var(--font-size-2);
	margin: 0;
}

h3 {
	font-size: var(--font-size-3);
	margin: 0;
}

/* https://stackoverflow.com/a/12638711 */
@keyframes fadeIn {
  0% {
    opacity: 0%;
	transform: translateY(var(--fade-in-translate-y));
  }
  100% {
    opacity: 100%;
	transform: translateY(0px);
  }
}

.home-page-buttons-row {
	display: flex;
}

.home-page-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--margin);
}

.home-page-button {
	background-color: var(--text-color);
	border-radius: var(--border-radius);
	color: var(--dark-purple);
	font-weight: bold;
	padding: var(--padding);
	margin: var(--margin);
	font-size: var(--font-size-4);
	transition: background-color var(--transition-duration);
	text-decoration: none;
}

.home-page-button:hover {
	background-color: var(--light-blue);
}

#highlighted-button {
	background-color: var(--light-blue);
}

.social-media-buttons {
	/* margin: 10px 10px 0px 10px; */
	margin: var(--margin);

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--margin);
}

/* https://stackoverflow.com/a/16546388 */
.language-selector-container {
	position: relative;
	align-self: flex-start;
	margin: 0;
	color: var(--text-color);
	min-width: var(--language-selector-min-width);
}

#language-selector {
	padding: var(--padding);
	border-radius: var(--border-radius);
	transition: background-color var(--transition-duration), border-radius var(--transition-duration);
	min-height: var(--language-selector-min-height);
}

/* https://stackoverflow.com/a/34623718 */
#language-selector::after {
	position: relative;
	content: "";
	width: 1rem;
	height: 1rem;
	border-right: 0.25rem solid var(--text-color);
	border-top: 0.25rem solid var(--text-color);
	transform: rotate(135deg);
	margin-left: 1rem;
	top: -0.25rem;
	float: right;
}

.language-selector-container:hover #language-selector {
	background-color: var(--transparent-offwhite);
	border-radius: 10px 10px 0px 0px;
}

.language-dropdown-content {
	display: none;
	flex-direction: column;
	position: absolute;
	width: 100%;
}

.language-selector-container:hover .language-dropdown-content {
	display: flex;
}

.language-dropdown-button {
	font-size: var(--font-size-3);
	background-color: var(--dark-purple);
	border: 0;
	border-top: 0.25rem solid var(--icon-color-dark);
	padding: var(--padding);
	color: var(--text-color);
	/* https://stackoverflow.com/a/15147863 */
	cursor: pointer;
	transition: background-color var(--transition-duration);
}

.language-dropdown-button:hover {
	background-color: var(--transparent-offwhite);
}

/* https://css-tricks.com/snippets/css/css-triangle/ */
.triangle-up {
	width: 0px;
	height: 0px;
	border-left: var(--triangle-up-sides) solid transparent;
  	border-right: var(--triangle-up-sides) solid transparent;
	border-bottom: var(--triangle-up-bottom) solid var(--text-color);
}