/* Atkinson Hyperlegible */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* Jetbrains mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
	background-color: #503864;
	color: white;
}

/* #region heading defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: center;
}

h2 {
	font-size: 1.9em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.1em;
}

/* #endregion */

/* #region link defaults */
:link,
:visited {
	color: white;
	transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@media (prefers-reduced-motion) {

	:link,
	:visited {
		transition: none;
	}
}

:link:hover,
:visited:hover {
	color: #fca9ff;
}

/* #endregion */

/* #region Header and footer */
.greeting,
footer {
	border: 5px dashed #9d6ec5;
	background: #503864;
	background-blend-mode: overlay;
	background-repeat: round;
}

.greeting {
	margin-bottom: 0;
}

.folder-text {
	font-family: "JetBrains Mono", monospace;
	background-color: #503864;
	padding: 3px;
	margin: 0;
	border-radius: 8px;
	margin-right: 1%;
	text-wrap: nowrap;
}

#short-folder {
	display: none
}

.navbar {
	background-color: #30253a;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
}

.navbar .nav-links {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.navbar a {
	text-align: center;
	padding: 10px;
	text-decoration: none;
	color: white;
	/* width: 100%; */
	/* max-width: 10em; */
}

.navbar .nav-space {
	margin: 0;
	padding: 0;
	margin-right: auto;
}

@media (max-width: 800px) {
	.navbar {
		flex-direction: column-reverse;
	}

	.navbar .folder-text {
		margin: 1%;
	}

	.nav-links {
		justify-content: space-evenly;
	}

	.navbar a {
		width: 100%;
	}
}

@media (max-width: 400px) {
	#long-folder {
		display: none;
	}

	#short-folder {
		display: initial;
	}
}

/* Navbar link corresponding to current page */
.navbar a[aria-current="page"] {
	background-color: #503864;
}

.navbar a:hover {
	background-color: #9d6ec5;
	color: white;
}

.greeting {
	background-image: url("/assets/images/lines-left.gif");
}

footer {
	background-image: url("/assets/images/lines-right.gif");
	padding-bottom: 1%;
	margin-top: 1%;
}

@media (max-width: 500px) {
	#webring-self {
		display: none;
	}
}

@media (prefers-reduced-motion) {
	.greeting {
		background-image: url("/assets/images/lines-still.gif");
	}

	footer {
		background-image: url("/assets/images/lines-still.gif");
	}
}

/* #endregion */

/* #region Flex rows/columns */
.flex-row,
.flex-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

/* reverse direction */
.reverse,
.reverse .flex-row {
	flex-direction: row-reverse;
}

/* #endregion */

/* #region rigid rows/columns */
.rigid-column2 {
	float: left;
	width: 50%;
}

.rigid-column2.reverse {
	float: right
}

/* Clear floats after the columns */
.rigid-row:after {
	content: "";
	display: table;
	clear: both;
}

/* #endregion */

/* #region embedded mastodon feed */
.feed {
	border: none;
	background-color: white;
	padding: 5px;
	border-radius: 20px;
}

/* #endregion */

/* #region round images */
.round-image {
	border-radius: 8px;
}

/* #endregion */

/* #region Button-styled links */
a:link.button,
a:visited.button {
	background-color: white;
	color: black;
	border: 2px solid black;
	padding: 10px 20px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.15em;
}

a:hover.button,
a:active.button {
	background-color: #9d6ec5;
	color: white;
	border: 2px solid white;
}

/* play lil rotation animation and fade color transition unless low motion */
@media (prefers-reduced-motion: no-preference) {
	a.button {
		--rotation-degrees: 5deg;
	}

	a:hover.button {
		transition:
			transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
			color, background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
	}

	a:not(:hover).button {
		transition:
			transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1),
			color, background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
	}

	a.button:nth-child(odd) {
		--rotation-degrees: -5deg;
	}

	a:hover.button,
	a:active.button {
		transform: rotate(var(--rotation-degrees));
	}
}

/* #endregion */

/* #region tooltips */
/*
	based on W3Schools
	tutorial: https://www.w3schools.com/howto/howto_css_tooltip.asp
	example: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom
*/
.tooltip {
	text-decoration: underline dotted;
	position: relative;
	display: inline-block;
	cursor: help;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #30253a;
	color: white;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -60px;

	cursor: initial;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #30253a transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* #endregion */