@font-face {
    font-family: "spiralis";
    src: url("spiralismoutline.ttf") format("truetype");
}  
body {
    background-color:black ;
    box-sizing: border-box;
    margin: 0px;
    overflow-y:scroll;

} 



header{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items:center;

  /*Background*/
   background-image: url(/images/swirl.png);
   background-color: rgb(26, 24, 58);
   background-position: center;
   background-repeat: repeat;
  
   /* Texto */
   color:white;
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
   text-align: center;
   vertical-align: middle;
   font-size: 300%;
   font-family:serif;
   font-weight:lighter;
   
 
 /*Bordas e Padding*/
   padding-top: 2px;
   padding-bottom: 5px;
   margin: 30px 30px 5px 43px;
   border: 5px dotted black;
   width: 95%;
   height: 200px;
}

header > h1 {
    font-family:"spiralis";
}


/*início do nav*/

nav {

border: 5px dotted black;
padding-bottom: 0px;
padding-top: 0px;
margin: 5px 43px 5px 43px;


justify-content: center;
font-size: large;
word-spacing: 10px;
background-color:rgb(177, 39, 81);
background-position: center;
}
nav p {
    color:white;
    font-family:serif;
    font-size:x-large;
    font-weight:400;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
ul {
display:flex;
flex-direction:row;
list-style-type:none;
padding: 10px;
gap: 10px;
margin-right: 10px;
}

li a {
    text-decoration: none;
      color:white;
    font-family:serif;
    font-size:x-large;
    font-weight:400;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      border: 1px black solid;
      border-radius: 5px;
      padding: 5px;


}

a:hover {
    color:greenyellow; 
}

/* fim do nav */


/*GRID */
.grid {
    
    /*Grid*/
    display:grid;
    grid-template-columns: 5fr 5fr 5fr 5fr;
    grid-gap: 10px;
    justify-content: center;
    
   /*Background*/

    background-color: rgb(177, 39, 81);
    margin-right:13%;
    border: 5px dotted black;
    padding: 15px 15px 15px 15px;
    margin-top:15px;
}

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


div img {
    padding: 0px 0px 0px 0px;
}

div {
    border-color: aliceblue;
}


main {
    display:flex;
    justify-content: space-around;
}

 img {
    width: 300px;
    height: 400px;
    text-align: center;
    margin:auto;
    border: 5px solid rgb(53, 3, 10);
   
}

.grid p {
    text-decoration: none;
      color:white;
    font-family:serif;
    font-size:xx-large;
    font-weight:400;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
      border-radius: 5px;
      padding: 0px 5px 5px;
      margin: 3px 0px 3px 0px;
}
.grid a {
    text-decoration: none;
    color: white;
}

a:hover {
 color:greenyellow;


}
.container {
    display:flex;
}