@import url("./public.css");
@import url("./component.css");

header > div > span{
	letter-spacing: clamp(5px,3vw,20px);
}
section > div > div .card{
	height: 250px;
	overflow: hidden;
    border-radius: 10px;
	position: relative;
	border-style: none;
	background-color: var(--primary-color);
	/* background-size: 100% 100%;
	background-position: center; */
	box-shadow: 0px 0px 0px 4px #ffffff4f;
	cursor: pointer;
}
section > div > div .card img{
	object-fit: 100% 100%;
	object-position: center;
	-o-object-position: center;
}
/* section > div > div .card-1{
	background-image: url("../img/fylo\ website.jpg");
}
section > div > div .card-2{
	background-image: url("../img/food\ website.jpg");
}
section > div > div .card-3{
	background-image: url("../img/digitaleducationwebsite.jpg");
} */
section > div > div .card .overlay-box{
	position: absolute;
	inset: 0px;
}
section > div > div .card .overlay-box div:first-child{
	position: relative;
	width: 100%;
	height: 100%;
}
section > div > div .card .overlay-box div:first-child:hover .overlay{
	width : 100%;
	height : 100%;
	background-position: 0px;
}
section > div > div .card .overlay-box div .overlay{
	position: absolute;
	top : 0px;
	left : 0px;
	width : 0px;
	height : 0px;
	transition: 0.3s,background-position 0.2s 0.3s;
	backdrop-filter: blur(3px);
    background: radial-gradient(circle,transparent 26%,#e1e1e1ad,#ffffff4f 28%);
	overflow: hidden;
	background-position: 320px;
	background-attachment: local;
    background-repeat: no-repeat;
}
section > div > div .card .overlay-box .overlay a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0px;
	text-decoration: none;
	cursor: pointer;
	color: white;
	font-size: 25px;
	text-shadow: 0px 0px 5px #ff8100, 0px 0px 15px orange, 0px 0px 20px orange;
}