/*
* Styles for the index pages
*/

/* Index styles */
main.index {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: inherit;
}
main.index a {
	color: #aaa;
	text-decoration: none;
}
main.index article {
	width: 25vw;
	height: 25vw;
	min-width: 10em;
	min-height: 10em;
	background-color: #ddd;
	margin: 0.75em;
	padding: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	box-shadow: 5px 5px 5px #BBB;
	transition: background-size 0.5s ease-in;
}
main.index article h2 {
	font-size: max(2.5vw,1em);
	text-align: right;
	color: white;
	padding: 0.25em 0.5em 0.25em 0.5em;
	position: relative;
	bottom: -7em;
	background-image: linear-gradient( 270deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) );
	font-weight: lighter;
}

/* Background images for links */
main.index article.spring {
	background-image: url(../images/index/spring.jpg);
}
main.index article.easter {
	background-image: url(../images/index/easter.jpg);
}
main.index article.summer {
	background-image: url(../images/index/summer.jpg);
}
main.index article.summer_holiday {
	background-image: url(../images/index/summer_holiday.jpg);
}
main.index article.autumn {
	background-image: url(../images/index/autumn.jpg);
}
main.index article.christmas {
	background-image: url(../images/index/christmas.jpg);
}
main.index article.about {
	background-image: url(../images/index/about.jpg);
}
main.index article.classes {
	background-image: url(../images/index/classes.jpg);
}
main.index article.studio {
	background-image: url(../images/index/studio.jpg);
}
main.index article.shows {
	background-image: url(../images/index/shows.jpg);
}
main.index article.news {
	background-image: url(../images/index/news.jpg);
}
/* Hover styles */
main.index a:hover article {
	background-size: 110%;
	border-color: #333;
}
main.index a:hover h2 {
	color: black;
	background-image: linear-gradient( 270deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0) 90%, rgba(0, 0, 0, 0) );
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
	main.index article {
		box-shadow: 5px 5px 5px #666;
	}
	main.index a:hover article {
		border-color: #FFF;
	}
}