/*******************************/
/* Global variables and styles */
/*******************************/

:root {
	/* If you change this color, also change the theme color in index.html -> head */
	--page-background: rgb(0, 11, 80);
	--page-background-dot: #19167a;
	--page-background-dot-size: 5%;
	--card-background-1: rgb(158, 175, 219);
	--card-background-2: rgb(135, 147, 206);
	--color-text: black;
	--color-text-dark: #111;
	--color-text-highlight: rgba(96, 64, 112, 0.7);
	--text-font: "JetBrains Mono", monospace;
	--text-size: 1.2rem;
	--margin-size: 24px;
	--margin-size-edge: calc(var(--margin-size) + 4px);
	--scrollbar-size: 10px;

	scrollbar-color: var(--card-background-2) var(--page-background);
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: var(--scrollbar-size);
	height: var(--scrollbar-size);
}

::-webkit-scrollbar-thumb {
	background: var(--card-background-2);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--card-background-1);
}

::-webkit-scrollbar-track {
	background: var(--page-background);
}

::selection {
	background-color: var(--color-text-highlight);
}

body {
	background-color: var(--page-background);
	background-image:
		radial-gradient(at 25% 25%, var(--page-background-dot) 0 var(--page-background-dot-size), transparent 0),
		radial-gradient(at 75% 75%, var(--page-background) 0 var(--page-background-dot-size), transparent 0);
	background-size: 5vmin 5vmin;
	background-attachment: fixed;
	background-position: 8px 8px;

	color: var(--color-text);
	font-family: var(--text-font), monospace;

	margin: var(--margin-size) 0 0 0;
	padding: 0;

	display: grid;
	grid-template: auto / auto auto;
}

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

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

h1,
h2,
p {
	margin: 0;
	padding: 0;
}

p,
a,
label,
summary,
td {
	font-size: var(--text-size);
}

summary {
	text-decoration: underline;
	color: var(--color-text);
	cursor: pointer;
}

summary:hover {
	color: var(--color-text-highlight);
}


/**************/
/* Info panel */
/**************/

header {
	grid-column: 1;
	grid-row: 1;

	width: min-content;
	margin: 0 var(--margin-size) 0 var(--margin-size-edge);
}

.sticky {
	/*noinspection CssInvalidPropertyValue*/
	position: -webkit-sticky;
	position: sticky;

	top: var(--margin-size);
	max-height: calc(100vh - var(--margin-size));
	overflow-y: scroll;
}

#info-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-flow: column;

	height: fit-content;
	margin-bottom: var(--margin-size);
}

#info-panel > * {
	margin: 8px 16px;
}

#profile-picture {
	width: 128px;
	height: 128px;
	border-radius: 0 0 50% 0;
	margin-top: 16px;
}

#contact-names > * {
	margin: 0;
	padding: 0;
}

#contact-links {
	margin-bottom: 16px;
}

#contact-links > a {
	margin: 0 16px;
	padding: 0;
	display: block;
	text-align: center;
}

.nav-list.card {
	margin: var(--margin-size) auto;
	padding: 0;
	height: fit-content;

	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-flow: column;
}

.nav-list > * {
	padding: 4px 8px;
	width: 100%;
	text-decoration: none;
}

.nav-list > *:hover {
	text-decoration: underline;
}

.nav-list > *:hover * {
	cursor: pointer;
}

.nav-list > p:hover * {
	cursor: default;
}

.nav-list > *:nth-child(even) {
	background-color: var(--card-background-1);
}

.nav-list > *:nth-child(odd) {
	background-color: var(--card-background-2);
}


/*****************/
/* Accessibility */
/*****************/

#accessibility-panel {
	margin-top: var(--margin-size);
}

#accessibility-panel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff0;
  /* Not removed via appearance */
  margin: 0;
}


/*********/
/* About */
/*********/

/*
@supports(background-clip: text) {
	.trans,
	.enby {
		color: #0000;
		background-clip: text;
	}

	.trans {
		background-image: linear-gradient(90deg, #5ccefa, #5ccefa 20%, #f6a8b7 20%, #f6a8b7 40%, #fff 40%, #fff 60%, #f6a8b7 60%, #f6a8b7 80%, #5ccefa 80%, #5ccefa);
	}

	.enby {
		background-image: linear-gradient(90deg, #fdf52f, #fdf52f 25%, #fff 25%, #fff 50%, #9d5ad2 50%, #9d5ad2 75%, #000 75%, #000);
	}
}
*/

#language-table {
	margin: 8px 0;
	border: 4px solid var(--card-background-2);
	border-collapse: collapse;
}

#language-table > tbody > tr > td {
	padding: 8px;
}

#language-table > tbody > tr:nth-child(odd) {
	background-color: #937ca1;
}

#language-table > tbody > tr:nth-child(even) {
	background-color: #7f6591;
}

#language-table > tbody > tr > td:nth-child(even) {
	background-color: #00000008;
}


/**********/
/* Cards! */
/**********/

main {
	grid-column: 2;
	grid-row: 1;

	margin-right: calc(var(--margin-size) + 8px);
}

.card-bg {
	background-color: var(--card-background-2);
}

.card-header {
	width: fit-content;
	padding: 8px 16px;
	font-size: var(--text-size);
	background-color: var(--card-background-1);
}

.card {
	margin: 0 auto;
	padding: 16px;

	display: flex;
	flex-flow: column nowrap;
}

.card:nth-child(odd) {
	background-color: var(--card-background-1);
}

.card:nth-child(even) {
	background-color: var(--card-background-2);
}

.card-subheading {
	color: var(--color-text-dark);
	margin-bottom: 16px;
}


/*****************/
/* Project cards */
/*****************/

section {
	scroll-margin-top: var(--margin-size);
	margin-bottom: var(--margin-size);
}

section:not(#about) {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex-flow: column;
}

project-card {
	display: grid !important;
	grid-template: auto / 408px auto;
	width: calc(100% - var(--margin-size));
}

project-card > :nth-child(1) {
	width: 408px;
	margin: auto 0;
	grid-column: 1;
	grid-row: 1;
}

project-card > :nth-child(2) {
	margin-left: 16px;
	grid-column: 2;
	grid-row: 1;
}

project-card > :nth-child(2) > p {
	text-align: justify;
}

project-card .card-link-list > a {
	display: block;
	text-align: center;
	width: fit-content;
	margin: 0 auto;
}

footer {
	margin-bottom: var(--margin-size);
}


/*****************/
/* Helper styles */
/*****************/

.shadow-border {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.fixed-background {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.flex-horizontal {
	display: flex;
	flex-flow: row wrap;
}

.flex-vertical {
	display: flex;
	flex-flow: column wrap;
}

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

.display-inherit {
	display: inherit;
}

.align-center {
	text-align: center;
}

.align-justify {
	text-align: justify;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.round {
	border-radius: 50%;
}

.no-margin {
	margin: 0;
}

.no-padding {
	padding: 0;
}

.indent-paragraphs > p,
p.indent-paragraphs {
	text-indent: 2em;
}

.text-bold {
	font-weight: bold;
}

.text-italic {
	font-style: italic;
}

.text-underline {
	text-decoration: underline;
}

.text-monospace {
	font-family: "Ubuntu Mono", monospace !important;
}


/**********************/
/* Fun mobile changes */
/**********************/

@media only screen and (max-width: 1000px) {
	section:not(#about) {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		flex-flow: column;
	}

	project-card {
		display: grid !important;
		grid-template: auto auto / auto;

	}

	project-card > :nth-child(1) {
		width: 100%;
		grid-column: 1;
		grid-row: 1;
	}

	project-card > :nth-child(2) {
		margin-left: 0;
		margin-top: 16px;
		grid-column: 1;
		grid-row: 2;
	}

	project-card > :nth-child(2) > p {
		text-align: left;
	}
}

@media only screen and (max-width: 600px) {
	body {
		display: initial;
	}

	header {
		margin: 0 0 var(--margin-size) 0;
		width: 100%;
		height: fit-content;
	}

	main {
		margin-right: 0;
	}

	project-card {
		width: auto;
	}

	.sticky {
		position: static;

		max-height: initial;
	}
}