@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Quicksand:wght@300..700&display=swap');

/*
------------------------------------------------------------------------------------------------------------------------
Variables.
*/

:root {

	--font-family-body: "Quicksand", sans-serif;
	--font-family-heading: "Funnel Display", sans-serif;

	--font-size-scale: 1;

	--font-size-s: calc(.8rem * var(--font-size-scale));
	--font-size-m: calc(1rem * var(--font-size-scale));
	--font-size-3: calc(1.2rem * var(--font-size-scale));
	--font-size-2: calc(1.8rem * var(--font-size-scale));
	--font-size-1: calc(2rem * var(--font-size-scale));
	--font-size-x: calc(3rem * var(--font-size-scale));

	--space-s: .5rem;
	--space-m: 1rem;
	--space-l: 4rem;
}

@media screen and (min-width: 1024px) {

	:root {

		--font-size-scale: 1.5;
	}
}

/*
------------------------------------------------------------------------------------------------------------------------
Reset.
*/

*,
*::before,
*::after {

	color: inherit;
	background: none;
	border: none;
	outline: none;

	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;

	text-align: inherit;
	text-shadow: inherit;
	list-style-type: none;
	user-select: none;

	overflow-wrap: break-word;

	box-sizing: border-box;

	margin: 0;
	padding: 0;
}

img:not([hidden]),
picture:not([hidden]),
video:not([hidden]),
canvas:not([hidden]),
svg:not([hidden]) {

	display: block;
}

em { font-style: italic; }
b, strong { font-weight: bold; }

input,
textarea { user-select: all; }

/*
------------------------------------------------------------------------------------------------------------------------
Body.
*/

body {

	background: linear-gradient(to bottom,  #14111d 0%, #102761 100%);
	background-attachment: fixed;

	color: #EEE;
}

/*
------------------------------------------------------------------------------------------------------------------------
Typography.
*/

body {

	font-family: var(--font-family-body);
	font-size: var(--font-size-m);

	text-align: center;
}

h1, h2, h3 {

	font-family: var(--font-family-heading);
	font-weight: bold;
}

h1 { font-size: var(--font-size-1); }
h2 { font-size: var(--font-size-2); }
h3 { font-size: var(--font-size-3); }

small { font-size: var(--font-size-s); }

/*
------------------------------------------------------------------------------------------------------------------------
Page header.
*/

body > header {

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);

	padding: var(--space-m);
}

#prism-logo {

	font-family: var(--font-family-heading);
	font-size: var(--font-size-3);
	font-weight: bold;

	text-transform: uppercase;

	display: flex;
	align-items: center;
}

body > header nav {

	background: #00000088;
	border-radius: var(--space-s);

	display: flex;
	gap: var(--space-m);
	justify-content: center;

	padding: var(--space-s) var(--space-m);
}

body > header a {

	font-size: var(--font-size-3);
	text-decoration: none;

	padding: var(--space-m) 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
Masthead.
*/

#masthead {

	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: var(--space-m);
	height: 90vh;
}

#masthead h1 {

	text-shadow: 0 var(--space-s) 0 #00000022;
	font-size: var(--font-size-x);

	margin-top: calc(var(--space-l) * -2.5);
}

/*
------------------------------------------------------------------------------------------------------------------------
Panel.
*/

.panel {

	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	align-items: center;

	padding: var(--space-l) var(--space-m);
}

.panel--light {

	background: #FFF;
	color: #111;
}

.panel--dark {

	background: #000;
	color: #EEE;
}

.page {

	display: flex;
	flex-direction: column;
	gap: var(--space-l);

	width: 100%;
	max-width: 60rem;
}

/*
------------------------------------------------------------------------------------------------------------------------
Gallery.
*/

.gallery {

	--columns: 2;

	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	gap: var(--space-m);
}

@media screen and (min-width: 600px) { .gallery { --columns: 3; } }
@media screen and (min-width: 1200px) { .gallery { --columns: 6; } }

.gallery img {

	border-radius: 50%;

	width: 100%;
	height: auto;
}

.gallery > * {

	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

/*
------------------------------------------------------------------------------------------------------------------------
Button.
*/

.button {

	background: #FFFFFF22;
	border-radius: var(--space-s);

	font-family: var(--font-family-heading);
	text-decoration: none;

	padding: var(--space-m);
}

.button--large { font-size: var(--font-size-2); }

/*
------------------------------------------------------------------------------------------------------------------------
List.
*/

.list {

	font-size: var(--font-size-3);

	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

/*
------------------------------------------------------------------------------------------------------------------------
Page footer.
*/

body > footer {

	display: flex;
	flex-direction: column;
	gap: var(--space-m);

	padding: var(--space-l) var(--space-m);
}

/*
------------------------------------------------------------------------------------------------------------------------
Page background and fade.
*/

@keyframes anim-fade-out {

	to {

		opacity: 0;
	}
}

#page-bg,
#page-fade {

	position: fixed;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;
}

#page-bg {

	opacity: .125;
	filter: blur(.5rem);

	z-index: -1;
}

#page-fade {

	animation: anim-fade-out 1s 1s forwards;
	background: #000;
	pointer-events: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
Animation; typing effect.
*/

@keyframes anim-typing {

	to {

		opacity: 1;
		transform: translateY(0);
	}
}

.preanim--typing { opacity: 0; }

.anim--typing .word { white-space: nowrap; }

.anim--typing .char {

	display: inline-block;
	opacity: 0;

	transform: translateY(1em);
	animation: anim-typing .1s forwards;
}

/*
------------------------------------------------------------------------------------------------------------------------
Animation; page introduction.
*/

@keyframes anim-fade-in {

	to {

		opacity: 1;
	}
}

.anim--intro {

	animation: anim-fade-in 1s forwards;
	opacity: 0;

	z-index: 1;
}

/*
------------------------------------------------------------------------------------------------------------------------
Animation; fade in.
*/

.preanim--fade-in { opacity: 0; }
.anim--fade-in { animation: anim-fade-in 1s forwards; }

/*
------------------------------------------------------------------------------------------------------------------------
Form.
*/

input {

	border-radius: var(--space-s);
	border: 1px solid #FFFFFF22;

	padding: var(--space-m);
}