@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body{
	margin: 0%;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Happy Monkey';
}
p, ul, li{
	font-family: 'Open Sans';
}
a{
	font-family: 'Winky Rough';
}
.title h1, h3{
	font-family: 'Indie Flower';
}
li{
	list-style-image: url('../Img/UI/ListMarker.webp');
}
ul{
	margin: 0%;
}
/* Move these colours into seasonal styling */
a{
    color: #5F5F5F;
    text-decoration: none;
	font-style: italic;
}
a:hover{
    color: #3F3F3F;
    text-decoration: underline #000000;
}
section{
	display: flex;
	flex-direction: column;
	margin-bottom: 0%;
}
section h1{
	text-decoration: underline;
}
section p{
	margin-bottom: 0%;
}
.gameLink h1{
	text-decoration: none;
}
.background
{
	min-height: 100vh;
	max-height: 100%;
}
.mainBody{
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
}
.heading{
	display: flex;
}
.headerItems{
	display: flex;
	flex-direction: row;
}
.title{
	margin-left: 0%;
}
.title h1{
	text-align: center;
	margin: 0%;
}
.title h3{
	text-align: center;
	margin: 0%;
}
.profile{
	display: flex;
}
.imageRow{
	display: flex;
}
.imageRow img{
	width: 100%;
}
.imageRow p{
	font-size: 0%;
}
.imageBox p{
	margin-top: 5px;
	margin-left: 15px;
	margin-bottom: 0%;
}
.contentGallery{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.galleryItem{
	position: relative;
}
.galleryItem img{
	display: block;
}
.itemOverlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.2s, ease;
	align-content: center;
}
.itemOverlay h3{
	text-align: center;
	padding: 0px;
	margin: 0px;
}
.itemOverlay p{
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.galleryItem:hover .itemOverlay{
	opacity: 0.8;
}
.galleryItem:hover .itemOverlay h3{
	opacity: 1;
}
.galleryItem:hover .itemOverlay p{
	opacity: 1;
}

.themeButtons{
	align-items: center;
	position: fixed;
	display: flex;
}
.themeButtons button{
	background-color: #FFFFFF00;
	border: none;
}
.themeButtons img
{
	opacity: 50%;
}
.themeButtons img:hover
{
	opacity: 25%;
}

@media (max-aspect-ratio: 1)
{
	/* 
		All values are scaled width-centric,
		mostly because it's easier :)
	*/
	h3, p{
		margin: 1vw;
	}
	.mainBody{
		width: 100vw;
		padding-bottom: 3.7vw;
	}
	.title{
		width: 100vw;
		height: 25vw;
	}
	.title h1{
		font-size: 10vw;
	}
	.title h3{
		font-size: 5vw;
	}
	.heading{
		flex-direction: column;
	}
	.headerItem{
		width: 33.3vw;
		height: 33.3vw;
	}
	.headerItem img{
		width: 33.3vw;
		height: 33.3vw;
	}
	.profile{
		flex-direction: column-reverse;
	}
	.profile img{
		width: 75vw;
		height: 75vw;
		margin-top: 4vw;
		align-self: center;
	}
	.construction img{
		width: 75vw;
		height: 75vw;
		margin-top: 4vw;
		align-self: center;
	}
	section{
		width: auto;
		margin-top: 4vw;
		margin-left: 4vw;
		margin-right: 4vw;
	}
	section p{
		font-size: 4vw;
		margin-top: 5vw;
		margin-bottom: 5vw;
	}
	section li{
		font-size: 4vw;
	}
	section h1{
		font-size: 8vw;
		margin-left: 4vw;
		margin-right: 4vw;
	}
	section h2{
		font-size: 7vw;
		margin-left: 3.5vw;
		margin-left: 3vw;
		margin-top: 3vw;
	}
	.imageRow{
		flex-direction: column;
		width: auto;
		margin-left: 3vw;
		margin-right: 3vw;
	}
	.imageBox p{
		font-size: 3vw;
		margin-right: 3vw;
		margin-top: 1vw;
		margin-left: 2.5vw;
	}
	.imageBox iframe{
		/* Scaled for 16:9 */
		width: 85vw;
		height: 47.8125vw;
	}
	.galleryItem{
		margin: 1vw;
		width: 40vw;
	}
	.galleryItem img{
		width: 100%;
		border-radius: 5vw;
	}
	.itemOverlay{
		border-radius: 5vw;
	}
	.itemOverlay h3{
		font-size: 5vw;
	}
	.itemOverlay p{
		font-size:4vw;
	}
	.themeButtons{
		flex-direction: row;
		bottom: 1vw;
		right: 1vw;
	}
	.themeButtons button{
		margin: 0.5vw;
	}
	.themeButtons img{
		width: 15vw;
	}
}
@media (min-aspect-ratio: 1)
{
	h3, p{
		margin: min (10px, 1vw);
	}
	.mainBody{
		width: min(1080px, 98vw);
		padding-bottom: min(40px, 4vw);
	}
	.title{
		width: 50%;
		height: 180px;
		max-height: 16.5vw;
	}
	.title h1{
		font-size: min(70px, 6.5vw);
	}
	.title h3{
		font-size: min(40px, 4vw);
	}
	.heading{
		flex-direction: row;
		margin-bottom: min(10px, 1vw);
	}
	.headerItems{
		min-width: 50%;
		max-width: 51%;
		height: 180px;
		max-height: 16.5vw;
	}
	.headerItem{
		max-width: 35%;
		min-width: 33%;
		height: 100%;
	}
	.headerItem img{
		width: 100%;
		height: 100%;
	}
	.profile{
		flex-direction:row;
		margin-top: min(10px, 1vw);
		margin-bottom:min(10px, 1vw);
		margin-left: min(40px, 4vw);
		margin-right: min(40px, 4vw);
		width: min(1000px, 99vw);
	}
	.profile section{
		width: min(780px, 67vw);
		margin-left: 0%;
		margin-right: 0%;
		margin-top: 0%;
	}
	section{
		width: min(1000px, 90vw);
		margin-left: min(40px, 4vw);
		margin-right: min(40px, 4vw);
		margin-top: min(40px, 4vw);
	}
	.profile img{
		width: min(256px, 24vw);
		height: min(256px, 24vw);
		margin-left: min(4px, 0.4vw);
		margin-right: 0%;
		margin-top: 0%;
		align-self: auto;
	}
	.construction img{
		width: min(500px, 50vw);
		height: min(500px, 50vw);
		margin-left: auto;
		margin-right: auto;
		margin-top: 0%;
		align-self: center;
	}
	section h1{
		margin-left: min(30px, 3vw);
		margin-right: min(30px, 3vw);
		font-size: 2rem;
	}
	section h2{
		margin-left: min(30px, 3vw);
		margin-left: min(20px, 2vw);
		margin-top: min(20px, 2vw);
	}
	section p{
		font-size: 1.17rem;
		margin-top: min(5px, 5vw);
		margin-bottom: min(5px, 5vw);
		margin-left: min(20px, 2vw);
		margin-right: min(20px, 2vw);
	}
	section li{
		font-size: 1.17rem;
		margin-left: min(20px, 2vw);
		margin-right: min(20px, 2vw);
	}
	.imageRow{
		width: auto;
		margin-left: min(20px, 2vw);
		margin-right: min(20px, 2vw);
	}
	.imageRow p{
		margin-right: min(20px, 2vw);
	}
	.imageBox p{
		margin-top: min(5px, 0.5vw);
		margin-left: min(15px, 1.5vw);
	}
	.imageRow{
		flex-direction: row;
	}
	.imageBox p{
		font-size: 0.98rem;
	}
	.imageBox iframe{
		width: min(960px, 86vw);
		height: min(540px, 48.375vw);
	}
	.galleryItem{
		margin: min(10px, 1vw);
		width: min(256px, 25.6vw);    
	}
	.galleryItem img{
		width: min(256px, 25.6vw);
		border-radius: min(50px, 5vw);
	}
	.itemOverlay{
		border-radius: min(50px, 5vw);
	}
	.itemOverlay h3{
		font-size: min(30px, 3vw);
	}
	.itemOverlay p{
		font-size: min(22px, 2.2vw);
	}
	.themeButtons{
		flex-direction: row;
		bottom: min(10px, 1vw);
		right: min(10px, 1vw);
		flex-direction: column;
	}
	.themeButtons button{
		margin: min(5px, 0.5vw);
	}
	.themeButtons img{
		width: min(64px, 6.5vw);
	}
}