#group {
	justify-content: center;
	align-items: center;
	display: grid;
	grid-template-columns: auto 60%;
	grid-gap: 1.5em;
	padding: 5em;
	margin-top:0%;
}
#group #picture {
		max-width: 350px;
		aspect-ratio: 1/1;

		border-radius: 200px;
		align-self: center;
	}
@media only screen 
	and (max-width : 980px) {
		#group {
			grid-template-rows: auto auto;
			grid-template-columns: auto;
			grid-gap: 1em;
		}
	}
@media only screen 
	and (max-width : 500px) {
		#group {
			position: absolute;
			margin-right: 0px;
			margin-left: -15px;
			padding: 2em;

			margin-top: 0;
			top: -31px;
			transform: translateY(0);
			padding: 0;
		}
		#group #picture {
			max-width: 100%;
			max-height: 190%;
			align-self: center;

			transform: translateX(-50%);
			margin-left: 50%;

			padding: 0;
			margin-top: -7.9%;

			border-radius: 0px;
		}
		#group #text {
			text-align: justify;
			padding: 2em;
			padding-top: 1em;
		}
		#group h1 {
			text-align: center;
		}
	}
#bg_img {
	width:  100vw;
	height: 100vh;
	background: url('/assets/images/clouds.webp');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
@media only screen 
	and (max-width : 500px) {
		#bg_img {
			filter: blur(7px);
		}
	}
a {
	/*font-family: monospace;*/
	text-decoration: none;
	color: var(--black);
}
a:not(.site)::before { content: "·" }
a:not(.site)::after  { content: "" }
a:hover {
		color: var(--active);
	}
a {
	a.dark {
		font-family: Iosevka, monospace;
		text-decoration: none;
		color: white;
	}
	
		a.dark.dark:hover {
			color: aquamarine;
		}
}
h1 {
    margin-top: -5px;
}
h3 {
    margin-top: -5px;
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	src: url("/assets/fonts/AtkinsonHyperlegible-Regular.ttf");
}
@font-face {
	font-family: 'Atkinson Hyperlegible';
	src: url("/assets/fonts/AtkinsonHyperlegible-Bold.ttf");
	font-weight: bold;
}
@font-face {
	font-family: Iosevka;
	src: url("/assets/fonts/iosevka-term-ss07-regular.ttf");
}
/*@font-face {*/
/*	font-family: iosevka;*/
/*	src: url("/assets/fonts/iosevka-term-ss07-bold.ttf");*/
/*	font-weight: bold;*/
/*}*/
body {
	font-family: 'Atkinson Hyperlegible', sans-serif;
}
:not(h1,h2,h3,h4,h5,h6,span) {
	font-size: 15pt;
}
@media only screen 
	and (max-width : 500px) {
:not(h1,h2,h3,h4,h5,h6,span) {
		font-size: 14pt;
}
	}
a,code,pre {
	font-family: Iosevka, Monospace;
	font-size: 14pt;
}
body {
	--white:  #f2f2f3;
	--black:  #3b3b5d;
	--active: #4d4de0;

	--ssz: 5px;
	--shadow: var(--ssz) var(--ssz) var(--ssz) 0 #22222230,
		calc(0px - var(--ssz)) calc(0px - var(--ssz)) var(--ssz) 0 #ffffffa0;
	
	color: var(--black);
}
.mono-span {
	font-family: Iosevka, monospace;
}
body {
	margin: 0;
}
.center {
	text-align: center;
}