* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-kerning: auto;
    color-scheme: light dark;
}

/*
@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
    line-height: 1.4;
    color: black;
  }
}
*/

body {
    font: -apple-system-body;
	padding: 1em;
	margin: 0 auto;
}

.h2twist {
	font: -apple-system-body;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: calc(25px + 1vw);
	text-align: center;
}

.h1twist {
	font: -apple-system-body;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: calc(45px + 1.1vw);
	text-align: center;
	margin-bottom: 10pt;
}

.twistBody {
    font: -apple-system-body;
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(15px + 1vw);
    line-height: calc(1.1em + 0.5vw);
	padding: 1em;
	margin: 0 auto;
	text-align: center;
}


hr {
	border: 1.0pt solid;
	opacity: 0.5;
}

.contain {
  /* Image is scaled to fit within the container. */
  /* Aspect ratio IS maintained */
  object-fit: contain;
  padding: 0pt;
  vertical-align: top;
}


.image-cell {
    vertical-align: middle; / Aligns content to the bottom of the cell /
    text-align: center; / Centers the content horizontally /
    height: 100%; / Ensures the cell takes full height /
    left: 0;
  right: 0;
  margin: 0 auto;
}

.image-cell-top {
    vertical-align: top; / Aligns content to the bottom of the cell /
    text-align: center; / Centers the content horizontally /
    height: 100%; / Ensures the cell takes full height /
    left: 0;
  right: 0;
  margin: 0 auto;
}

.image-cell img {
    max-width: 100%; / Ensures the image is responsive /
    height: auto; / Maintains aspect ratio /
}


.responsive-image {
    width: 100%;
    height: auto;
}


@media (prefers-color-scheme: dark) {
	html {
		color: rgba(250, 250, 250, 1.0);
	}
}