:root {
	--header: white;
	--text: rgb(223, 223, 223);
	--background: black;
	--page-min-width: 45em;
	--page-max-width: 45em;
	--radius: .5em;

	font-family: sans-serif;
}

html {
	height: 100%;
	color: var(--text);
	background: var(--background) url(/images/bg.jpg) no-repeat center/cover;
}

body {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: fit-content;
	margin: 0 auto;
	min-width: var(--page-min-width);
	max-width: var(--page-max-width); 
}

h1, h2, h3, h4 {
	margin: 0;
	color: var(--header);
	margin-block-start: .5em;
	margin-block-end: .5em;
}

p {
	margin-block-start: .5em;
	margin-block-end: .5em;
}

ul, ol {
	margin-block-start: 0;
	margin-block-end: .5em;
}

a {
	text-decoration:none;
	color:var(--background);
}

.nav a {
	text-transform: uppercase;
	padding: .8em;
	margin: .5em;
	background-color:var(--header);
	font-weight: bold;
	border-radius: var(--radius);
	transition: .1s linear;
}

.nav a:hover {
	background-color: var(--background);
	color: var(--text);
	transition: .1s linear;
}

form {
	display: flex;
	flex-direction: column;
}

input, textarea {
	background-color: var(--background);
	color: var(--text);
	border-radius: calc(var(--radius) / 2);
	padding: .5em;
}

textarea {
	min-height: 12em;
	resize: vertical;
}

iframe {
	margin: .5em 0;
}

.submit {
	padding: .2em 2em;
	width: fit-content;
	align-self: flex-end;
}

.u {
	display: flex;
	flex-direction: row;
	align-self:center;
	margin: .5em;
}

.ucomponent {
	display: contents;
}

.content {
	width: calc(100% - 2em);
	gap: .5em;
	padding: 2em;
	background-color: rgba(0, 0, 0, 0.35);
}

.col {
	width: 50%;
}

.service {
	display: flex;
	flex-direction: row;
	height: fit-content;
}

.service-img {
	height: 8em;
	margin-right: 1em;
	object-fit: cover;
	object-position: center;
}

.header-img {
	height: 12em;
	object-fit: cover;
	object-position: center;
}

.carousel-cell {
	height: 400px;
	margin-right: .5em;
}

.flickity-page-dots {
	bottom: 4px;
}

.flickity-page-dots .dot {
	width: 12px;
	height: 12px;
	opacity: 1;
	background: transparent;
	border: 2px solid white;
}

.flickity-page-dots .dot.is-selected {
	background: white;
}