html{
    font-family:Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    margin: 0rem;
}

nav{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

h1{
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.85rem;
}

h2{

padding: 0 1rem;
font-size: 1.2rem;

}

section>h2{

    padding: 1rem 1rem 0;
}

picture>img{
    
    padding-top: 0.4rem;
    margin-top: 0.6rem;
}

p{
    
margin: 0 1rem; 
padding: 0 0 1rem 0;
font-size: 0.95rem;
    
}

article>p{

 color:white;
}

#container {

    width: 95%; /* Ancho del 95% para móviles y pantallas pequeñas */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto; /* Centrado horizontalmente [1] */

}

a{
    color: grey;
    text-decoration: none;
    font-size: 0.8rem;
}
/*links*/
a:link,a:visited{

    color: black;

} 

a:hover,a:active{

    color: rgb(157, 0, 255);

}

/*flexbox*/
header{
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 1rem;
    clear: both;
}

main>div{

    display: flex;
    flex-direction: column;
    column-gap: 2rem;
    margin-top: 1rem;
    clear: both;
}

/* background color*/
#article section{
    background-color: rgb(205, 205, 205);

}

div>article{

    background-color: rgb(144, 144, 144);
    margin-top: 0.7rem;

}

/*estructura*/
#article img{

    max-width: 100%;
}

.rodear{

    float: left;
    margin: 0 1rem 0;
    
}

footer{

 padding: 1rem 0 0 0;

}

/* Punto de Ruptura (Breakpoint) */
/* Utilizamos una media query con 'min-width' para resoluciones MAYORES o IGUALES a 850px.
   Esta estructura aprovecha la cascada del CSS [2]. */

@media screen and (min-width: 850px) {
   
    #container{
        
        width: 80%; /* Ancho del 80% para escritorio o pantallas grandes (ej: 1280x800, 1366x768, 1920x1080) */
    }
    
    nav{

    display: flex;
    flex-direction: row;

    }

    main>div{

    display: flex;
    flex-direction: row;
    align-content: stretch;
    column-gap: 0.5rem;
    margin-top: 1rem;
    clear: both;
    }

    div>article{

        margin-top: 0;
        
    }

    a{
    padding: 0.3rem; 
    margin: 0.6rem 0.6rem 0.6rem 0;
    font-size: 0.9rem;
    }
}