/* RESET */
html{
  margin: 0;
  padding: 0;

  font-family: ComicShanns;

  scrollbar-width: auto;
  scrollbar-color: pink transparent;

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

@font-face {
  font-family: Bonbon; 
  src: url(../../fonts/Bonbon-Regular.ttf);
}

@font-face {
  font-family: ComicShanns; 
  src: url(../../fonts/ComicShannsMonoNerdFont-Regular.otf);
}

/* GRID-AREA: CONTAINER  */

header 	{
	grid-area: header; 
	border: 3px dashed violet; 
	border-radius: 0 20px 0 0;
	padding: 10px;
	
	background-color: #edc4f866;

	/*Itens alinhados ao centro  */
	display: flex;
	justify-content: center;

}

aside {
	grid-area: aside; 
	border-right: 3px dashed violet; 
	padding: 10px;
	background-color: #edc4f866;
}

main {
	grid-area: main;
	border-left: 3px dashed violet; 
	border-right: 3px dashed violet; 
	padding: 10px;
	background-color: #edc4f866;
}

nav {
	grid-area: nav; 
	border-left: 3px dashed violet; 
	padding: 10px;
/*	background-color: rgba(188, 55, 237, 0.2);*/
  background-color: #edc4f866;
}

footer 	{
	grid-area: footer; 
	border: 3px dashed violet;
	border-radius: 0 0 0 20px;
	padding: 10px;
	background-color: #edc4f866;
}

/* CONTAINER  */

.container{

	display: grid;

	grid-template-areas:
	'header header'
	'nav 	main'
	'footer footer';

	grid-template-columns: 20% auto;

	margin: auto;
	width: 70%;
	padding: 5px;
}


/* TAGS PRINCIPAIS */

body{
	background-image: url(../img/wallpaper/flower.png);
	animation: scroll 50s linear infinite;  
  
}
@keyframes scroll {
	0% {
    	background-position: 0 0;
		filter: hue-rotate(0deg);
  	}
  	100% {
    	background-position: 100% 100%;  	
		filter: hue-rotate(360deg);
	}
}
h1{
	text-align: center;
	font-size: 26pt;
}
h3{
	text-align: center;
	font-size: 15pt;
	
}
p{ text-align: justify;}

/* Título da página  */

#titulo{
  	font-family: Bonbon;
  	font-weight: 400;
  	font-style: normal;
}

/* CATEGORIAS E MENUS  */

#categoria{
	display: flex;
	border: 2px dotted purple;
	justify-content: center;
	padding: 3px;
}

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

li{ margin: 0; }

a{
	color: blue;	
}


#player{
  position: fixed;
  top: 15px;
  right: 15px;
}

#player button{
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: 1s;
}

#player button:hover{
  transition: 1s;
  transform: rotate(360deg);
}