You are on page 1of 2

:root {

--color-primario: #6D9886;
--color-secundario: #F2E7D5;
--color-acento: #2E86AB;
--color-fondo: #F7F7F7;
--color-texto: #393E46;
--color-encabezado: #123A55;
--Tamaño-fuente1: 39px;
--color-resaltado:#39bda7;
}
main{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
font-family: 'Quicksand', sans-serif;
}

a{
color: var(--color-secundario);}
a:hover{
color: var(--color-resaltado);}

.main-containter{
width: 1920px;
}
footer{
background-color: var(--color-primario);
padding-top: 20px;
color: var(--color-fondo);
padding-bottom: 20px;
}
footer .contact-container{
display: flex;
justify-content: space-between;
gap: 20px;
margin:60px;
}
footer .contact-container .location{
text-align: left;
}
footer .contact-container .about-us{
text-align: right;
}
footer .contact-container .about-us a{
text-decoration: none;
color: var(--color-fondo);
}
footer .contact-container .about-us a:hover{
color: var(--color-resaltado);
}
footer .contact-container .social {
text-align: center;
}
.social a{
padding: .6rem;
border-radius: .2rem;
color: var(--color-secundario);
}
.social a:hover path{
fill: var(--color-resaltado);
}
.titulos-footer{
font-weight: 300;
display: inline-block;
padding-bottom: .6rem;
margin: 1rem 0;
position: relative;
}
.titulos-footer::before{
content:"";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 0%;
border-bottom: .2rem solid var(--color-fondo);
}

@media(max-width:1450px){

}
@media(max-width:1280px){
footer .contact-container{
width: 90%;
margin: 0 auto;
text-align: center;
}
footer .contact-container .titulos-footer{
text-align: center !important;
}
footer .contact-container .about-us{
text-align: center;
}
footer .contact-container .location{
text-align: center;
}
}
@media(max-width:900px){

}
@media(max-width:800px){
footer .contact-container{
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
}
@media(max-width:540px){

You might also like