@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
	font-family: 'Android';
	src: url('../fontes/idroid.otf') format('opentype');
	font-weight: normal;
}

:root {
	--color1: #f2aa49; /*  mais escura  */
	--color2: #f6b755; /*  https://paletadecores.com/cores/laranja/  */
	--color3: #f9c462;
	--color4: #fcd16e;
	--color5: #ffde7b; /*  mais clara  */
	
	--fonte-padrao: Verdana, Helvetica, sans-serif;
	--fonte-destaque: 'Bebas Neue', cursive;
	--fonte-android: 'Android', cursive;
}

* {
	margin: 1px;
	padding: 1px;
}


body{
    background-color: var(--color5);
	font-family: var(--fonte-padrao);
}

header {
	background-image: linear-gradient(to bottom, var(--color5), var(--color2));
	/* background-color: var(--color4); */
	min-height: 150px;
	text-align: center;
	padding-top: 30px;
}

header > h1 {
	color: white;
	font-family: var(--fonte-destaque);
	font-size: 3em;
	font-weight: normal;
	margin-top: 20px;
	text-shadow: 2px 2px 0px rgba(111, 34, 9, 0.307);
}

header > p {
	font-family: var(--fonte-padrao);
	font-size: 1.2em;
	color: white;
	max-width: 500px;
	padding-right: 10px;
	padding-left: 10px;
	margin: auto;
	padding-bottom: 30px;
}

nav {
	background-color: var(--color1);
	padding: 10px;
	box-shadow: 0px 7px 9px rgba(128, 128, 128, 0.378);
}

nav > a {
	color: rgba(255, 255, 255, 0.856);
	padding: 10px;
	border-radius: 5px;
	text-decoration: 10px;
	transition-duration: 0.3s;
	}

nav > a:hover {
	background-color: #f9c462;
	color: var(--color5);
	font-weight: bold;
}

main {
	min-width: 300px;
	max-width: 1000px;
	margin: auto;
	margin-bottom: 30px;
	padding: 20px;
	background-color: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.607);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

main h1 {
	color: var(--color1);
	font-family: var(--fonte-android);
	font-weight: normal;
	font-size: 1.8;
}

main h2 {
	color: var(--color1);
	font-family: var(--fonte-android);
	background-image: linear-gradient(to left, var(--color3), var(--color5));
	text-indent: 5px;
	font-weight: normal;
}

main p {
	margin: 15px 0px 15px 0px;
	text-align: justify;
	line-height: 1.5em;
}

main img {
	width: 100%; /* largura das imagens */
}
main img.pequena {
	max-width: 350px;
	display: block;
	margin: auto;
}

div.video {
		background-color: var(--color1);
		margin: 0px -20px 30px -20px;
		padding: 20px;
		padding-bottom: 57%;
		position: relative;
}

div.video > iframe {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
}

aside{ 
	background-color: var(--color5);
	padding: 10px;
	border-radius: 10px;
}

aside > h3 {
	background-color: var(--color2);
	color: black;
	padding: 10px;
	margin: -10px -10px 0px -10px;
	border-radius: 10px 10px 0px 0px;
}

aside > ul {
	list-style-position: inside; /* para os bullets ficarem dentro do quadrado de fundo colorido */
	columns: 2;
	list-style-type: '\2714\00A0\00A0'; /* pra trocar de bolinha pra check-mark e dar espaço pro texto  --> ver o  Emojipedia.org  pra símbolos q pode usar e seus códigos */
}

footer {
	background-color: var(--cor1);
	color: white;
	text-align: center;
	font-size: 0.9em;
	padding: 5px;
}

footer > a {
	color: white;
	font-weight: bolder;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
	color: var(--color1);
}