@charset "UTF-8";
/* Reset styles to avoid inconsistencies in the margin for some elements. */
* {
	margin-block-end: 0px;
	margin-inline-end: 0px;
	margin-block-start: 0px;
	margin-inline-start: 0px;
	text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
}

/* Color variables for light and dark themes: */
:root {
	color-scheme: light dark;
	--focus-outline-color: #afafff;
	--heading-color: #cfcfff;
	--paragraph-color: #afafff;
	--hyperlink-color: #ffcf00;
	/* Styles for navigation links: */
	--navigation-bar-blend-mode: plus-lighter;
	--navigation-bar-color: rgb(95, 63, 255, 0.25);
	--navigation-bar-button-color: rgb(143, 95, 255, 0.25);
	--navigation-bar-hover-color: rgb(176, 156, 235, 0.25);
	/* Color variables for the main background gradient: */
	--main-background-1: #5f1fbf;
	--main-background-2: #6f2fcf;
	--main-background-3: #3f1faf;
	--main-background-4: #5f2f9f;
	--main-background-5: #3f1faf;
	--main-background-6: #5f1fbf;
}

@media (prefers-color-scheme: dark) {
	:root {
		--hyperlink-color: #ff5f3f;
		/* Styles for navigation links: */
		--navigation-bar-blend-mode: exclusion;
		--navigation-bar-color: rgb(63, 47, 191, 0.25);
		--navigation-bar-button-color: rgb(95, 79, 223, 0.25);
		--navigation-bar-hover-color: rgb(53, 42, 132, 0.25);
		/* Color variables for the main background gradient: */
		--main-background-1: #1f003f;
		--main-background-2: #27003f;
		--main-background-3: #1f0f4f;
		--main-background-4: #1f0f3f;
		--main-background-5: #0f0f3f;
		--main-background-6: #1f003f;
	}
}

/* -------- Header and navigation links: -------- */
header {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

nav {
	align-items: center;
	background: var(--navigation-bar-color);
	border-radius: 16px;
	display: flex;
	gap: 8px;
	justify-content: center;
	mix-blend-mode: var(--navigation-bar-blend-mode);
	padding: 8px;
	width: min-content;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.025);
}

/* Change navigation bar styles depending on screen size. */
@media screen and (max-width: 700px) {
	nav {
		flex-direction: column;
		width: 100%;
	}

	nav > a {
		text-align: center;
		width: calc(100% - 64px);
	}

	.github-button-container {
		display: none;
	}
}

nav > a {
	background: var(--navigation-bar-button-color);
	border-radius: 8px;
	color: var(--heading-color);
	line-height: 16px;
	padding: 8px 28px;
 	transition: background-color 0.175s ease;
}

/* -------- Styles for when the user interacts with the buttons inside the navigation bar: -------- */

nav > a:active {
	opacity: 60% !important;
}

nav > a:focus {
	outline: 2px solid var(--focus-outline-color);
}

nav > a:hover {
	text-decoration: none;
	background-color: var(--navigation-bar-hover-color);
}

.github-button-container {
	aspect-ratio: 1 / 1;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.025);
}

.github-button {
	background: unset;
	padding: unset;
}

.github-button:active {
	opacity: 60% !important;
}

.github-button:focus {
	outline-offset: 8px;
}

.github-button:hover {
	background-color: var(--navigation-bar-hover-color);
	transition: background-color 0.175s ease;
}

/* -------- Main body, gradient background, etc. -------- */

body {
  backdrop-filter: blur(100px);
  box-sizing: border-box;
  color: var(--heading-color);
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, 'SF Pro', Roboto, 'Fira Sans', Oxygen, Ubuntu, 'Segoe UI', 'Helvetica Neue', 'Noto Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  gap: 32px;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  -webkit-backdrop-filter: blur(100px);

  /* Background gradient animation */
  background: conic-gradient(
    var(--main-background-1),
    var(--main-background-2),
    var(--main-background-3),
    var(--main-background-4),
    var(--main-background-5),
    var(--main-background-6),
    var(--main-background-1)
  );
  background-size: 400% 400%; /* Adjust the size based on your preference */
  animation: gradientAnimation 7.5s linear infinite alternate;
}

body.js-gradient {
  animation: none; !important
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Change padding width depending on screen size. */
@media screen and (min-width: 768px) {
	header,
	main {
		padding-left: 20%;
		padding-right: 20%;
	}
}

@media screen and (min-width: 512px) {
	body {
		padding: 5%;
	}

	header,
	main {
		padding-left: 5%;
		padding-right: 5%;
	}
}

@media screen and (max-width: 512px) {
	body {
		justify-content: unset;
		padding: 5%;
	}

	header,
	main {
		padding-left: 5%;
		padding-right: 5%;
	}
}

main {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* -------- Text styles: -------- */

h1 {
	color: var(--heading-color);
	font-size: 48px;
	font-weight: 700;
}

h2 {
	color: var(--paragraph-color);
	font-size: 24px;
	font-weight: 600;
}

p,
li {
	color: var(--paragraph-color);
	font-weight: 500;
	line-height: 32px;
}

sub {
	color: var(--paragraph-color);
}

span,
a {
	color: var(--hyperlink-color);
	text-decoration: none;
}

/* -------- Styles for when the user interacts with hyperlinks: -------- */

a:active {
	opacity: 60% !important;
}

a:focus {
	opacity: 80%;
	outline: unset;
	text-decoration: underline;
}

a:hover {
	opacity: 80%;
	text-decoration: underline;
}