@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
	background-color: #191819;
	color: white;
}

header {
	background-image: url(~/assets/pictues/header.avif);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

a {
	@apply text-rose-500 hover:underline visited:bg-rose-700;
}

.font-jetbrains {
	font-family: 'JetBrains Mono', monospace;
}

code, kbd, pre, samp {
	font-family: 'JetBrains Mono', monospace;
}

.font-inter {
	font-family: 'Inter';
}

.blog-post-img {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.text-overflow:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	--tw-bg-opacity: 1;
	background: linear-gradient(transparent 150px,
			rgba(39, 39, 42, var(--tw-bg-opacity)));
}

.love {
	text-decoration: underline;
	text-decoration-color: #EB0066;
}

.love::before,
.love::after {
	content: '❤';
	position: absolute;
	pointer-events: none;
	opacity: 0;
	transition: opacity 650ms;
}

.love::after {
	margin-left: 4px;
	animation-name: floating;
	animation-duration: 2.35s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.love::before {
	margin-left: -24px;
	animation-name: floatingButDownMore;
	animation-duration: 2.025s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.love:hover::after,
.love:active::after,
.love:focus::after {
	opacity: 1;
}

.love:hover::before,
.love:active::before,
.love:focus::before {
	opacity: 1;
}

@keyframes floating {
	0% {
		transform: translate(0, -5px) rotate(0turn);
	}

	25% {
		transform: translate(0, -11px) rotate(0.0425turn);
	}

	50% {
		transform: translate(0, -17px) rotate(0turn);
	}

	75% {
		transform: translate(0, -11px) rotate(-0.05turn);
	}

	100% {
		transform: translate(0, -5px) rotate(0turn);
	}
}

@keyframes floatingButDownMore {
	0% {
		transform: translate(0, 2px) rotate(0turn);
	}

	25% {
		transform: translate(0, -4px) rotate(-0.05turn);
	}

	50% {
		transform: translate(0, -10px) rotate(0turn);
	}

	75% {
		transform: translate(0, -4px) rotate(0.0375turn);
	}

	100% {
		transform: translate(0, 2px) rotate(0turn);
	}
}

.main-content {
	column-count: 12;
}

.btn-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
}