h1 {
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
}

p {
    color: #6e6e6e;              
    font-family: Arial, sans-serif; 
    font-size: 16px;          
    text-align: center;      
  }


 li {
    color: #ffffff;              
    font-size: 16px;          
    font-family: "Bebas Neue", sans-serif;   
    display: grid;
        
  }


  h2,h4,h3 {
    color: #ffffff;              
    font-size: 16px;   
    display: grid;
    font-family:monospace;
    text-align: center;
   }


  



body {
    background-color: #21242e;
   
}


.menu {
  list-style: none;       
  display: grid;
  grid-template-columns: repeat(5, auto);     
  justify-content: end;   
  gap: 20px;              
  padding: 1rem;            
  margin: 0;
  
}

.menu li a {
  text-decoration: none;  
  color: rgb(255, 208, 0);           
  font-weight: bold;
  padding-bottom: 1rem;
  margin-top: -2rem;      
}

.menuu{
  background-color: #676a8b;
  
    margin-top: 1rem;
    left: 0;
    width: 100%;        
    z-index: 1000;       
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-height: 4rem;
}


.logo{
  margin-top: 2rem;
  padding-top: 1rem;
  margin-left: 2rem;
}
.avatar {
    display: grid;
    align-content: center; 
  }
  
  .avatar img {
    height: auto;
  }


  section {
    display: grid;
    max-width: 800px;           
      place-items: center; 
  margin: 0 auto;
    padding: 3rem;
    border-bottom: 1px solid var(--color-dorado);
    background-color: rgba(60, 128, 184, 0.479);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(48, 158, 248, 0.616);
    align-content: center;
    

 

 
  }



section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

section li {
  display:grid;
grid-template-columns: 1fr;
  justify-items: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 1rem;
}

section img {
  max-width: 100%;
  height: auto;
  display: block;
}
  
  section:first-of-type div {
    width: 300px;
    height: 300px;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 8px;
    border: 3px solid var(--color-dorado);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  section:first-of-type div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

a {
    color: inherit;            
    text-decoration: none;    
  }

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
  
}


.grid-layout2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2rem;
  align-content: center;
  
}