@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box }

:root {
	--bg-color:white;
	--text-color:black;
	--scroll-pct:0;
}

body {
	margin:0;
	overflow: hidden;
	color: var(--text-color);
	background-color:var(--bg-color);
	transition: background-color 1s, color 1s;
	font-family: Cormorant Garamond;
	font-size: 1.3em;
	line-height: 1.5em;
}

h1, h2, h3, h4 {
	font-style: italic;
}

small {
	font-size: 0.6em;
	font-family: system-ui;
	font-weight: 300;
	opacity: 0.6;
	text-transform: lowercase;
}

sup {
	font-size: 0.45em;
	font-family: system-ui;
	font-weight: 300;
	opacity: 0.7;
	margin-left: 1px;
  	line-height: 0;
}

a {
	color: var(--text-color);
	text-decoration: none !important;
	-o-transition:.5s;
 	-ms-transition:.5s;
 	-moz-transition:.5s;
 	-webkit-transition:.5s;
	transition:.5s;
}

p a:hover {
	opacity: 0.5;
}

img {
	width: auto;
	max-height: 75dvh;
	border-radius: 15px;
}

.image-row {
	display: flex;
	justify-content: space-around;
}

p {
	max-width: 70vw;
}

h1 {
	max-width:70vw;
}

/** Content **/

.h-track {
	width:100%;
	height:100dvh;
	overflow-x:auto;
	position:relative;
	overflow-y:hidden;
  
.h-content-container {
    position: relative;
    max-width: unset;
    width: fit-content;
    height: 98dvh;
    display: flex;
    align-items: center;
    transition: transform .2s linear;

> * {
	display: grid;
	place-items:center;
	min-width:100vw;
    }

  }
}

/** Audio Player **/

audio {
	width: 110px;
	animation: audioWidth 0.1s forwards;
}

audio::-webkit-media-controls-panel {
	justify-content: center;
}

audio::-webkit-media-controls-play-button {
	display: inline !important;
}

audio::-webkit-media-controls-mute-button {
	display: none !important;
	min-width: 0;
}

audio::-webkit-media-controls-volume-slider {
	display: none !important;
	min-width: 0;
}

audio::-webkit-media-controls-timeline-container {
	display: none !important;
	min-width: 0;
}

audio::-webkit-media-controls-time-remaining-display {
	display: none !important;
	min-width: 0;
}

audio::-webkit-media-controls-timeline {
	display: none !important;
	min-width: 0;
}

@keyframes audioWidth {
  from {
	width: 110px;
  }
  to {
	width: 84px;
  }
}

/** Progress Bar **/

.invisible-scrollbar {
	scrollbar-width: none;
}

.invisible-scrollbar::-webkit-scrollbar {
	display: none;
}

.progress-bar{
	margin: 10px auto;
	position: fixed;
	bottom:0;
	left:50%;
	transform:translate(-50%, 0);
  
	width:100%;
	max-width:50%;
  
	height:10px;
	border-radius:5px;
	border: 1px solid var(--text-color);
	overflow:hidden;
  
  &::before {
    content:'';
	display: block;
    background-color:var(--text-color);
    height:100%;
    width:var(--scroll-pct);;
  }
}

/** Responsive **/

@media (max-width: 768px) {
	body {
		font-size: 1.25em;
		line-height: 1.4em;
		font-weight: 500 !important;
		}
	
	small, sup {
	font-weight: 400 !important;
	opacity: 0.5;
	}
	
}