@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-around;
    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 img {
    /*Imagem*/
    clip-path: circle(45%);


}
header > h1 {
    font-family:"spiralis";
}
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; 
}


aside {
   /* Margens */
    margin: 20px 30px 20px 43px;
    /* Padding */ 
    padding-top: 10px;
    padding-bottom:10px;
    padding-left:10px;
    border: 5px dotted black;
   /* Extra */ 
    float: left;
    display: inline-block;
    width:50%;
    /* Cores */ 
    background-color: rgb(177, 39, 81);
    
}
aside>h2 {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color:white;
}

aside>img {
    float:left;
}

article {
   /* Margens */
    margin: 20px 30px 20px 43px;
    /* Padding */ 
    padding-top: 10px;
    padding-bottom:10px;
    padding-left:10px;
    border: 5px dotted black;
   /* Extra */ 
    float: left;
    display: inline-block;
    width:50%;
    /* Cores */ 
    background-color: rgb(177, 39, 81);
    
}
article>h2 {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color:white;
}

Section {
    text-align: justify;
   
    /* Margens */
    margin: 20px 43px 20px 20px;
   
    /* Padding */ 
    padding-left: 10px;
    padding-right:10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 5px dotted black;
   
    /* Extra */ 
    width:50%;
    float:left;
   /* Cores */ 
    background-color: rgb(177, 39, 81);
    
}
Section>h2 {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color:white;
}

main {
    color: black;
    display: flex;
    flex-direction:row;
    justify-content: space-evenly;
}
.container {
    display:flex;
}