:root{
    --color-primary:#28d2c7;
    --color-secondary:#5850ec;
    --color-gray-1:#f5f6fa;
    --color-gray-2:#ebebf0;
    --color-gray-3:#c7c8c9;
    --color-gray-4:#cacfd2;
    --color-gray-5:#f8f9f9;
    --color-gray-6:#868e96;
    --color-black-1:#2c3e50;
    --color-black-2:#333333;
    --color-white:#fdfefe;
    --color-green:#2ecc71;
    --transition:.3s all;
    --linear-gradient:linear-gradient(100deg, rgba(40,210,199,1) 53%, rgba(88,80,236,1) 97%);
    --box-shadow-1:0px 1px 2px rgba(0,0,0,0.1);
    --box-shadow-2:0px 7px 11px -3px rgba(156,156,161,0.5);
    --box-shadow-3:1px -4px 10px -7px rgba(0,0,0,0.3);
    --box-shadow-4:'';
    --color-line:#eee;
}

header{
    top:0;
    left:0;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    background: rgb(40,210,199);
    background: linear-gradient(100deg, rgba(40,210,199,1) 53%, rgba(88,80,236,1) 97%);
    z-index: 1000;
}
.container-category .list{
    list-style:none;
    padding:0;
}
.container-category .list a{
    text-decoration:none;
    color:#212529;
    padding:0.5rem;
    display:block;
    transition:0.3s all;
}
.container-category .list a:hover{
    color:var(--color-secondary);
}
/**/
.box{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:0.5rem;
    margin-bottom:1rem; 
}
.box-component{
    width:11rem;
    height:100%;
    margin:0.2rem;
    padding:0.2rem;
    transition:0.3s all;
    background-color:#ffffff;
    box-shadow:var(--box-shadow-1);
    border-radius:0rem 0rem 0.5rem 0.5rem;
}
.box-component:hover {
    box-shadow:var(--box-shadow-2);
}
.box-component .img>a>img{
    width:100%;
    height:9rem;
    padding:0.2rem;
}
.box-component .details{
    text-align:center;
    font-size:0.7rem;
}
.box-component .details span{
    text-align:center;
    color:var(--color-green);
    font-weight:400;
}
.box-component .details i{
    color:#34495e;
}
.box-component .title a{
    color:#2c3e50;
    text-align:center;
    font-weight:440;
    font-size:1.1rem;
    display:block;
}
.box-component .title a:hover{
    color:#333;
}
.box-component .subdetails{
    padding:0.5rem 0rem;
    font-size:0.9rem;
    color:var(--color-black-1);
    text-align:right;
}
.box-component .check{
    color:var(--color-green);
    font-size:1rem;
    background:var(--color-gray-1);
    border-radius:50%;
    margin:0.2rem;
    transition:0.6s all;
}
.box-component:hover .subdetails .check{
    background:var(--color-green);
    color:#fff;
}
/**/
.container-card .details{
    padding:0rem 0.5rem;
}
.container-card .details .title{
    text-decoration:none;
    color:var(--bs-gray-dark)!important;
    font-weight:600;
    font-size: 1.1rem;
    line-height:1.8rem;
    cursor:pointer;
}
.container-card .details .title:hover{
    color:#333;
}
.container-card .details .autor{
    font-size: 0.9rem;
    line-height: 1.3rem;
}
.container-card .details .subdetails{
    font-size: 0.8rem;
    line-height: 1.3rem;
}
.container-card .details .subdetails .check{
    color:var(--color-green);
}
.container-card:hover{
    background:#eee;
}

/*****************************************************************/
/*                          Media screen                         */
/*****************************************************************/
@media screen and (min-width:360px){

}
@media screen and (min-width:576px){

}
@media screen and (min-width:768px){
    /**/
    .box-component{
        width:12.5rem;
        margin:0.5rem;
        padding:0.5rem;
    }
    .box-component .img>a>img{
        height:10rem;
    }
    .box-component .details{
        font-size:0.8rem;
    }
    .box-component .title{        
        font-weight:440;
        font-size:1rem;
    }
    /**/
}
@media screen and (min-width:992px){
    /**/
    .box{
        margin-top:1rem;
        margin-bottom:1rem;
    }
    .box-component{
        width:14rem;
        margin:0.5rem;
        padding:0.5rem;
    }
    .box-component .img>a>img{
        width:12.9rem;
        height:12.9rem;
    }
    .box-component .details{
        font-size:0.9rem;
    }
    .box-component .title{        
        font-weight:440;
        font-size:1.3rem;
    }
    /**/
}
@media screen and (min-width:1200px){

}

/*
    Designed in // Paralel - Perú
*/