.font-family-roboto-mono {

	font-family: 'Roboto Mono', monospace;

}

.font-family-hammersmith-one {

	font-family: 'Hammersmith One', sans-serif;

}

.font-family-playfair {

	font-family: 'Playfair Display', serif;

}

.font-family-yusei {

	font-family: 'Yusei Magic', sans-serif;

}

.font-family-arima-madurai {

	font-family: "Arima Madurai", cursive;

}

.font-family-poppins {

	font-family: Poppins, sans-serif;

}

.font-family-b612 {

	font-family: B612, sans-serif;

}

.font-family-alfa {

	font-family: "Alfa Slab One", cursive;

}

.font-family-inter {

	font-family: Inter, sans-serif;

}

.font-family-handlee {

	font-family: Handlee, cursive;

}

.font-family-handlee {

	font-family: Handlee, cursive;

}



.d-grid {

	display: grid;

	width: 100%;

	margin: 0 auto;

	padding: 10vh 0;

	max-width: 1050px;

	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

	grid-auto-rows: 200px;

	grid-gap: 2rem;

	justify-content: center;

	list-style: none;

}



.d-grid-item {

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	position: relative;

	background: #FBFBFB;

}



/* Links */

.link {

	position: relative;

	cursor: pointer;

	white-space: nowrap;

	color: #333;

	font-size: 1.125rem;

	font-family: 'Roboto', sans-serif;

}



.link::before,

.link::after {

	position: absolute;

	width: 100%;

	height: 1px;

	background: currentColor;

	top: 100%;

	left: 0;

	pointer-events: none;

}



.link::before {

	content: '';

	/* show by default */

}



/* Links 1 */

.link-1::before {

	height: 2px;

	transform-origin: 100% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s;

}



.link-1:hover::before {

	height: 2px;

	transform-origin: 0% 50%;

	transform: scale3d(1, 1, 1);

}



/* Link 2 */

.link-2::before {

	transform-origin: 100% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);

}



.link-2:hover::before {

	transform-origin: 0% 50%;

	transform: scale3d(1, 1, 1);

	transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);

}



.link-2::after {

	content: '';

	top: calc(100% + 4px);

	transform-origin: 0% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);

}



.link-2:hover::after {

	transform-origin: 100% 50%;

	transform: scale3d(1, 1, 1);

	transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);

}



/* Link 3 */

.link-3::before {

	transform-origin: 100% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);

}



.link-3:hover::before {

	transform-origin: 0% 50%;

	transform: scale3d(1, 2, 1);

	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);

}



.link-3::after {

	content: '';

	top: calc(100% + 4px);

	transform-origin: 100% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);

}



.link-3:hover::after {

	transform-origin: 0% 50%;

	transform: scale3d(1, 1, 1);

	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);

}



/* Link 4 */

.link-4 {

	overflow: hidden;

	line-height: 2;

	font-weight: 700;

}



.link-4::before {

	height: 2px;

	top: calc(100% - 5px);

	transform-origin: 0% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}



.link-4:hover::before {

	transform: scale3d(1, 1, 1);

}



.link-4::after {

	content: attr(data-text);

	height: 100%;

	top: 0;

	background: none;

	transform-origin: 100% 50%;

	transform: translate3d(150%, 0, 0);

	transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}



.link-4:hover::after {

	transform: translate3d(0, 0, 0);

}



.link-4 span {

	display: inline-block;

	transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);

}



.link-4:hover span {

	transform: translate3d(-150%, 0, 0);

}



/* Link 5 */

.link-5 {

	padding: 0 10px;

	letter-spacing: 1px;

	text-indent: 1px;

}



.link-5::before {

	top: 50%;

	height: 2px;

	transform-origin: 100% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);

}



.link-5:hover::before {

	transform-origin: 0% 50%;

	transform: scale3d(1, 1, 1);

}



.link-5 span {

	display: inline-block;

	transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);

}



.link-5:hover span {

	transform: scale3d(1.1, 1.1, 1.1);

	opacity: .6;

}



/* Link 6 */

.link-6 {

	font-size: 1.3rem;

}



.link-6::before {

	transform-origin: 50% 100%;

	transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);

	clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);

}



.link-6:hover::before {

	transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);

	clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);

}



.link-6 span {

	display: inline-block;

	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);

}



.link-6:hover span {

	transform: translate3d(0, -2px, 0);

}



/* Link 7 */

.link-7 {

	font-weight: 300;

}



.link-7::before,

.link-7::after {

	opacity: 0;

	transform-origin: 50% 0%;

	transform: translate3d(0, 3px, 0);

	transition-property: transform, opacity;

	transition-duration: 0.3s;

	transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);

}



.link-7:hover::before,

.link-7:hover::after {

	opacity: 1;

	transform: translate3d(0, 0, 0);

	transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);

}



.link-7::after {

	content: '';

	top: calc(100% + 4px);

	width: 70%;

	left: 15%;

}



.link-7::before,

.link-7:hover::after {

	transition-delay: 0.1s;

}



.link-7:hover::before {

	transition-delay: 0s;

}



/* Link 8 */

.link-8 {

	font-weight: 600;

	font-size: 1.25rem;

}



.link-8::before {

	height: 10px;

	top: 100%;

	opacity: 0;

}



.link-8:hover::before {

	opacity: 1;

	animation: lineUp 0.3s ease forwards;

}



@keyframes lineUp {

	0% {

		transform-origin: 50% 100%;

		transform: scale3d(1, 0.045, 1);

	}



	50% {

		transform-origin: 50% 100%;

		transform: scale3d(1, 1, 1);

	}



	51% {

		transform-origin: 50% 0%;

		transform: scale3d(1, 1, 1);

	}



	100% {

		transform-origin: 50% 0%;

		transform: scale3d(1, 0.045, 1);

	}

}



.link-8::after {

	content: '';

	transition: opacity 0.3s;

	opacity: 0;

	transition-delay: 0s;

}



.link-8:hover::after {

	opacity: 1;

	transition-delay: 0.3s;

}



/* Link 9 */

.link-9 {

	font-weight: 700;

}



.link-9::before {

	transform-origin: 0% 50%;

	transform: scale3d(0, 1, 1);

	transition: transform 0.3s;

}



.link-9:hover::before {

	transform: scale3d(1, 1, 1);

}



.link-9::after {

	content: '';

	top: calc(100% + 4px);

	transition: transform 0.3s;

	transform-origin: 100% 50%;

}



.link-9:hover::after {

	transform: scale3d(0, 1, 1);

}



/* Link 10 */

.link-10 {

	font-size: 1.25rem;

	font-weight: bold;

}



.link-10:hover span {

	animation: glitchText 0.4s linear;

}



@keyframes glitchText {

	0% {

		opacity: 1;

		transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);

		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);

	}



	10% {

		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);

	}



	20% {

		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);

	}



	35% {

		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);

	}



	50% {

		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);

	}



	60% {

		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);

	}



	70% {

		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);

	}



	80% {

		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);

	}



	90% {

		transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);

	}



	100% {

		opacity: 1;

		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

	}

}



.link-10::before {

	height: 2px;

	opacity: 0;

}



.link-10:hover::before {

	opacity: 1;

	animation: glitchLine 0.4s steps(2, start) forwards;

}



@keyframes glitchLine {

	0% {

		transform: scale3d(1, 1, 1);

	}



	10% {

		transform: translate3d(10px, 0, 0);

	}



	20% {

		transform: translate3d(0, 4px, 0);

	}



	30% {

		transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);

		transform-origin: 100% 0%;

	}



	40% {

		transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);

	}



	50% {

		transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);

	}



	60% {

		transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);

	}



	70% {

		transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);

	}



	80% {

		transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);

		transform-origin: 100% 0%;

	}



	90% {

		transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);

		;

		transform-origin: 0% 50%;

	}



	100% {

		opacity: 1;

	}

}



/* Link 11 */

.link-11 {

	font-size: 0.925rem;

	letter-spacing: 1px;

}



.link-11::before {

	height: 100%;

	top: 0;

	opacity: 0;

}



.link-11:hover::before {

	opacity: 1;

	animation: coverUp 0.3s ease forwards;

}



@keyframes coverUp {

	0% {

		transform-origin: 50% 100%;

		transform: scale3d(1, 0.045, 1);

	}



	50% {

		transform-origin: 50% 100%;

		transform: scale3d(1, 1, 1);

	}



	51% {

		transform-origin: 50% 0%;

		transform: scale3d(1, 1, 1);

	}



	100% {

		transform-origin: 50% 0%;

		transform: scale3d(1, 0.045, 1);

	}

}



.link-11::after {

	content: '';

	transition: opacity 0.3s;

}



.link-11:hover::after {

	opacity: 0;

}



/* Link 12 */

.link-12 {

	overflow: hidden;

	padding: 7px 0;

}



.link__graphic {

	position: absolute;

	top: 0;

	left: 0;

	pointer-events: none;

	fill: none;

	stroke: currentColor;

	stroke-width: 1px;

}



.link__graphic--slide {

	top: -3px;

	stroke-width: 2px;

	transition: transform 0.7s;

	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);

}



.link:hover .link__graphic--slide {

	transform: translate3d(-66.6%, 0, 0);

}



/* Link 13 */

.link-13 {

	font-size: 1.25rem;

}



.link-13::before {

	display: none;

}



.link__graphic--stroke path {

	stroke-dasharray: 1;

	stroke-dashoffset: 1;

}



.link:hover .link__graphic--stroke path {

	stroke-dashoffset: 0;

}



/* Trick from https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ */



.link__graphic--arc {

	top: 73%;

	left: -23%;

}



.link__graphic--arc path {

	transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);

}



.link:hover .link__graphic--arc path {

	transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);

	transition-duration: 0.3s;

}



.link-14 {

	font-size: 1.35rem;

}



.link-14::before {

	display: none;

}



.link__graphic--scribble {

	top: 100%;

}



.link__graphic--scribble path {

	transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);

}



.link:hover .link__graphic--scribble path {

	transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);

	transition-duration: 0.3s;

}



/* Link 15 */

.link-15 {

	font-weight: bold;

}



.link-15::before {

	height: 7px;

	border-radius: 20px;

	transform: scale3d(1, 1, 1);

	transition: transform 0.2s, opacity 0.2s;

	transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);

}



.link-15:hover::before {

	transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);

	transition-duration: 0.4s;

	opacity: 1;

	transform: scale3d(1.2, 0.1, 1);

}



.link-15 span {

	transform: translate3d(0, -4px, 0);

	display: inline-block;

	transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);

}



.link-15:hover span {

	transform: translate3d(0, 0, 0);

	transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);

	transition-duration: 0.4s;

	transition-delay: 0s;

}