/*
	These styles are only for the example website (should not be imported)
*/

@import url("./button-play-audio-types.css");

/* Universal Box Sizing with Inheritance */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

/*
	page variables
	:root for the html element
	:host for the web-component's shadow dom root
*/
:root,
:host {
	--color-text: black;
	--color-background: white;
	--color-links: var(--color-text);
	--size-font: 19px;
	--size: 1.5em;
	--size-container: 50em;
}
html {
	font-size:var(--size-font);
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: var(--size);
}
site-header,
site-footer,
site-main {
	padding: var(--size);
	max-width: var(--size-container);
}

/* elements */
menu {
	list-style: none;
	padding: 0;
}
menu a {
	text-decoration: none;
}
section,
section > details > summary {
	margin-bottom: var(--size);
}
summary {
	cursor: pointer;
}

figure {
	margin: 0;
}
a {
	color: var(--color-links);
}
h1,
h2,
p {
	margin-top: 0;
}
h1 {
	font-size: var(--size-h1);
}
h2 {
	font-size: var(--size-h2);
}
img {
	display: block;
	max-width: 100%;
}
code {
	padding: calc(var(--size) / 3);
}