:root {
    --text-color: #fff;

	--background-color-a: #171717;
    --background-color-b: #242424;

    --accent-color-a: #2ecc71ff;
    --accent-color-b: #27ae60ff;

	--blue: #3498db;
	--green: #26de81;
	--red: #fc5c65;
	
    --yes-color: var(--green);
    --no-color: var(--red);

	--title-font: 'Dosis', sans-serif;
	--body-font: 'Roboto', sans-serif;

	--border-radius-a: 20px;
    --border-radius-b: 10px;

	--transition-a: 200ms ease-in-out;
	--transition-b: 400ms ease-in-out;

	--shadow-a: 0 0 15px 5px var(--background-color-a);
	--shadow-b: 0 0 5px 2.5px var(--background-color-a);
	--shadow-c: 0 0 5px 1px var(--background-color-a);
	--drop-shadow-a: 0 0 5px var(--background-color-a);
	--drop-shadow-b: 5px 5px 5px var(--background-color-a);
	--shadow-inset-a: inset 0 0 10px var(--background-color-a);
	--shadow-inset-b: inset 0 0 10px var(--background-color-b);

    --opacity: 0;
	--border: var(--accent-color-a) 3px solid;
    --background-image: "";
    --blur: blur(10px);
	--padding: 30px;

	--absolute-max-width: 1200px;
	--max-width: min(var(--absolute-max-width), calc(100vw - calc(var(--padding) * 2)));

	--header-height: 90px;
	--banner-height: 2rem;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	display: block;

	color: var(--text-color);
	background-color: var(--background-color-a);

	font-size: 16px;
	font-family: var(--body-font);
	font-weight: normal;
	line-height: 24px;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    position: relative;
	overflow-x: hidden;
	overflow-y: overlay;

	margin: 0;
	top: 0;
	right: 0;

    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

header {
	position: fixed;
	top: var(--banner-height);
	display: flex;
	gap: 0;
	flex-direction: row;
	justify-content: space-between;
	height: var(--header-height);
	width: 100%;
	padding: 5px 20px 5px 20px;
	box-shadow: var(--shadow-a);
	background-color: var(--background-color-a);
	transition: top 200ms ease-in-out;
	z-index: 10;
}

header * {
	height: 80px;
	margin: 0;
}

main {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: calc(var(--header-height) + var(--banner-height));
}

img {
	border-radius: var(--border-radius-a);
	object-fit: cover;
}

/* #region TEXT */

h1 {
	color: var(--text-color);
	font-family: var(--title-font);
	font-size: 1.5rem;
	line-height: 1;
	text-transform: uppercase;
}

h2 {
	color: var(--text-color);
	font-family: var(--title-font);
	font-size: 1.5rem;
	line-height: 1;
}

h3, h4 {
	padding-bottom: 30px;
	margin-bottom: 60px;
	color: var(--text-color);
	border-bottom: var(--border);
	font-family: var(--title-font);
	line-height: 1;
}

h3 {
	font-size: 3rem;
}

h4 {
	font-size: 2rem;
}

h5 {
	color: var(--text-color);
	font-family: var(--title-font);
	font-size: 1.25rem;
	line-height: 1;
	margin: 20px 0;
}

a {
	color: var(--accent-color-a);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--transition-a);
	cursor: pointer;
}

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

p, input, select, textarea {
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: 1rem;
	/* text-align: justify; */
}

.emoji-text {
	--emoji-size: 2rem;
	--gap: 0.5rem;

	position: relative;
	padding-left: calc(var(--emoji-size) + var(--gap));
}

.emoji {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--emoji-size);
	margin: 0;
	font-size: x-large;
	transform: translateY(-50%);
}

/* #endregion */

/* #region BUTTONS */

button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}

.button {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0.75rem 2.25rem;
	z-index: 1;
	width: min-content;
}

.button .circle {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: var(--background-color-a);
	border-radius: var(--border-radius-a);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	z-index: -1;
}

.button .circle .icon {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: var(--text-color);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.button .circle .icon.arrow {
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.button .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.29rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid var(--text-color);
	border-right: 0.125rem solid var(--text-color);
	transform: rotate(45deg);
}

.button .button-text {
	display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
	margin: 0 0 0 1.75rem;
	color: var(--text-color);
	font-family: var(--title-font);
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	z-index: 1;
}

.button .button-text p {
	margin: 0;
}

.button:hover .circle {
	width: 100%;
}

.button:hover .circle .icon.arrow {
	background: var(--text-color);
	transform: translate(1rem, 0);
}

section:nth-child(odd) .button .circle {
	background-color: var(--background-color-b);
}

.hero-image ~ section:nth-child(even) .button .circle {
	background-color: var(--background-color-b);
}

.hero-image ~ section:nth-child(odd) .button .circle {
	background-color: var(--background-color-b);
}

.icon-button-filled {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	color: var(--text-color);
	background-color: var(--background-color-b);
	border-radius: var(--border-radius-a);
	font-size: 1.25rem;
}

.icon-button-filled i {
	transition: transform 400ms cubic-bezier(0.65, 0, 0.076, 1);
}

.icon-button-filled:hover i {
	transform: translateY(-3px);
}

/* #endregion */

/* #region INPUT */

.input {
	padding: 10px 20px;
	background-color: var(--background-color-b);
	border: none;
	border-radius: var(--border-radius-b);
	outline: 0;
}

/* #endregion */

/* #region LISTS */

ul {
	display: flex;
	gap: 45px;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

li p, li h5 {
	margin: 0;
}

.list {
	gap: 15px;
	margin: 1rem 0;
	padding-left: 10px;
	list-style: circle outside;
}

.list-item {
	flex-direction: row;
}

.list-item:before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
}

/* #endregion */

/* #region DETAILS */

::selection {
	color: var(--background-color-a);
	background-color: var(--accent-color-a);
}

*::-webkit-scrollbar {
	width: 20px;
}

*::-webkit-scrollbar-track {
	background: none;
}

*::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	border: 5px solid transparent;
	background-color: var(--background-color-b);
	background-clip: padding-box;
	backdrop-filter: invert(100%);
	transition: 200ms ease-in-out;
	z-index: 1;
}

body::-webkit-scrollbar-thumb {
	opacity: 0;
	background-color: transparent;
}

body::-webkit-scrollbar-thumb:hover, body.scrolling::-webkit-scrollbar-thumb {
	background-color: var(--background-color-b);
}

/* #endregion */

/* #region TOOLTIPS */

.tooltip {
	position: relative;
}

.tooltip-container {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	margin: 25px 0 0 0;
	border-radius: var(--border-radius-a);
	box-shadow: var(--shadow-b);
	transition: opacity 200ms ease-in-out;
	pointer-events: none;
	z-index: 1;
}

.tooltip-container:after {
	--shadow-blur: 5px;
	--shadow-spread-a: 2.5px;
	--shadow-spread-b: calc(var(--shadow-spread-a) * -1);
	--size: 10px;

	content: "\f0d8";
	position: absolute;
	top: -1rem;
	left: calc(50% - var(--size));
	width: var(--size);
	height: var(--size);
	color: var(--background-color-b);
	filter: /* drop-shadow does not support spread radius, so we have to use multiple */
		drop-shadow(var(--shadow-spread-a) var(--shadow-spread-a) var(--shadow-blur) var(--background-color-a))
		drop-shadow(var(--shadow-spread-b) var(--shadow-spread-a) var(--shadow-blur) var(--background-color-a))
		drop-shadow(0 var(--shadow-spread-a) var(--shadow-blur) var(--background-color-a));
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
	font-size: 2.5rem;
	z-index: -1;
}

.tooltip.show-tooltip > .tooltip-container {
	opacity: 1;
}

.tooltip-container p {
	margin: 0;
	padding: 10px 15px;
	background-color: var(--background-color-b);
	border-radius: var(--border-radius-a);
	font-size: 1rem;
	white-space: nowrap;
	z-index: 2;
}

.social-icons a.tooltip .tooltip-container:after {
	top: -1.25rem;
}

.tooltip.up .tooltip-container {
	top: unset;
	bottom: 100%;
	margin: 0 0 25px 0;
}

.tooltip.up .tooltip-container:after {
	content: "\f0d7";
	top: unset !important;
	bottom: 0;
}

.social-icons a.tooltip.up .tooltip-container:after {
	bottom: 0.5rem;
}

/* #endregion */

/* #region BANNER */

.banner {
	position: absolute;
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--banner-height);
	background-color: var(--accent-color-a);
	color: var(--background-color-a);
	padding: 0 1rem;
	transform: translateY(-100%);
	transition: 200ms ease-in-out;
	z-index: 11;
}

body:not(.show-banner) {
	--banner-height: 0px;
}

body:not(.show-banner) .banner * {
	pointer-events: none;
}

.banner * {
	height: auto;
	color: inherit;
	opacity: 0;
	font-size: 0.85rem;
	font-weight: bold;
	transition: opacity 200ms ease-in-out;
}

.banner:hover {
	color: var(--background-color-a);
}

body.show-banner .banner * {
	opacity: 1;
}

/* #endregion */

/* #region LOGO */

.logo {
	display: flex;
	gap: 7.5px;
	align-items: center;
	cursor: default;
	transition: opacity 200ms;
}

.icon-container {
	margin: 10px 0;
	height: 50px;
	width: 50px;
}

.icon-container:hover {
	animation-play-state: running;
}

.icon-container .icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

@keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.logo h1 {
	display: flex;
    align-items: center;
}

header .logo {
	opacity: 0;
	cursor: pointer;
}

/* #endregion */

/* #region NAV MENU */

.nav-menu{
	display: flex;
    align-items: center;
	gap: 35px;
	flex-grow: 1;
	max-width: fit-content;
}

.nav-page-container {
	position: relative;
	display: flex;
	gap: 30px;
    align-items: center;
    justify-content: flex-start;
	width: 100%;
	height: 100%;
}

.nav-page-children .nav-page-container {
	padding: 0 20px;
}

.nav-page-container * {
	height: auto;
}

.nav-page-container > .nav-page-children-toggler {
	font-size: 1.5rem;
	transition: 200ms ease-in-out;
}

.nav-page-container > .nav-page-children-toggler:hover {
	color: var(--accent-color-a);
}

.nav-page-container.show-children > .nav-page-children-toggler {
	transform: rotate(-90deg);
}

.nav-page {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7.5px;
	height: 1.5rem;
	color: var(--text-color);
	white-space: nowrap;
	cursor: pointer;
}

.nav-page:hover {
	color: var(--accent-color-a);
}

.nav-page.active {
	color: var(--accent-color-a);
}

.nav-page.active:hover {
	color: var(--accent-color-b);
}

.nav-page h2 {
	height: auto;
	white-space: nowrap;
	color: inherit;
}

.nav-page i {
	height: auto;
	font-size: 1.25rem;
}

.nav-page-children {
	opacity: 0;
	display: flex;
	gap: 20px;
	flex-direction: column;
	position: absolute;
	left: 50%;
	top: 100%;
	height: auto;
	padding: 20px 0;
	background-color: var(--background-color-b);
	border-radius: var(--border-radius-a);
	transform: translateX(-50%) translateY(25px);
	transition: 200ms ease-in-out;
	pointer-events: none;
}

.nav-page-children .nav-page-children {
	left: calc(100% - 5px);
	top: -10px;
	transform: translateX(25px);
}

.nav-page-children .nav-page {
	font-family: var(--title-font);
	font-size: 1.25rem;
}

/* #endregion */

/* #region MENU */

.menu-toggle {
	display: none;
    align-items: center;
	font-size: 1.5rem;
}

.menu-toggle i {
	height: auto;
	transition: color var(--transition-a);
	cursor: pointer;
}

.menu-toggle i:hover {
	color: var(--accent-color-a);
}

/* #endregion */

/* #region HERO IMAGE */

.hero-container {
	width: fit-content;
    margin: auto;
	padding-top: 20px;
	padding-bottom: 30px;
	min-height: unset;
}

.hero {
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 6vw;
	text-transform: uppercase;
	margin: 0;
}

.hero .icon-container {
	width: 25%;
	height: auto;
	margin: 0 10px;
}

.hero-image {
	position: relative;
	padding: 0;
	height: calc(100vh - var(--header-height));
	border-radius: none;
}

.hero-image .section-container {
	height: inherit;
}

.hero-image ~ section:nth-child(odd) {
	background-color: var(--background-color-b);
}

.hero-image ~ section:nth-child(even) {
	background-color: var(--background-color-a);
}

.hero-image img {
	width: 100%;
	height: inherit;
	margin: 0;
	border-radius: 0;
}

.hero-image h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	margin-top: 0 !important;
	transform: translate(-50%, -50%);
	padding: 20px;
	background-color: var(--background-color-a);
	border-radius: var(--border-radius-a);
	font-size: 6vw;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: default;
}

/* #endregion */

/* #region SECTIONS */

section {
	display: flex;
	gap: 60px;
	flex-direction: column;
	padding: 60px 30px 120px 30px;
	min-height: 510px;
}

section:last-child {
	margin-bottom: 60px;
}

section:nth-child(even) {
	background-color: var(--background-color-b);
}

section .section-container {
	width: var(--max-width);
	margin: auto;
}

section.columns .section-container {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

section.columns .section-container > * {
	width: 50%;
}

.section-container.columns {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.section-container.columns > * {
	width: 50%;
}

section .section-container > h3 a {
	margin-right: 10px;
	transition: color var(--transition-a);
}

section .section-container > h3 a:hover {
	color: var(--accent-color-a);
}

section .section-container > img {
	width: 100%;
	min-height: 100%;
}

section .section-container > h2:last-child {
	margin-top: 2.5rem;
}

section.small-section {
	min-height: unset;
	padding-bottom: 60px;
}

section.small-section:first-child {
	padding-bottom: 30px;
}

section .image-container {
	display: flex;
	flex-direction: column;
	padding: 0 5%;
	margin-top: 60px;
	margin-bottom: 30px;
}

section .image-container img {
	height: unset;
}

.section-title {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

.section-title a {
	font-size: 1.2rem;
	width: fit-content;
}

.section-title h3 {
	margin-top: 0;
}

/* #endregion */

/* #region FOOTER */

footer {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

footer > p {
	text-align: center;
	background-color: var(--background-color-b);
	margin: 0;
	padding: 30px 0;
}

#scroll-up {
	position: absolute;
	top: 0;
    right: 0;
	width: 100%;
	height: calc(100% - 100px);
	pointer-events: none;
}

#scroll-up button {
	--margin: 90px;

	opacity: 0;
	position: sticky;
	top: calc(100vh - var(--margin));
	left: calc(100vw - var(--margin));
	box-shadow: var(--shadow-c);
	transform: translateY(25px);
	transition: 400ms cubic-bezier(0.65, 0, 0.076, 1);
	z-index: 30;
}

.show-scroll-up #scroll-up button {
	opacity: 1;
	transform: none;
	pointer-events: all;
}

/* #endregion */

/* #region SOCIAL ICONS */

.social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	padding: 0 15px;
}

.social-icons a {
	font-size: 2.2rem;
	transform: translate3d( 0, 0, 0);
	transition: transform var(--transition-b);
}

.social-icons a:hover {
	transform: scale(110%);
}

.social-icons p {
	font-weight: normal;
}

section .social-icons {
	margin-top: 60px;
}

section .social-icons a {
	font-size: 3rem;
}

/* #endregion */

/* #region CARDS */

.card-list {
	display: flex;
    gap: 30px;
	flex-wrap: wrap;
}

.card {
	--rgb-color: 0, 0, 0;

	position: relative;
	flex: 0.5 0 50%;
    max-width: calc(50% - 15px);
	color: var(--text-color);
	border-radius: var(--border-radius-a);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	cursor: default;
}

/* Prevent default <a> hover color */
.card:hover {
	color: var(--text-color);
}

.card-thumbnail-container {
	overflow: hidden;
    width: 100%;
    height: 100%;
	border-radius: inherit;
	z-index: 1;
}

.card-thumbnail {
	object-fit: cover;
	object-position: top;
    width: 100%;
    height: 100%;
    margin: auto;
	transform-origin: center;
	transition: transform var(--transition-b);
}

.card-thumbnail-container:empty {
	background-repeat: repeat;	
}

.card-info {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 30px;
}

/* Using percentages to position the background does not work as expected: https://stackoverflow.com/questions/51731106/using-percentage-values-with-background-position-on-a-linear-gradient */
.card-background {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-image: linear-gradient(0deg,
		rgb(var(--rgb-color), 1) 0%,
		rgb(var(--rgb-color), 0.75) 66%,
		rgb(var(--rgb-color), 0.2) 93%,
		rgb(var(--rgb-color), 0.1) 100%);
	background-size: 100% 100%;
	background-repeat: repeat-x;
	background-position: right bottom -200px;
	transition: 200ms ease-in-out;
}

.card:hover .card-background, .card.show-info .card-background {
	opacity: 1;
	background-position: right bottom;
}

.card-info > * {
	opacity: 0;
	margin: 0;
	transform: translateY(25px);
	transition: 300ms ease-in-out;
	z-index: 2;
}

.card:hover .card-info > *, .card.show-info .card-info > * {
	opacity: 1;
	transform: translateY(0);
}

/* #endregion */

/* #region GALLERIES */

.gallery {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.gallery-item {
	flex: 0.5 0 50%;
	max-width: calc(50% - 15px);
}

.gallery-item img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Image viewer */
.viewable-image {
	cursor: zoom-in;
}

#image-viewer {
	--padding: 30px;
	--button-size: 3.5rem;

	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0, 0, 0, 0.75);
	transform: translateY(25px);
	transition: 200ms ease-in-out;
	pointer-events: none;
	z-index: 20;
}

#image-viewer.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

#image-viewer #image-viewer-image-container, #image-viewer #image-viewer-controls, #image-viewer #image-viewer-text {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--padding);
}

#image-viewer #image-viewer-image-container {
	justify-content: center;
	align-items: center;
	padding: calc(calc(var(--padding) * 2) + var(--button-size));
}

#image-viewer #image-viewer-image-container #image-viewer-image {
	max-width: 100%;
	max-height: 100%;
}

#image-viewer button {
	font-size: var(--button-size);
	cursor: pointer;
	z-index: 21;
}

#image-viewer #image-viewer-close {
	position: absolute;
	top: var(--padding);
	right: var(--padding);
}

#image-viewer #image-viewer-controls {
	justify-content: space-between;
	align-items: center;
}

#image-viewer #image-viewer-controls button {
	opacity: 0;
	pointer-events: none;
}

#image-viewer.previous #image-viewer-previous {
	opacity: 1;
	pointer-events: inherit;
}

#image-viewer.next #image-viewer-next {
	opacity: 1;
	pointer-events: inherit;
}

#image-viewer #image-viewer-text {
	gap: 10px;
	flex-direction: column;
	align-items: center;
    justify-content: flex-end;
}

#image-viewer #image-viewer-text > * {
	margin: 0;
	z-index: 21;
	text-align: center;
}

/* Iframes */

iframe {
	height: auto;
	aspect-ratio: 9 / 6;
}

/* #endregion */

/* #region TIMELINES */

.timeline {
	--circle-position: 30px;

	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.timeline::after {
	content: "";
	position: absolute;
	width: 6px;
	background-color: var(--background-color-b);
	top: var(--circle-position);
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

.container {
	--caret-position: -2px;

	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
}

.container .timeline-dot {
	--size: 30px;

	position: absolute;
	display: flex;
	align-items: center;
    justify-content: center;
	top: var(--circle-position);
	right: calc(var(--size) / -2);
	width: var(--size);
	height: var(--size);
	background-color: var(--background-color-b);
	border-radius: 50%;
	z-index: 1;
}

.container .timeline-dot > p {
	margin: 0;
	font-family: var(--title-font);
	font-size: 1rem;
}

.right .timeline-dot {
	left: calc(var(--size) / -2);
}

.left {
	left: 0;
}

.right {
	left: 50%;
}

.left::before {
	content: "\f0da";
	height: 0;
	position: absolute;
	top: var(--circle-position);
	width: 0;
	z-index: 1;
	right: calc(50px - var(--caret-position));
	color: var(--background-color-b);
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
	font-size: 50px;
}

.right::before {
	content: "\f0d9";
	height: 0;
	position: absolute;
	top: var(--circle-position);
	width: 0;
	z-index: 1;
	left: calc(25px - var(--caret-position));
	color: var(--background-color-b);
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
	font-size: 50px;
}

.content {
	padding: 20px 30px;
	background-color: var(--background-color-b);
	position: relative;
	border-radius: var(--border-radius-a);
}

/* #endregion */

/* #region HELPER CLASSES */

.double-columns {
	display: flex;
	gap: 50px;
}

.double-columns > * {
	flex: 1;
}

.inline-icon {
	display: flex;
	gap: 10px;
	align-items: center;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.icons-list {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.icons-list .icon {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.icons-list .icon img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
	object-fit: unset;
}

.no-select {
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* #endregion */

/* #region FORMS */

form {
	display: flex;
    flex-direction: column;
	width: min(calc(var(--absolute-max-width) / 2), 100%);
	margin: auto;
}

form > h3, form > p {
	margin-bottom: 30px;
}

form span {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

form > span:not(:nth-last-child(-n+2)), form > div:not(:nth-last-child(-n+2)) {
	margin-bottom: 1rem;
}

form span > *:not(label) {
	width: 100%;
}

form span textarea {
	resize: vertical;
	min-height: calc(1rem + 20px);
}

.horizontal {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.horizontal > * {
	flex-grow: 1;
	width: 50%;
}

form button {
	margin: auto;
	margin-top: 3rem;
}

form button .circle {
	color: var(--background-color-a) !important;
	background-color: var(--accent-color-a) !important;
}

form button .circle .icon.arrow {
	background-color: var(--background-color-a) !important;
}

form button .circle .icon.arrow:before {
	border-color: var(--background-color-a) !important;
}

form button:hover .button-text {
	color: var(--background-color-a) !important;
}

form .required label::after {
	content: "*";
	margin-left: 0.2rem;
	color: var(--red);
}

form select.input, .input[type="checkbox"] {
	cursor: pointer;
}

form .checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
}

form .checkbox > * {
	width: auto;
	cursor: pointer;
}

form .checkbox .input {
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: var(--text-color);
	border: 3px solid var(--text-color);
	border-radius: 9999px;
	font-size: 0.75rem;
	aspect-ratio: 1;
}

form .checkbox .input::before {
	opacity: 0;
	content: "\f00c";
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display,inline-block);
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
}

form .checkbox .input:checked::before {
	opacity: 1;
}

/* #endregion */

/* #region PROFILE */

.profile {
	display: flex;
	gap: 30px;
	align-items: center;
}

.profile img {
	width: 100px;
	border-radius: 50%;
}

/* #endregion */

/* #region CHAT */

#chat {
	padding: 0;
	word-break: break-word;
}

.chat-container {
	display: flex;
	flex-direction: column;
	margin-top: 50px;
	width: 100%;
	bottom: 0;
	left: 0;
}

#chat-box {
	display: flex;
	gap: 10px;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 350px;
	overflow: hidden auto;
}

#chat-box > *:first-child {
	margin-top: auto;
}

/* Chat bubbles */
#chat-box span {
	width: 100%;
}

.user-text {
	display: flex;
    justify-content: flex-end;
}

.user-text p, .bot-text p {
	line-height: 1.5em;
	display: inline-block;
	padding: 10px;
	border-radius: var(--border-radius-a);
	max-width: 75%;
	margin: 0 10px;
}

.user-text p {
	color: var(--background-color-a);
	background: var(--accent-color-a);
	border-bottom-right-radius: 0;
	animation: slide-in-right 500ms ease-in-out;
}

.bot-text p {
	color: var(--text-color);
	background: var(--background-color-b);
	border-top-left-radius: 0;
	animation: slide-in-left 500ms ease-in-out;
}

.bot-typing {
	margin: 0;
}

@keyframes slide-in-left {
	from {
		transform: translateX(-25px);
		opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-left {
	from {
		transform: translateY(-25px);
		opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	from {
		transform: translateX(25px);
		opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-right {
	from {
		transform: translateY(25px);
		opacity: 0;
	}
	to {
		transform: translateY(0px);
		opacity: 1;
	}
}

/* Chat bar */

.chat-bar {
	display: flex;
	gap: 10px;
	float: left;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	border-radius: var(--large-corner-radius);
}

.chat-bar-icon {
	display: flex;
	justify-content: space-evenly;
	box-sizing: border-box;
	width: 10%;
	float: right;
	margin: auto;
	font-size: 1.5rem;
}

#chat-icon {
	color: var(--accent-color);
	transition: color 200ms ease-in-out;
	cursor: pointer;
}

#chat-icon:hover {
	color: var(--secondary-accent-color);
}

#chat-icon:active {
	color: var(--background-color);
}

#chat-input-container {
	width: 90%;
}

#chat-input {
	width: 100%;
}

/* Chat profile */

.chat-profile {
	display: flex;
	gap: 10px;
	padding-bottom: 20px;
	box-shadow: var(--shadow-a);
	z-index: 1;
}

.chat-profile img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

.chat-profile span {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-direction: column;
}

.chat-profile span > * {
	margin: 0;
}

.chat-profile span h5 {
	font-size: 1.5rem;
}

/* #endregion */

/* #region RESPONSIVENESS */

@media screen and (max-width: 990px) {
	.menu-toggle {
		display: flex;
	}

	.nav-menu {
		position: fixed;
		top: var(--banner-height);
		right: 0;
		display: flex;
		gap: 30px;
		flex-direction: column;
		height: 100%;
		width: 250px;
		background-color: var(--background-color-b);
		padding: 32.5px 22.5px 20px 20px;;
		transform: translateX(100%);
		transition: transform var(--transition-a);
		overflow-y: auto;
	}
	
	.nav-menu::-webkit-scrollbar {
		display: none;
	}
	
	.nav-menu > i {
		font-size: 1.5rem;
		height: auto;
		margin-left: auto;
		cursor: pointer;
		transition: color var(--transition-a);
	}
	
	.nav-menu > i:hover {
		color: var(--accent-color-a);
	}

	.nav-menu .nav-page-children {
		position: relative;
		left: 0;
		top: 0;
		height: 0;
		padding: 0;
		margin-left: calc(1.25rem + 7.5px);
		background: none;
		transform: none;
		pointer-events: all;
	}

	.nav-menu .nav-page-container {
		gap: 0;
		justify-content: space-between;
		height: auto;
		flex-wrap: wrap;
		padding: 0;
	}
	
	.nav-menu .nav-page-container.show-children > .nav-page-children {
		opacity: 1;
		height: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.nav-menu.active {
		transform: translateX(0);
	}

	.hero {
		font-size: 10vw;
	}

	.hero-image h2 {
		font-size: 10vw;
	}

	.double-columns {
		flex-direction: column;
	}

	.gallery {
		flex-direction: column;
	}

	.gallery-item {
		max-width: unset;
	}
}

@media screen and (min-width: 990px) {
	#menu-close {
		display: none;
	}

	.nav-page-children-toggler {
		display: none;
	}

	.nav-menu .nav-page-children .nav-page-container.has-children:after {
		content: "\f105";
		font-family: "Font Awesome 6 Free";
		font-weight: 600;
	}

	.nav-menu .nav-page-container:hover > .nav-page-children {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		pointer-events: all;
	}
	
	.nav-menu .nav-page-container .nav-page-container:hover > .nav-page-children {
		transform: translateX(0);
	}
}

/* Banner */
@media screen and (max-width: 483px) {
	body.show-banner {
		--banner-height: 4rem;
	}
}

@media screen and (max-width: 293px) {
	body.show-banner {
		--banner-height: 6rem;
	}
}

@media screen and (max-width: 470px) {
	section.columns .section-container, .section-container.columns, .card-list, .profile {
		flex-direction: column !important;
	}

	.columns .section-container > *, .section-container.columns > * {
		width: 100% !important;
	}

	.card {
		flex: unset;
		width: 100%;
    	max-width: unset;
	}

	.profile img {
		width: 35vw;
	}

	.content {
		padding: 10px 15px;
	}

	#image-viewer {
		--padding: 10px;
		--button-size: 2rem;
	}
}

/* #endregion */

/* #region ANIMATIONS */

@keyframes bounce {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-25%);
	}
	100% {
		transform: translateY(0%);
	}
}

/* #endregion */