@import url("style.css");

/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--bluedark: rgba(10,47,92, 1);
--blue: rgba(0,56,184,1);
--black: rgba(34,34,34, 1);
--violet: rgba(75,0,130, 1);
--gray: rgba(220,220,220, 1);
    }
    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


@media(min-width:320px){
/*--------BANNER-----*/
.archive-banner-container{
width: 100%;
height: 148px;
position: relative;
background: #0A2F5C;
background: linear-gradient(90deg, rgba(10, 47, 92, 1) 0%, rgba(75, 0, 130, 1) 27%, rgba(0, 56, 184, 1) 60%, rgba(10, 47, 92, 1) 100%);
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}
.archive-banner-container h2{
color: white;
font-weight: 500;
font-size: 24px;
}
.archive-banner-box-container{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 53px 16px;
background-image: url(../img/footer-x-symbol.png);
background-position: right center;
background-size: contain;
background-repeat: no-repeat;
}
/*----ARCHIVE CONTAINER-----*/
.archive-container{
width: 100%;
height: auto;
padding: 16px;
}
.archive-card-container{
width: 100%;
height: auto;
background-color: white;
border-radius: 6px;
padding: 42px 12px 12px 12px;
position: relative;
margin-bottom: 12px;
}
.archive-card-container:hover{
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
transition: 0.2s;
cursor: pointer;
}
.archive-id{
background-color: var(--violet);
color: white;
font-weight: 500;
position: absolute;
left: 12px;
top: 12px;
padding: 9px 3px ;
border-radius: 3px;
font-size: 12px;
line-height: 0;
}
.archive-card-container a{
color: var(--blue);
font-size: 18px;
}
.archive-card-container a:hover{
text-decoration: underline;
}
.archive-card-line-deco{
width: 100%;
height: 1px;
background-color: var(--violet);
margin: 6px 0;
}
.archive-p{
font-size: 12px;
}



/*---fin de @media---*/
}
@media(min-width:480px){
/*--------BANNER-----*/
.archive-banner-container h2{
font-size: 32px;
}
/*----ARCHIVE CONTAINER-----*/
.archive-container{
padding:0 16px;
}
/*---fin de @media---*/
}
@media(min-width:540px){
/*--------BANNER-----*/
.archive-banner-box-container{
padding: 50px 36px;
}
.archive-banner-container h2{
font-size: 32px;
}
/*---fin de @media---*/
}
@media(min-width:640px){
/*----ARCHIVE CONTAINER-----*/
.archive-container{
padding: 0 24px;
}
.archive-card-container a{
font-size: 21px;
}
.archive-card-line-deco{
margin: 12px 0;
}
.archive-p{
font-size: 14px;
}
/*---fin de @media---*/
}
 @media(min-width:720px){

/*---fin de @media---*/
}
 @media(min-width:800px){


/*---fin de @media---*/
}
@media(min-width:900px){
/*--------BANNER-----*/
.archive-banner-container h2{
font-size: 42px;
}
/*----ARCHIVE CONTAINER-----*/
.archive-container{
padding: 0 32px;
}
.archive-card-container{
padding: 48px 16px 16px 16px;
margin-bottom: 18px;
}
.archive-card-container a{
font-size: 24px;
}

/*---fin de @media---*/
}
@media(min-width:1024px){

/*---fin de @media---*/
}
@media(min-width:1100px){



/*---fin de @media---*/
}
@media(min-width:1280px){
/*----ARCHIVE CONTAINER-----*/
#basic-main-archive{
background-image: url(../img/archive-background.png);
background-repeat: no-repeat;
background-position: 95%  95%;
background-size: 20%;
}
.archive-card-container{
width: 70%;
background: #FFFFFF;
background: linear-gradient(104deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/*---fin de @media---*/
}
@media(min-width:1360px){

/*---fin de @media---*/
}
@media(min-width:1440px){
/*--------BANNER-----*/
.archive-banner-container{
height:224px ;
}
.archive-banner-box-container{
padding: 90px 48px;
}
/*---fin de @media---*/
}
@media(min-width:1600px){

/*---fin de @media---*/
}
@media(min-width:1920px){


/*---fin de @media---*/
}