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

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

/* Prevent form controls from overflowing their Win98 windows. */
textarea,
input,
select {
	max-width: 100%;
	box-sizing: border-box;
}

/* Window content should never visually spill out of the frame. */
.window,
.window-body {
	overflow: hidden;
	/* Ensure padding is included in the element's width so it can't overflow the frame. */
	box-sizing: border-box;
}

/* But allow scrolling within the body when needed. */
.window-body {
	overflow: auto;
	/* Avoid width:100% + scrollbar/padding causing horizontal spill. */
	max-width: 100%;
	overflow-x: hidden;
}

/* 98.css textarea sizing can overflow when width is auto; force it to fit. */
.window-body textarea,
.window-body input,
.window-body select {
	display: block;
	/* Fill the available content box; padding/border stay inside via border-box. */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* In some windows the textarea is wrapped; ensure wrapper doesn't overflow. */
.window-body .field-row-stacked {
	max-width: 100%;
}

.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);
}
