/* load in the font */
@font-face {
	font-family: "Atma";
	src: url("/Atma-Regular.ttf");
}

/* size things according to their border */
* {
	box-sizing: border-box;
}

/* overall document styling */
html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	background: #2d3436;
}

/* main layout */
.main {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 60vh;
	z-index: 1;
	height: 100%;

    /* grid layout of tiles */
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);

    /* dim everything when not selected */
	&.dim {
		.tile:not(.popout) {
			filter: brightness(0.3);
		}
        .key-letters {
            filter: brightness(0.3);
        }
	}
}

/* loading screen */
.loader {
	z-index: 100;
	position: fixed;
	inset: 0;
	background: #2d3436;
	opacity: 0;
	transition: opacity 1.5s;
	pointer-events: none;

    /* when it's active, make it visible */
	&.active {
		opacity: 1;
		pointer-events: all;
	}

    /* center the items within it */
	display: flex;
	justify-content: center;
	align-items: center;

	.center {
		text-align: center;
	}

    /* flavor text below the image */
	h2.loader-txt {
		font-family: "Atma";
		color: #fff;
		text-align: center;
		font-size: 26px;
		width: 100%;
		height: 90px;
	}

    /* image of dawson's face */
	.loader-img {
		position: relative;
		margin: 10px auto;
		width: 240px;
		height: 240px;
		animation: spinny-socks 0.8s infinite ease-in-out;

        /* positioning & animating the image */
		img {
			position: absolute;
			inset: 0;
			width: 100%;
			animation: bouncy-socks 1s infinite ease-in-out;
		}

        /* black & white image */
		img.bw {
			filter: grayscale(100%);
		}

        /* color image that fills up as it loads */
		img.color {
			transition: clip-path 0.5s;
			clip-path: inset(100% 0 0 0);
		}
	}
}

/* animation for the loading dawson bouncing */
@keyframes bouncy-socks {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

/* animation for the loading dawson swaying back and forth */
@keyframes spinny-socks {
	0%,
	100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}

/* loads the images in the background while the loading screen is active */
.preloader {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* 6-letter "key" in the middle */
.key-letters {
	z-index: 80;
	pointer-events: none;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;

    transition: filter 0.7s;
	div {
		width: 100%;
		text-align: center;
	}
	p {
		margin: 0 auto;
		display: block;
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 34px;
		color: #fff;
		background: #000a;
		border-radius: 50%;
		font-family: "Atma";
	}
}

/* tiles that make up the grid */
.tile {
	position: absolute;
	max-width: calc(100% / 6);
	max-height: calc(100% / 6);
	width: 200px;
	height: 371px;
	transition: max-width 0.7s, max-height 0.7s, left 0.7s, top 0.7s, filter 0.7s;
	transform: translate(-50%, -50%);
	&.popout {
		left: 50% !important;
		top: 50% !important;
		max-width: 200px !important;
		max-height: 371px !important;
		pointer-events: none;
	}
}

/* dims the background when an image is selected */
.popup-dim {
	z-index: 90;
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: #000c;
	opacity: 0;
	transition: opacity 1s;
	&.active {
		pointer-events: all;
        /* catches clicks to close the selected image */
	}
}