@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');

*{
    font-family: Roboto, sans-serif;
}

#botonera{    
    background-color: rgb(13, 61, 61, 0.5);
    
}
#botonera img{
    width: 150px;   
}

#botonera ul li a{
    color: white;
    font-size: 1.2em;
}

#botonera ul li a:hover{
    color: rgb(210, 105, 30);
}

main{
    background-color:rgb(13, 61, 61, 0.5);
}

.titulo{
    color:rgb(210, 105, 30);
    font-size: 4em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin-top: 0.5em;
    text-align: center;
    text-transform: uppercase;
    background-color: white;
}

.titulo a:hover{
    text-decoration: underline;
}

main article a{
    text-decoration: none;
    color:rgb(13, 61, 61, 0.5); 
}

main article a:hover{
    color: rgb(210, 105, 30);
} 

main article img{
    width: 300px;
    height: 300px;
    margin: 1em auto;
    object-fit: fill;
    padding-bottom: 3em;
    filter:none;
}

main article img:hover{
    filter:sepia(100%);
    transition:filter 2s;
 }

.article a:hover{
    text-decoration: underline;
    

   
}

.footer__img{
    width: 120px;
    height: 90px;
    margin: 2em;
    object-fit:fill;
    padding-left: 2em;
   
 }





.r-A{
    grid-area: r-A;
}

.r-B{
    grid-area: r-B;
}

.r-C{
    grid-area: r-C;
}

.r-D{
    grid-area: r-D;
}

#redes{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: repeat (2, 20vh);
    grid-template-areas: 
    "r-A r-B"
    "r-C r-D"; 
}

@media (max-width: 768px){
    #redes{
        grid-template-columns: 1fr;
        grid-template-rows: repeat (4,20vh);
        grid-template-areas: 
        "r-A"
        "r-B"
        "r-C"
        "r-D";
    }   
}

p{
    
        font-size:0.6em;
        width: 100%;
        text-align:center;
        margin: 3em;
      
     }

.formulario p{
    width: 100%;
    margin: 1em;
    padding: 1.5em;
    color: rgb(210, 105, 30);
    font-size: 1em;
}

h1{
    color:rgb(210, 105, 30);
    font-size: 4em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin-top: 0.5em;
    text-align: center;
    text-transform: uppercase;
}