@import url(https://fonts.bunny.net/css?family=alegreya-sans:100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i);
@import url(https://fonts.bunny.net/css?family=alegreya:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

:root {
	color-scheme: light dark;
	--aroum: #3DA542;
	--arodois: #A8D379;
	--aroquatro: #A9A9A9;
}

@media (prefers-color-scheme: light) {
	:root {
		--texto: #000;
		--fundo: #eeeb;
		--link: #27682A;
		--linkvisto: #07480A;
		--destaque: #365219;
		--ttl: #365219;
		--frac: #333;
		--sombra: #C8F399;
		--galeria: #fefefe;
	}	
	body {
		background-color: #fafafa;
		background-image: url("fundoclaro.png");
	}
}


@media (prefers-color-scheme: dark) {
	:root {
		--texto: #fff;
		--fundo: #000b;
		--destaque: #A8D379;
		--ttl: #000;
		--link:	#3DA542;
		--linkvisto: #5DC562;
		--frac: #a9a9a9;
		--sombra: #006704;
		--galeria: #222;
	}
	body {
		background-color: #070707;
		background-image: url("fundoescuro.png");
	}
}

body {
	background-attachment: fixed;
	background-position-x: center;
	font-family: 'Alegreya', serif;
	color: var(--texto);
	font-size: 1.5rem;
}

main, footer {
	margin: 1%;
	padding: 1%;
}

#flex {
    display: flex;
    align-items: center;
	flex-direction: column;
}

#corpo {
	max-width: 1900px;
	width: 100%;
	margin-top: 0.5%;
	margin-bottom: 1%;
}

h1 {
	color: var(--ttl);
	font-size: 12rem;
	text-shadow: 0px 0px 20px #fff, 8px 16px 40px #A8D379, 32px -40px 40px #3DA542, 40px 48px 40px #A9A9A9, 16px -24px 40px #000, -48px 24px 40px #3DA542, 40px 32px 40px #A8D379, -32px -32px 40px #fff, 24px 40px 40px #A9A9A9, -24px 48px 40px #000, -16px -8px 40px #3DA542, -8px 8px 40px #A8D379, 48px -16px 40px #A9A9A9;
	text-align: center;
	margin-top: 1%;
	margin-bottom: 2%;
	font-family: 'Alegreya Sans', sans-serif;
}

h2 {
	font-size: 6rem;
	color: var(--destaque);
	text-shadow: 0px 0px 5px var(--shadow);
	font-family: 'Alegreya Sans', sans-serif;
	text-align: left;
}

h3 {
	font-size: 3rem;
	color: var(--destaque);
	font-family: 'Alegreya Sans', sans-serif;
}

h4 {
  font-size: 2.5rem;
  font-family: 'Alegreya Sans', sans-serif;
}

.menu {
	text-align: center;
}

.linkmenu {
	width: 100%;
	max-width: 450px;
	margin: 2rem;
	padding: 2rem;
	background-color: var(--sombra);
	text-align: center;
	display: inline-block;
	transition: transform 0.5s ease-out;
	color: var(--texto);
}

.linkmenu:hover, .linkmenu:focus-within {
	transform: rotateZ(-15deg);
}

.links {
	font-size: 2rem;
	display: inline-block;
}

article a, p a {
	color: var(--link);
}

footer a {
	font-size: 3rem;
	color: var(--link);
	text-align: center;
}

a:hover, a:focus {
	text-decoration: none;
	color: var(--frac);
}

a:visited {
	color: var(--linkvisto);
}

article {
	background-color: var(--fundo);
	padding: 0.1rem 1.5rem;
}

li {
	margin-bottom: 0.5rem;	
    margin-left: 1.5rem;
}

.att {
    border: 4px dotted var(--destaque);
    margin: 1rem;
    padding: 1rem;
}

.gal {
    margin: 0.75em;
    max-width: 400px;
    vertical-align: top;
    display: inline-block;
    background-color: var(--galeria);
}

.gal img {
    width: 100%;
    height: auto;
}

.desc {
    padding: 0.75em;
    padding-top: 0.5em;
}

.banner {
	max-width: 100%;
}

.collapsible {
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	color: var(--texto);
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 2rem;
	background-color: var(--fundo);
	padding: 1rem;
}

.active, .collapsible:hover, .collapsible:focus {
	background-color: var(--sombra);
}

.content {
	margin-top: 1rem;
	color: var(--texto);
	transition: transform 0.5s ease;
	overflow: hidden;
	max-height: 0;
	background-color: var(--fundo);
}

.collapsible:after {
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 2rem;
	color: var(--texto);
	float: right;
	margin-left: 1rem;
}

.active:after {
	content: "\2796"; /* Unicode character for "minus" sign (-) */
}

@media screen and (max-width: 1300px) {
	h1 {
		font-size: 8rem;
	}
	h2 {
		font-size: 5rem;
	}
}

@media screen and (max-width: 980px) {
   .gal {
		max-width: 100%;
   }
}

@media screen and (max-width: 850px) {
   .linkmenu {
		width: 90%;
   }
   h1 {
	   font-size: 5.5rem;
   }
   h2 {
	   font-size: 4rem;
   }
}

@media screen and (max-width: 585px) {
   .linkmenu {
		width: 80%;
		padding: 1rem;
   }
    h1 {
		font-size: 3rem;
		text-shadow: 0px 0px 10px #fff, 4px 8px 20px #A8D379, 16px -20px 20px #3DA542, 20px 24px 20px #A9A9A9, 8px -12px 20px #3DA542, -24px 12px 20px #A8D379, 20px 16px 20px #000, -16px -16px 20px #A9A9A9, 12px 20px 20px #fff, -12px 24px 20px #A8D379, -8px -4px 20px #3DA542, -4px 4px 20px #fff, 24px -8px 20px #000;
	}
    h2 {
		font-size: 2rem;
   }
    h3, .collapsible, .collapsible:after {
		font-size: 1.5rem;
   }
	body {
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 330px) {
    .linkmenu {
		width: 95%;
    }
    h1 {
		font-size: 2rem;
    }
    h2, footer a {
		font-size: 1.7rem;
    }
    h3, .collapsible, .collapsible:after {
		font-size: 1.4rem;
    }
}