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

@layer base {
	* {
		@apply font-sans;
	}
}

.fullscreen {
	z-index: 9999 !important;
	width: 100% !important;
	height: calc(100vh - 3.5rem) !important;
	top: 0px !important;
	left: 0px !important;
}

@font-face {
	font-family: "Pixelated MS Sans Serif";
	src: url("/ms_sans_serif.woff") format("woff");
	src: url("/ms_sans_serif.woff2") format("woff2");
	font-weight: 1000;

	font-style: normal;

	font-smooth: always;
}

@keyframes minimizeWindow {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	100% {
		opacity: 0;
		transform: scale(0.1) translateY(calc(100vh - 100%));
	}
}

@keyframes restoreWindow {
	0% {
		opacity: 0;
		transform: scale(0.1) translateY(calc(100vh - 100%));
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes duolingoPopup {
	0% {
		opacity: 0;
		transform: scale(0) translateY(20px);
	}
	50% {
		transform: scale(1.1) translateY(-5px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.duolingo-popup.show {
	animation: duolingoPopup 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}