* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

body {
		background: #FFFFFF;
		color: #000000;
}

.bgimg {
		height: 100vh;
		position: relative;
		color: #000000;
		font-family: sans-serif;
		font-size: 25px;
}

/* Top notice bar directing Depth Hypnosis visitors to dh.filmar.us. */
.butterbar {
		width: 100%;
		padding: 10px 16px;
		text-align: center;
		font-family: sans-serif;
		font-size: 15px;
		line-height: 1.4;
		background: #FBF4EE;
		border-bottom: 1px solid #E8C9B0;
		color: #5C2409;
}

.butterbar a {
		color: inherit;
		font-weight: 700;
		text-decoration: underline;
		background: none;
}

/* Position text in the middle */
.middle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
}

/* Lower-right icon strip */
.left {
		right: 12px;
		bottom: 10px;
		position: absolute;
}

.social-icons-list {
		display: inline-block;
		list-style-type: none;
		padding: 0;
		text-align: center;
}

.social-icons-list .social-icon {
		box-sizing: border-box;
		display: inline-block;
		height: 24px;
		margin: 0 6px;
		width: 24px;
}

/* The logo: the mark image stands in for the "F" of "FILMAR", and the
   rest is text, in Trebuchet MS thickened by a 0.044em outline. Sized to
   fit a phone screen. */
.wordmark {
		display: inline-block;
		font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", sans-serif;
		font-size: min(142px, 16vw);
		line-height: 1.1;
		white-space: nowrap;
		color: inherit;
		text-decoration: none;
		-webkit-text-stroke: 0.044em currentColor;
		paint-order: stroke fill;
}

/* The mark must read as the first letter of the name: the F is 80.3% of
   the box height (411 of 512 units) and the box hangs 12.3% of the F
   (50.5 of 411 units) below its foot. */
.wordmark .mark {
		height: 1em;
		vertical-align: -0.125em;
		margin-right: 0.04em;
		background: none;
}

@supports (height: 1cap) {
		.wordmark .mark {
				height: calc((1cap + 0.044em) / 0.803);
				vertical-align: calc(-0.022em - 0.123 * (1cap + 0.044em));
		}
}

/* Only one of the two marks shows: the dark one in the dark theme. */
.wordmark .mark-dark {
		display: none;
}

.theme-toggle {
		width: 24px;
		height: 24px;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
}

.theme-toggle img,
.social-icon img {
		width: 24px;
		height: 24px;
		background: none;
}

/* Hover explanations for the icons, also shown on keyboard focus. Anchored
   to the right edge of the icon, since the icons sit at the right edge of
   the page. */
.social-icon [data-tip] {
		position: relative;
		display: inline-block;
}

.social-icon [data-tip]::after {
		content: attr(data-tip);
		position: absolute;
		right: 0;
		bottom: calc(100% + 8px);
		padding: 6px 10px;
		border-radius: 6px;
		background: #222222;
		color: #FFFFFF;
		font: 14px/1.2 sans-serif;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease;
}

.social-icon [data-tip]:hover::after,
.social-icon [data-tip]:focus-visible::after {
		opacity: 1;
}

/* Dark theme. It applies when the visitor picked it with the theme button
   (data-theme="dark" on <html>), or when the system is dark and they have
   not picked light. The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) body {
				background: #141614;
				color: #F4F4EE;
		}

		:root:not([data-theme="light"]) .bgimg {
				color: #F4F4EE;
		}

		:root:not([data-theme="light"]) .butterbar {
				background: #241A15;
				border-bottom-color: #4D3224;
				color: #F4DFD0;
		}

		:root:not([data-theme="light"]) .wordmark .mark-light {
				display: none;
		}

		:root:not([data-theme="light"]) .wordmark .mark-dark {
				display: inline;
		}

		:root:not([data-theme="light"]) .social-icon img {
				filter: invert(1);
		}

		:root:not([data-theme="light"]) .social-icon [data-tip]::after {
				background: #F4F4EE;
				color: #141614;
		}
}

:root[data-theme="dark"] body {
		background: #141614;
		color: #F4F4EE;
}

:root[data-theme="dark"] .bgimg {
		color: #F4F4EE;
}

:root[data-theme="dark"] .butterbar {
		background: #241A15;
		border-bottom-color: #4D3224;
		color: #F4DFD0;
}

:root[data-theme="dark"] .wordmark .mark-light {
		display: none;
}

:root[data-theme="dark"] .wordmark .mark-dark {
		display: inline;
}

:root[data-theme="dark"] .social-icon img {
		filter: invert(1);
}

:root[data-theme="dark"] .social-icon [data-tip]::after {
		background: #F4F4EE;
		color: #141614;
}