*{
	box-sizing: border-box;
	margin: 0;
	padding:0;
	
}

body
{
	display: grid;
	place-items:center;
	height: 100vh;
	background-image: url('https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
	font-family: 'Courier new', Courier ,monospace;
	background-repeat: no-repeat;
	 background-size:cover;
	 background-position:center;

	 

}

.card{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 247px;
	height:347px;
	background:#171614;
	border-radius: .8em;
	z-index:1;
	color: #858585;
	overflow: hidden;
	
	text-align: center;
	cursor:pointer;
	transition: .5s ease;
}

.card:hover{
	color:#fff
}

.container{
	display:grid;
	place-items: center;
	position:relative;
	width:255px;
	height:355px;
	border-radius: 1em;
	background: linear-gradient(50deg,#2a5a3b,#1e4886);
	overflow: hidden;
	
}

.container::before{
	content:"";
	position:absolute;
	width:450px;
	height:35px;
	top:0;
	right:35px;
	transition:1.9s;
	background: linear-gradient(50deg,#00ff59,#02b3ff);
	transform:rotate(-45deg) translate(0,-100px);
}


.container:hover::before{
	animation: effect 1.9s;
}

@keyframes effect{
	50%{
		transform:rotate(-45deg) translate(0,420px);
	}
}