@import './app.css';
@import './animations.css';
@import './widget-wheel.css';
@import './widget-box.css';
@import './widget-fountain.css';

/* box sizing */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* base */
body {
	font-size: 14px;
  padding: 0;
	min-height: 100vh;
	display: flex;
	margin: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media screen and (min-width: 500px) {
	body {
		font-size: 16px;
	}
}
@media screen and (min-width: 980px) {
	body {
		font-size: 18px;
	}
}
@media screen and (min-width: 1600px) {
	body {
		font-size: 24px;
	}
}
@media (prefers-color-scheme: light) {
	:root,
	:host {
		color-scheme: light;
		--c-bg: transparent;
		--c-fg: black;
		--c-link: orange;
	}
}
@media (prefers-color-scheme: dark) {
	:root,
	:host {
		color-scheme: dark;
		--c-bg: transparent;
		--c-fg: white;
		--c-link: turquoise;
	}
}


/* Native dom elements */
i {
  font-style: italic;
}
strong {
  font-weight: bold;
}

h1 {
	text-align: center;
	font-size: 2em;
}

p {
	margin-bottom: 1rem;
	font-size: 1.4rem;
}