:root {
	--accent: #f27fb7;
	--accent-dark: #f27fb7;
	--black: 255, 255, 255;
	--gray: 230, 230, 230;
	--gray-light: 230, 230, 230;
	--gray-dark: 230, 230, 230;
}
@font-face {
	font-family: "Verdana";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Verdana";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
body {
	font-family: "Verdana";
	margin: 0;
	padding: 0;
	text-align: center;
	background: black;
	background-size: 100% 600px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: rgb(var(--gray-dark));
	font-size: 20px;
	line-height: 1.7;
}
main {
	margin: auto;
	padding: 1em 1em;
}
/* i hope this works */
@media (max-width: 768px) and (min-height: 768px) {
    body {
 	 font-size: clamp(20px, 4vw, 40px);
	}
    .iframe-container {
        width: 100%;
        max-width: 100vw;
        display: flex;
        justify-content: center;
        overflow: hidden;
        margin: 20px 0;
    }

    iframe {
        max-width: 100%; 
        height: auto;
        aspect-ratio: 320 / 240;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

.container {
  max-width: 600px;
  margin: 0 auto;
}