@charset "utf-8";


/* CSS Document */
body .main{
	font-family: 'Cerebri Sans Book';	
	padding-top: 50%;

}

body {
	transition: opacity 0.25s;
	width: 100%;
}

html{
	font-family: 'Cerebri Sans Book';
	font-size: 15pt;
	margin: 0 40px;
    overflow-y: overflow;
	scroll-behavior: smooth;
	min-width: 320px;
}



aside {
	float: right;
	padding: 0;
	position: relative;
	width: 50%
}


article {
	display: block;
	position: relative;
	max-width: 900px;
	left: 50%;
	transform: translateX(-50%);
}

article h1 {
	font-family: 'Cerebri Sans Bold';
	font-size: 45pt;
}

article article h2 {
	font-family: 'Cerebri Sans SemiBold';

	font-size: 25pt;
	
}

p.centerL {
	font-family: 'Cerebri Sans Book';
	font-size: 12pt;
	opacity: 0.5;
	text-align: center;
	width:100%;
	
}
figure{
	width: 100%;
	margin: 0;
	padding: 0;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6));
}

figure figcaption{
	margin: 16px 0 8px 0;
	width: 100%;
	font-size: 12pt;
	opacity: 0.65;
	text-align: center;
}

figure img {
    animation-name: closeImg;
    animation-duration: 1.25s;

	border-radius: 20px;
	width: 65%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}
/* 
.imgToggle {
    animation-name: openImg;
    animation-duration: 1.25s;

	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}



@keyframes openImg {
	0% {
		width: 65%;
	}
	10% {
		width: 62.5%;
	}
	30% {
		width: 102%;
	}
	60% {
		width: 99%;
	}
	100% {
		width: 100%;
	}
}

@keyframes closeImg {
	0% {
		width: 100%;
	}
	10% {
		width: 105%;
	}
	30% {
		width: 62.5%;
	}
	60% {
		width: 66%;
	}
	100% {
		width: 65%;
	}
} */

header, section, footer,
aside, nav, article, figure {
  display: block;
}

@media (max-width : 900px ){
	figure img {
		width: 75%;
	}
}


@media (max-width : 720px ){
	figure img {
		width: 80%;
	}
	html{
		font-size: 12pt;
		margin: 0 20px;
	}
	article h1 {
		font-size: 25pt;
	}
	article article h2 {
		font-size: 20pt;
	}
	figure figcaption{
		font-size: 10pt;
	}
	p.centerL {
		font-size: 10pt;
	}
	
}


@media (max-width : 500px ){
	figure img {
		width: 95%;
	}
}


@media (prefers-color-scheme: dark) {
	html{
		background-color: #000C1F;
		color: white;
	}
	a.mail {
		color: white;
	}
}

@media (prefers-color-scheme: light) {
	html{
		background-color: #f3f8ff;
		color: black;
	}
	a.mail {
		color: black;
	}
}