*{
	margin: 5px;
	padding: 5px;

    scrollbar-width: auto;
    scrollbar-color: purple orange;

	cursor:url('../img/cursors/red-heart-cursor.png'), auto;
}

body {
    display: grid;
    grid-template-areas:
      "head head head"
      "nav  nav  nav"
      "lef  main rig"
      "foot foot foot";

    grid-template-columns: 25% 50% 25%;

    font-size: 15pt;

	margin: auto;
	width: 90%;

	border:pink dashed;	

	background-image:url(../img/wallpaper.gif);
	color: white;

  	font-family: "Comic Neue", cursive;
  	font-style: normal;
}

a{
	margin: 0;
	padding: 0;
}

h1{
	text-align: center;
}

header {
    grid-area: head;   

  	font-family: "Bonbon", cursive;
  	font-weight: 400;
  	font-style: normal;

	display: flex;
	justify-content: center;
}
  
nav {
    grid-area: nav;
}
  
main {
    grid-area: main;
    padding: 5px;
}

aside{
  grid-area: lef;
  text-align: center;
}

#right{
  grid-area: rig;
  text-align: center;
}

#bloco{
	border: purple dotted;
	display: grid;
	justify-content: center;
	margin: auto;
	width: 100%;
}

#bloco-direita{
	border: purple dotted;
	display: grid;
	justify-content: center;
	margin: auto;
	width: 90%;
}

hr{
	margin: auto;
    width: 100%;
    height: 1px;
    border: 0px;
    border-top: 1px solid white;
}

footer {
    grid-area: foot;
    text-align: center;
}

#top{
	background-color: purple;
  	padding: 10px;
  	display: flex;
  	justify-content: space-around;
  	list-style: none;
}

#top a{
	text-decoration: none;
	color: white;
}

main p{
  text-align: justify;
}

aside p{
  text-align: center;
}

/* PARA MOBILE */

@media only screen and (max-width: 650px){
	body{
		font-size: large;
      	display: flex;
      	flex-direction: column;
  	}

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

	#bloco, #bloco-direita{
		border: none;
	}

  	main img{
    	margin: auto;
    	width: 100%;
  	}

  	iframe{
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    	width: 100%;
    	height: 300px;
    	border: none;
  	}
}