/* Reset CSS found at https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Start Custom Styles */
:root {
	color-scheme: light dark;
	font-size: 20px;
	--accent-light: #092;
	--accent-dark: #0C4;
	--info-light: #11F;
	--info-dark: #24F;
}

body{
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	line-height: 1.6rem;
	padding: 2vw;
	color: light-dark(#333, #fafafa);
	background-color: light-dark(#fafafa, #333);
}

h1, h2{
	font-family: "Merriweather", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}
h1{
	font-size: 2rem;
	line-height: 3.2rem;
}
h2{
	color: light-dark(var(--accent-light),var(--accent-dark));
	font-size: 1.4rem;
	margin-top: 1.6rem;
	margin-bottom: 0.2rem;
	border-bottom: 1px solid light-dark(var(--accent-light),var(--accent-dark));
}
h3{
	font-weight: 500;
	font-size: 1.2rem;
}
strong{
	font-weight: 500;
}
section{
	margin-top: 1.6rem;
}
section:first-of-type{
	margin-top: 0;
}
.history p{
	margin-bottom: 0.8rem;
}
.history p:first-of-type{
	font-style: italic;
}
a{
	color: light-dark(var(--accent-light),var(--accent-dark));
	font-weight: 400;
}
a[href^=tel]{
	text-decoration: none;
	color: light-dark(#333, #fafafa);
	font-weight: 300;
}
#mothermold{
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}
.callout{
	margin: 0.8rem 0;
	border-left: 0.4rem solid light-dark(var(--accent-light),var(--accent-dark));
	padding: 0.2rem 0.8rem;
	background-color: light-dark(rgba(200,200,200,0.2), rgba(10,10,10,0.2));
}
.nocopy{
	user-select: none;
}
.note, .exit{
	cursor: pointer;
	user-select: none;
	color: light-dark(var(--info-light),var(--info-dark));
	font-weight: 700;
	font-size: 0.9rem;
	vertical-align: super;
	letter-spacing: 0.5px;
}
#overlay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	display: none;
	justify-content: center;
}
.exit{
	position: fixed;
	top: 5vh;
	right: 2vh;
}
iframe{
	position: relative;
	width: 95%;
	max-width: 860px;
	height: 80vh;
	margin: 10vh 0;
	border: 1px solid light-dark(var(--accent-light),var(--accent-dark));
}