/* @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Playfair+Display&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap'); */

html, body {
  width: 100%;
  height:100%;
	padding: 0;
	margin: 0;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;

	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	font-size: 16px;
}

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


.box-name {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lina {
	font-style: italic;
	font-family: 'Fredericka the Great', serif;
	font-weight: 400;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	line-height: 1;
	color: #f3f1f7ab;
	display: inline-block;
	

	/* font-size: 7em; */
	/* clamp(minimum, preferred, maximum); */
	font-size: clamp(2rem, -1.23rem + 8.333vw, 7rem);

	padding: 0 10px 20px;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}

.lina:hover {
	color: #1e1a1b;
}

.lina::before {
	content: '';
	position: absolute;
	height: 36px;
	width: 50%;
	top: 50%;
	margin-top: -18px;
	left: 25%;
	z-index: -1;
	background: #F9F9F9;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.lina:hover::before {
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.lina span {
	font-family: 'Playfair Display', serif;
	/* font-size: 20%; */
	font-size: clamp(.6rem, -0.26rem + 2.333vw, 2rem);
	font-weight: 400;
	position: absolute;
	right: 15px;
	color: #e53369;
	color: rgba(255, 255, 0, 0.65);
	bottom: 0;
	opacity: 0;
	-webkit-transform: translate3d(-10px,-10px,0);
	transform: translate3d(-10px,-10px,0);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}
.lina:hover span {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}