:root{
    --color-primary: #156bd4;
    --color-vibrant:rgba(21,107,212,0.5);
    --color-gray-0: #fff;
    --color-gray-50: #edecec;
    --color-gray-100: #e6e5e5;
    --color-gray-200: #c0c0c0;
    --color-gray-300: #a1a1a1;
    --color-gray-400: #919191;
    --color-gray-500: #7b7b7b;
    --color-gray-600: #545454;
    --color-gray-700: #313131;
    --color-gray-800: #1f1f1f;
    --color-gray-900: #0e0e0e;

    --container-w-lg:74%;
    --container-w-sm:94%;
    
}

.dark-therm-variables{
    --color-gray-0: #0e0d14;
    --color-gray-50: #211f2e;
    --color-gray-100: #252233;
    --color-gray-200: #545454;
    --color-gray-300: #7b7b7b;
    --color-gray-400: #919191; 
    --color-gray-500:  #a1a1a1;
    --color-gray-600:  #c0c0c0;
    --color-gray-700: #e6e5e5;
    --color-gray-800:#fafafa;
    --color-gray-900: #fff;


}


.card{
    margin: 0 auto;
    padding: 2em;
    width: 200px;
    height: 100px;
    background: var(--color-gray-500);
    text-align: center;
    border-radius: 10px;
    position: relative;
    color: var(--color-gray-0);
    text-align: center;



}

.skills-rap{
    display: grid;
   
    gap: 1rem;
    width:auto;
    height: auto;
    margin-right: 1rem;
}

@property --angle{
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.card:HOVER::after, .card:HOVER::before{
   content: ""; 
   position: absolute;
   height: 100%;
   width: 100%;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   background-image: conic-gradient(from var(--angle),transparent 70%,blue);
   z-index: -1;
   border-radius:10px;
   padding: 3px;
   animation: 3s spin linear infinite ;



}

@keyframes spin {
    from{
        --angle: 0deg;
    }
    to{
        --angle:360deg;
    }
    
}

.card::before{
    filter: blur(0.5rem);
    opacity: 0.5;

}