@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap');

/*-------VARIABLES--------*/
:root {
	--font-color: #f6f6f6;
	--bg-color: #000000;
	--trans-black: rgba(0, 0, 0, 0.722);
	--accent-1: #48d1cc;
	--accent-2: #c71585;
	--accent-3: #ffff00;
	--border-1: 2px solid var(--accent-1);
	--border-2: 2px solid var(--accent-2);
	--border-3: 2px solid var(--accent-3);
	--main-font: "IBM Plex Sans", sans-serif;
	--alt-font: "Palette Mosaic";
}

/*-------GENERAL--------*/

html {
	background-color: var(--bg-color);
	color: var(--font-color);
	font-family: var(--main-font);
}

h1 {
	font-size: x-large;
	text-align: center;
	font-weight: 600;
	margin-top: 50px;
}

/*-------links--------*/

a {
	color: inherit;
	text-decoration: inherit;
	font-variant: all-small-caps;
}

a:hover {
	text-decoration: overline;
}

.alt,
.img-caption {
	text-transform: uppercase;
	font-variant: normal;
}

.alt:hover,
.img-caption:hover {
	text-decoration: none;
}

/*-------LAYOUT--------*/

body {
	display: grid;
	grid-template-areas: 
		"h h h"
		"c c c";
	grid-template-columns: 1fr 5fr 1fr;
}

header {
	grid-area: h;
	color: var(--bg-color);
	background-color: var(--accent-1);
	font-weight: bold;
	margin: auto;
}

.nav {
	display: flex;
	justify-content: space-around;
	padding: 3px 0 1px 0;
}

.content {
	grid-area: c;
	margin: auto;
}

@media (width <= 500px) {
	.content, header {width: 100%}}
@media (500px <= width <= 800px) {
	.content, header {width: 85%}}
@media (800px <= width) {
	.content, header {width: 65%}}


/*-------GALLERY--------*/

.gallery {
	display: grid;
	gap: 12px;
	text-align: center;
}

.gallery img {
	height: 16vh;
	width: 100%;
	object-fit: cover;
	vertical-align: middle;
}

.img-container {
	position: relative;
	transition: 0.3s ease-in-out;box-sizing: border-box;
}

#pro .img-container {
	border: var(--border-1);
}

#per .img-container {
	border: var(--border-3);
}

.img-caption {
	position: absolute;
	top: 50%;
  	left: 50%;
 	transform: translate(-50%, -50%);
	width: 95%;
	padding: 15px 0 15px 0;
	margin: 0;
	color: var(--font-color);
	background-color: var(--trans-black);
	font-weight: bold;
	font-size: small;
	z-index: 100;
}

.img-container:active,
#pro .img-container:active,
#per .img-container:active {
	border: var(--border-2);
}

.img-container:nth-child(odd):active {
	rotate: 13deg;
}

.img-container:nth-child(even):active {
	rotate: -13deg;
}

@media (500px <= width) {
	.gallery {
		grid-template-areas: 
			"a b b"
			"a c c"
			"d d e"
			"f f e";
	}
	.gallery img {
		height: 100%;
	}
	.img-container:nth-child(n+2) {
		height: 10em;
	}
	.img-container:nth-child(1) {
		grid-area: a;
		height: calc(20em + 12px);
	}
	.img-container:nth-child(2) {
		grid-area: b;
	}
	.img-container:nth-child(3) {
		grid-area: c;
	}
	.img-container:nth-child(4) {
		grid-area: d;
	}

	.img-container:hover,
	#pro .img-container:hover,
	#per .img-container:hover {
		border: var(--border-2);
	}
	.img-container:nth-child(odd):hover {
		rotate: 13deg;
	}
	.img-container:nth-child(even):hover {
		rotate: -13deg;
	}
}