body{
 background-color: black;
}
.card{
 background-color: floralwhite;
 border-radius: 8px;
 overflow: hidden;
 margin-top: 169px;
 margin-top: 20px;
}

.cover{
 height: 200px;
 background-color: #ececec;
 margin: 20px 20px 0px 20px;
 border-radius: 5px;
}

.square{
 width: 80px;
 height: 80px;
 border-radius: 5px;
 margin-bottom: 20px;
 background-color: #ececec;
}

.info{
 padding: 20px;
}

.line{
 height: 30px;
 border-radius: 2px;
 margin-bottom: 20px;
 background-color: #ececec;
}

.cover, .line, .square{
 background-image: linear-gradient(120deg, #ececec 50%, #fafafa 60%, #fafafa 61%, #ececec 70%);
 background-size: 200px;
 background-position: 100% 0;
 animation: naim 2s linear infinite;
}

@keyframes naim{
 100%{
  background-position: -100% 0;
 }
}


.container{
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 5px;
}

.container a{
 position: relative;
 display: inline-block;
 width: 100%;
 height: 80px;
 margin-top: 80px;
 background: white;
 margin: 30px;
}

.container a:before,
.container a:after
{
 content: '';
 background: red;
 position: absolute;
 inset: 0;
 transition: 0.5s;
}

.container a span{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: inline-block;
 background: #158853;
 z-index: 10;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 letter-spacing: 2px;
 text-transform: ;
 color: white;
 text-align: center;
 border: 1px solid #040a29;
 overflow: hidden;
 color: #fff;
 border-radius: 5px;
}

.container a:hover:before
{
 inset: -3px;
}
.container a:hover:after
{
 inset: -3px;
 filter: blur(10px);
}

.container a:nth-child(1):before,
.container a:nth-child(1):after
{
 background: linear-gradient(45deg,#ff075b,#0e1538,#0e1538,#1aff22);
}

.container a span::before
{
 content: '';
 top: 0;
 left: -50%;
 position: absolute;
 width: 100%;
 height: 100%;
 transform: skew(25deg);
 background: rgba(255,255,1,0.075);
}