@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,400;0,800;1,200;1,400;1,800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,300;0,400;0,800;1,300;1,400;1,800&display=swap');

:root {
	--fontSans: "Fira Sans", sans-serif;
	--fontSansSC: "Alegreya Sans SC", sans-serif;
	--bgColor: #262b35;
	--textBgColor: #2f3646;
	--textColor: #d6d5cf;
	--textOnBgColor: #454c5b;
	--textAccentColorRGB: 236, 181, 39;
	--textAccentColor: rgb(var(--textAccentColorRGB));
	--textNoteColor: #6a6d7a;
	--linkColor: #6080f1;
	--linkHoverColor: #615dff;
}


.sc {
	font-family: var(--fontSansSC);
	font-size: 2.1ex;
}

.note {
	color: var(--textNoteColor)
}


a, a:visited {
	color: var(--linkColor);
}

a:hover {
	color: var(--linkHoverColor);
}


html {
	background: var(--bgColor) !important;
}

body {
	font-family: var(--fontSans);
	font-size: 11pt;
	background: var(--bgColor);
	margin: 0;
	padding: 0;
}


/* Title */

#title, #smallTitle {
	font-weight: 200;
	color: var(--textAccentColor);
	text-shadow: 0 0 0.7ex rgba(var(--textAccentColorRGB), 0.3);
	user-select: none;
	text-align: center;
}

/* Big title on main page */

#titleWrapper {
	height: 100vh;
	max-height: -webkit-fill-available;
	display: flex;
	justify-content: center;
	align-items: center;
}


@keyframes titleFadeIn {
	from {
		opacity: 0;
		transform: translateY(-0.4ex);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#title {
	font-size: max(10vw, 32pt);
	margin: 0;

	/* fade in animation */
	opacity: 0; 
	animation: 1.0s cubic-bezier(0.5, 1.5, 0.5, 1) 0.5s titleFadeIn;
	animation-fill-mode: forwards; /* keep final state */
}


/* Remainder of the page */

#smallTitle, #header, #content, #footer {
	max-width: 900px; /* Match value of @media screen */
	box-sizing: border-box; /* for width to remain fixed with added padding */
	margin: 0 auto;
	padding: 20px 12px;
	transition: padding 0.2s ease-out;
}

#content {
	background: var(--textBgColor);
	color: var(--textColor);
	transition-property: border-radius padding;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 900px) { /* Match value with max-width (variable do not work here) */
	#smallTitle, #header, #content, #footer {
		padding: 24px;
	}

	#content {
		border-radius: 20px;
	}
}


/* Small title on other pages */

#smallTitle {
	text-align: center;
	font-size: 32pt;
	padding: 32px;
}


/* Header with links */

#header {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.0em;
	padding-top: 0;
}

#header > * {
	display: inline-block;
	position: relative;
	font-family: var(--fontSansSC);
	font-size: 16pt;
	color: var(--textAccentColor);
	text-decoration: none;
	user-select: none;
}

#header a::after { /* make underline appear when hover */
	content: "";
	position: absolute;
	top: 24px;
	width: 100%;
	transform: scaleX(0); /* hide element */
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--textAccentColor);
	transform-origin: bottom right;
	transition: transform 0.15s ease-out;
}

#header a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

@keyframes clickedHeaderLink {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(0.5); }
	100% { transform: scaleX(1); }
}

#header a:active::after {
	transform-origin: bottom center;
	animation-name: clickedHeaderLink;
	animation-duration: 0.2s;
}

#header .separator {
	height: 1.5ex;
	border-left: 1px solid var(--textAccentColor);
}


/* Content */

#content {
	line-height: 2.5ex;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	margin: 15px 0;
}

#content h1:first-child {
	margin-top: 0;
}

#content h1 {
	color: var(--textAccentColor);
	font-family: var(--fontSansSC);
	font-size: 18pt;
	font-weight: normal;
}

#content h2 {
	color: var(--textAccentColor);
	font-family: var(--fontSansSC);
	font-size: 15pt;
	font-weight: normal;
}

#content h3 {
	color: var(--textAccentColor);
	font-size: 12pt;
	font-weight: normal;
	font-style: italic;
}

#content h4,
#content h5,
#content h6 {
	color: var(--textAccentColor);
	font-size: 11pt;
	font-weight: normal;
	font-style: italic;
}

#content p {
	margin: 0 0 1.1ex 0;
}

#content p:last-child {
	margin: 0;
}

#content em {
	color: var(--textAccentColor);
}


/* Footer */

#footer {
	color: var(--textOnBgColor);
}