/* Responsive typography and video sizing (no color changes) */

/* Base settings */
html { min-height: 100%; margin: 0; padding: 0; }
body { min-height: 100vh; height: auto; margin: 0; padding: 0; }

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.25rem;
}

/* Typography: increase font-size as viewport gets smaller for readability */
/* Large screens (desktop) */
html { font-size: 20px; }

/* Medium screens (<= 1024px) - slightly larger */
@media (max-width: 1024px) {
	html { font-size: 18px; }
}

/* Small / tablet (<= 768px) - increase more for readability */
@media (max-width: 768px) {
	html { font-size: 20px; }
}

/* Mobile (<= 420px) - largest base font */
@media (max-width: 420px) {
	html { font-size: 22px; }
}

/* Use rem units for elements so they scale with base font-size */
h1, h2, h3 { margin: 0 0 0.5rem 0; font-weight: 600; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem 0; font-size: 1rem; }
ul.demo { list-style: none; padding: 0; margin: 0 0 1rem 0; }
ul.demo li { margin: 0.25rem 0; font-size: 1rem; }

/* Container that constrains media width but allows it to be responsive */
.video-wrapper {
	width: 100%;
	max-width: 900px; /* cap for very large screens */
	margin: 0.75rem auto;
}

/* Make iframe and video scale automatically based on their intrinsic aspect ratio */
.video-wrapper iframe,
.video-wrapper video,
iframe.demo, video.demo {
	width: 100%;
	height: auto;            /* let browser compute height from aspect-ratio */
	max-height: 65vh;       /* don't exceed viewport height */
	display: block;
	border: 0;
	aspect-ratio: 16 / 9;    /* prefer intrinsic 16:9; modern browsers will size accordingly */
	object-fit: cover;
}

/* In case older browsers ignore aspect-ratio, keep a fallback using padding-top trick */
.video-wrapper .responsive-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* fallback 16:9 */
}
.video-wrapper .responsive-embed > * {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
}

/* Slightly larger video on small screens for readability */
@media (max-width: 1024px) {
	.video-wrapper iframe, .video-wrapper video { max-height: 55vh; }
}
@media (max-width: 768px) {
	.video-wrapper iframe, .video-wrapper video { max-height: 50vh; }
}
@media (max-width: 420px) {
	.video-wrapper iframe, .video-wrapper video { max-height: 45vh; }
}

/* Connect button sizing - scale with rem so it grows on smaller screens */
.imgLink { text-decoration: none; display: inline-block; margin: 10px; }
.imgLink img { height: 2.25rem; width: auto; max-width: 100%; }
@media (max-width: 768px) { .imgLink img { height: 2.75rem; } }
@media (max-width: 420px) { .imgLink img { height: 3.25rem; } }

/* Misc */
#result { white-space: pre-wrap; }