body {
    background-color: #6E0D10;
  }
  
 main, aside, footer, header {
border: black 2px solid;
   }

.container {
    max-width: 1200px;
    margin: 30px auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 250px minmax(0, 1fr);
    background-color: white;
    border: 15px white solid;
}

#ha {
    background-color: rgb(250, 79, 79);
}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  text-align: center;
 background-color: lightgoldenrodyellow;
}

nav {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    padding: 10px;
    text-align: center;
    border: black 10px solid;
    background-color: lightyellow;
} 
 


h3 {
   text-align: center;
   font-size: 50px;
   text-decoration: underline;
   color: black;
   margin-top: 3px;
   max-width: content;
   font-family: Com v3;
   margin-left: -3px;
   margin-top: -5px;
   margin-bottom: -2px;
}



ul {
    border: black 10px solid;
    border-top: none;
    
}
a {
    text-decoration: none;
    font-family: snas;
}

li {
    margin: 10px;
    list-style: none;
    margin-left: -25px;
    padding: 10px;
}

main {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    max-height: max-content;
    padding: 5px;
    text-align: center;
    background-color: #bfbded;
}

p {
    font-family: snas;
}

.gr {
    font-size: 20px;
}

.grr {
    font-size: 20px;
}

h1 {
    font-family: Hoe leg;
}

h2 {
    max-width: content;
    max-height: content;
    margin-top: -2px;
    text-decoration: underline;
    background-color: #bdeddb;
    border: black 2px solid;

}

.sect {
   font-size: 30px;
   margin-bottom: -30px;
}
 .ass {
     grid-row: 4 / 5 ;
     grid-column: 1 / 2;
     margin-top: 20px;
     height: max-content;
     overflow-y: hidden;
     padding: 20px;
     font-size: 20px;
 }
aside {
    grid-row: 3 / 4 ;
     grid-column: 1 / 2;
       height: max-content;
    padding: 1px;
    text-align: center;
    overflow-y: scroll;
    padding-left: 8px;
}

.cube {
    grid-row: 3 / 4 ;
    grid-column: 1 / 2;
    height: max-content;
    overflow-y: hidden;
    padding: 2px;
    background-color: lightgreen;
   
}

article {
     grid-row: 3 / 4 ;
     grid-column: 2 / 4;
    height: max-content;
    border: black 2px solid;
    padding: 5px;
    margin-left: -5px;
}

.div2 {
    background-image: url(images.png);
}

.div5 {
    background-image: url(images\ \(1\).png);
}

.div8 {
    
    background-image: url(images\ \(2\).png);
}

.div11 {
    background-image: url(images\ \(3\).png);
}
.div2, .div5, .div8, .div11 {
height: max-content;
}

footer {
     grid-row: 4 / 5;
    grid-column: 1 / 3; 
    text-align: center;  
    font-size: 40px;
    padding: 20px;
    margin: 40px;
    margin-top: -20px;
}

@font-face {
    font-family: "Los Piojos";
    src: url(Los_Piojos.ttf); 
}

@font-face {
    font-family: "Hoe Leg";
    src: url(Heroes\ Legend.ttf);
}

@font-face {
    src: url(Black\ Spirit.ttf);
    font-family: "Bl sp";
}

@font-face {
font-family: "Com v3";
    src: url(Comicv3.ttf);
}

@font-face {
font-family: "snas";
    src: url(ComicNeueSansID.ttf);
}

.button {
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  max-width: max-content;
}

.button:hover {
  background-color: lemonchiffon;
  color: black;
}

.box {
    display: grid;
    grid-template-columns: repeat(3, 4fr);
    padding: 10px;
    row-gap: 9px;
    column-gap: 6px;
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: -6px;
    height: max-content;

}
  


.box div {
    background-color: lemonchiffon;
     color: black;
     
     text-align: center;
     border: black 2px solid;
}

/* */

audio {
position: relative;
align-self: center;
width: 230px;
height: 52px;
background-color: crimson;
margin-bottom: -3px;

}

.song {
    border: crimson 6px solid;
   font-size: 35px;
    margin-top: -1px;
    margin-bottom: -1px;
    
}

.song, h4, h2 {
    font-family: Bl sp;
}

h4, h2 {
    margin-bottom: -5px;
    font-size: 55px;
    font-width: 100px;
    
}

h4 {
    margin-top: -5px;
}