@font-face {
    font-family: 'Almendra';
    src: url('fontes/AlmendraDisplay-Regular.ttf') format('truetype'),
     	url('fontes/AlmendraDisplay-Regular.woff2') format('woff2'),
        url('fontes/AlmendraDisplay-Regular.woff') format('woff');
    /* font-weight: normal; */
    /* font-style: normal; */
    /* font-display: swap; */
}

@font-face {
    font-family: 'Gloock';
    src: url('fontes/Gloock-Regular.woff2') format('woff2'),
        url('fontes/Gloock-Regular.woff') format('woff'),
        url('fontes/Gloock-Regular.ttf') format('truetype');
    /* font-weight: normal; */
    /* font-style: normal; */
    /* font-display: swap; */
}

:root {
	--bg-color: #131313;
	--txt-color: LightGrey;
	/* --body-fond: 'Georgia', serif; */
	--main-font: 'Georgia', serif;
	--logo-font: 'Almendra';
	--subtitle-font: 'Gloock';
	--link-color: LightGrey;
	--link-hover: FloralWhite;
}

body {
	background-color: var(--bg-color);
	color: var(--txt-color);
	font-family: var(--main-font);
}

h1 { font-size: 5em; font-family: var(--logo-font); margin-bottom: 0px; }
h2 { font-size: 2.5em; font-family: var(--subtitle-font); margin-bottom: 0px; }
h3 { font-size: 2em; font-family: var(--subtitle-font); }
h4 { font-size: 1.5em; font-family: var(--subtitle-font); }
p { font-size: 1.25em; }
ul { font-size: 1.25em; }

a { color: var(--txt-color); }
a:hover { color: var(--link-hover); }

header {
	text-align: center;
}

menu {
	text-align: center;
	font-size: 2em;
	margin: 1em auto;
	display: block;
	list-style-type: none;
	padding: 0;
}


main {
	font-family: var(--main-font);
	max-width: 100ch;
	margin: 0px auto;
	padding: 0.5em 1em 0.5em 1em;
	line-height: 1.5;
	h2 { font-size: 2.5em; font-family: var(--logo-font); margin-bottom: 0px; }
}

footer {
	text-align: center;
	font-size: 1em;
	margin-top: 5em;
	margin-bottom: 3em;
	/* margin-bottom: 0px; */

	img {
		max-width: 30px;
	}

	ul {
		margin: auto;
		padding: 0;
		list-style-type: none;
	}

	li {
		list-style-type: none;
		display: inline-block;
		margin: 0;
		padding: 0 1em;
	}

}

footer a:hover {
	filter: brightness(300%);
}

.middle {
	text-align: center;
	/*margin-top: 5%;*/
	margin-bottom: 10%;
}

.members {
	text-align: center;
	margin: auto;	
	
	ul {
		list-style-type: none;
		padding: 0px;
		margin: auto;
		text-align: center;
		width: 100%;
	}
	
	li {
		text-align: center;
		padding: 1em;
		list-style-type: none;
		display: inline-block;
	}

	h3 {
		font-size: 1.25em;
		margin: 0 auto;
	}

	p {
		margin-top: 0;

	}

	.circle {
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50%;
		border: 1px solid var(--txt-color);
		font-size: 3.5em;
		color: var(--txt-color);
		text-align: center;
		background: #0a0a0a;
		display: inline-block;
		margin-bottom: 10px;
	}
	
	.circle:hover {
		background-color: #131313;
		transition: 0.3s;
	}
}