@import url('https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400..700&display=swap');

@keyframes intro {
	from {opacity: 0;}
	to {opacity: 1;}
		
}

html * {
	box-sizing: border-box;
}
:root {
	--primary-color: #000000;
	--secondary-color: #eeddaa;
}

body {
	font-family: "Edu SA Beginner",system-ui, sans-serif;
	font-size: 130%;
	line-height: 144%;
	margin: 0;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat (12, minmax(200px,1fr));
	gap: 1em;
	padding: 1em;
	
	background-image: url("images/bg.jpg");
	justify-content: center;
	justify-self: center;
	animation-name: intro;
	animation-duration: 1.5s;
}

.grid-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(3,auto);
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
		"mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn"
		"asd asd asd asd asd asd asd asd asd asd asd asd"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";

	gap: 1em;
	padding: 1em;
	justify-content: center;
	justify-self: center;
	animation-name: intro;
	animation-duration: 1.5s;
}

.gallery-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(3,auto);
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
		"mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn"
		"asd asd asd asd asd asd asd asd asd asd asd asd"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";

	gap: 1em;
	padding: 1em;
}

.about-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(3,auto);
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
		"mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn"
		"asd asd asd asd asd asd asd asd asd asd asd asd"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";

	gap: 1em;
	padding: 1em;
	justify-content: center;
	justify-self: center;
}

a {
	padding: 10px 20px;
    color: white;
    text-decoration: none;
    display: inline-block;
	border-radius: 8px;
	background-color: rgb(0,150,150,0.4);
	transition-duration: 0.4s;
}

.first {
	font-size: 130%;
}

a:hover {
		background-color: rgb(0,150,160,1.0);
}

.disabledbtn {
		opacity: 0.6;
		cursor: not-allowed;
}

li { 
	display: inline;
	padding: 1em;
}
		

header {
	min-height: 30vh;
	background-color: rgba(0,50,50,0.9);	
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat (1, minmax(200px,1fr));
	gap: 1em;
	padding: 1em;
	grid-area: hdr;
	justify-self: center;
	justify-content: center;
	font-size: 120%;
}

main {
	
	grid-area: mn;
	/* background-color: #45CCAA; */
}

footer {
	/* grid-column: span 12; -- define bounds */
	grid-area: ftr;
	background-color: rgba(0,50,50,0.8);
	color: white;
}

.parent {
	color: white;
	display: grid;
	grid-template-columns: repeat(2, minmax(200px,1fr));
	gap: 1em;
	padding: 0 1em;
	background-color: rgba(0,50,50,0.6);
}

.gallery-parent {
	color: white;
	display: grid;
	grid-template-columns: repeat(3, minmax(200px,1fr));
	gap: 1em;
	padding: 0 1em;
}

.gallery-parent h2 {
	background-color: rgba(0,50,50,0.6);
	padding: .5em;
}

.about-parent {
	color: white;
	display: grid;
	grid-template-columns: repeat(2, minmax(200px,1fr));
	gap: 1em;
	padding: 0 1em;
	background-color: rgba(0,50,50,0.6);
}

.about-second {
	justify-content: center;
}

aside {
	grid-area: asd;
}

h1 {
	line-height: 1.2em;
	/* outline: 1px solid red; */
	justify-self: center;
	color: white;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
	grid-gap: 10px;
}

.gallery-item img {
		width: 100%; height: 100%;
		object-fit: contain;
}

.gallery-item img:hover {
	scale: 120%;
	width: 105%;
	filter: drop-shadow(5px 5px 10px #000);
}

img {
	border-radius: 8px;
	transition-duration: 0.3s;
}


.self img {
	width: 40%; height: 40%;
	object-fit: cover;
	border-radius: 20px;
	padding: 10px;
}

img:hover {

}

@media (min-width: 550px) { /* mid-width screen #/
	.grid-parent {
		grid-remplate-columns: repeat(2, minmax(200px,1fr)
	}
	nav {
		grid-column: -2/-1;
}