@import "SoulCatsCss.css";

body {
	background-color: black;
	display: flex;
	flex-flow: column;
	gap: 10px;
	place-items: center;
	height: 100vh;
}

.bodoni-moda {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.nav {
    display: flex;
	justify-content: space-evenly;
	gap: 10px;
	color: white;
	width: 100%;
}

a {
	margin-left: 10px;
	text-decoration: none;
	font-size: 20px;
	color: white;
}

h1 {
	font-size: 7vw;
	color: white;
}

img {
	width: 20vw;
	height: 25vh;
	border: white solid 2px;
}

#grid {
	display: grid;
	grid-template-areas: 
	"img1 img2 img3 img4"
	"img5 img6 img7 img8"
	"img9 img10 img11 img12"
	"img13 img14 img15 img16"
	"img17 img18 img19 img20"
	"img21 img22 img23 img24"
	"img25 img26 img27 img28";

	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

	row-gap: 2vh;
	column-gap: 2vw;
}

#img1 {
	grid-area: img1;
}

#img2 {
	grid-area: img2;
}

#img3 {
	grid-area: img3;
}

#img4 {
	grid-area: img4;
}

#img5 {
	grid-area: img5;
}

#img6 {
	grid-area: img6;
}

#img7 {
	grid-area: img7;
}

#img8 {
	grid-area: img8;
}

#img9 {
	grid-area: img9;
}

#img10 {
	grid-area: img10;
}

#img11 {
	grid-area: img11;
}

#img12 {
	grid-area: img12;
}

#img13 {
	grid-area: img13;
}

#img14 {
	grid-area: img14;
}

#img15 {
	grid-area: img15;
}

#img16 {
	grid-area: img16;
}

#img17 {
	grid-area: img17;
}

#img18 {
	grid-area: img18;
}

#img19 {
	grid-area: img19;
}

#img20 {
	grid-area: img20;
}

#img21 {
	grid-area: img21;
}

#img22 {
	grid-area: img22;
}

#img23 {
	grid-area: img23;
}

#img24 {
	grid-area: img24;
}

#img25 {
	grid-area: img25;
}

#img26 {
	grid-area: img26;
}

#img27 {
	grid-area: img27;
}

#img28 {
	grid-area: img28;
}

#grid2 {
	display: grid;
	grid-template-areas: 
	"if1 if2 if3"
	"if4 if5 if6";

	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	row-gap: 2vh;
	column-gap: 2vw;
}

iframe {
	width: 28vw;
	height: 30vh;
}

#if1 {
	grid-area: if1;
}

#if2 {
	grid-area: if2;
}

#if3 {
	grid-area: if3;
}

#if4 {
	grid-area: if4;
}

#if5 {
	grid-area: if5;
}

#if6 {
	grid-area: if6;
}

footer {
	align-self: flex-start;
	color: white;
}

@media screen and (max-width: 411px) {
	#grid {
		grid-template-areas: 
		"img1 img2"
		"img3 img4"
		"img5 img6"
		"img7 img8"
		"img9 img10"
		"img11 img12"
		"img13 img14"
		"img15 img16"
		"img17 img18"
		"img19 img20"
		"img21 img22"
		"img23 img24"
		"img25 img26"
		"img27 img28";

		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	img {
		width: 40vw;
		height: 30vh;
	}
	
	h1 {
		font-size: 10vw;
	}

	a {
		font-size: 4vw;
	}

	iframe {
		width: 30vw;
		height: 20vh;
	}

	footer {
		font-size: 2vw;
	}
}