@font-face {
  font-family: "Spleen";
  src: url("assets/fonts/spleen-16x32.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    background-color: #fffff8;
    font-family: "Spleen", monospace;
}

/* Hidden by default */
#phoneBTFO {
		display: none;
}

/* Show on small screens */
@media (max-width: 768px) {
		#phoneBTFO {
				display: flex;
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.4);
				align-items: center;
				justify-content: center;
				z-index: 9999;
		}

		.win95-window {
				width: 320px;
				background: #c0c0c0;
				border: 2px solid;
				border-color: #ffffff #000000 #000000 #ffffff;
				box-shadow: 2px 2px 0 #000;
		}

		.titlebar {
				background: #000080;
				color: white;
				padding: 3px 6px;
				font-weight: bold;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
		}

		.content {
				padding: 20px;
				color: black;
				font-size: 14px;
				display: flex;
				gap: 15px;
				align-items: center;
		}

		.icon {
				font-size: 32px;
		}

		button {
				display: block;
				margin: 0 auto 15px;
				min-width: 75px;
				padding: 4px 12px;
				background: #c0c0c0;
				border: 2px solid;
				border-color: #ffffff #000000 #000000 #ffffff;
				font-family: inherit;
		}

		button:active {
				border-color: #000000 #ffffff #ffffff #000000;
		}
}