:root {
	--secondary-bg: #aaa;
	--darken4: #0004;
	--darken8: #0008;
	--lightest: #fee;
	--light: #a8b;
}

html * {box-sizing: border-box;} 


body {
	font-family: "Grenze Gotisch", system-ui;
	line-height: 1.4em;
	font-size: 100%;
	margin: 0;
	background-image: url("images/starsbg.jpg"); 
	background-size: 100%;
	color: silver;
}

body>* {
	padding: 1em;
}

header {
	background-image: url("images/moonheader.jpg");
	background-size: cover;
	background-position: center 30%; 
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-family: "New Rocker", system-ui;
	color: crimson;
}

header>* {
	text-align: center;
	margin: 0;
}

h1 {
	text-align: center;
	padding: .6em;
	font-size: 8vw;
	font-family: "Cinzel Decorative", system-ui;
	color: crimson;	

}

h2 {
	padding: .6em;
	font-size: 100%;
	margin: 0;
}

h3 {
	font-size: 4em;
	line-height: 1.4em;
	width: 100%;
	margin: 0;
	text-decoration: underline wavy;
	text-decoration-thickness: 3px;
}

h4 {
	font-size: 3em;
	width: 100%;
	margin: 0;
	padding-top: .8em;
	padding-bottom: .8em;
	text-decoration: underline wavy;
	text-decoration-thickness: 2px;
}

ul.nav {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}


a.toplink {
	color: crimson;
    background-color: var(--darken4);
	padding: .2em .5em .3em;	
	display: block;
}

main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
}

main.loc{
	display: flex;
	flex-direction: column;
	gap: 1em;
}

section.one {
  font-size: 2em;
  flex: 3; 
  flex-wrap: wrap;
}

section.two {
  flex: 2;
  flex-wrap: wrap;
}

section.three {
	flex: 3;
	flex-wrap: wrap;
}

section.four {
	flex: 3;
	flex-wrap: wrap;
}

section.five {
	width: 100%;
	font-size: 1.3em;
	flex-wrap: wrap;
}

section.six {
	width: 100%;
	display: flex;
	flex-direction: column;
}

img{
	min-width: 30%;
	max-width: 100%; 
}

img.self {
	width: 80%;
}


img.work1 {
	max-width: 50%;
	float: right; 
	margin: 40px;
}

img.work2 {
	max-width: 50%;
	float: left; 
	margin: 40px;
}

.booking-form fieldset {
	margin: 0;
	border-radius: 10px;

}
.booking-form fieldset legend {
	padding: 1em;
	margin: 0;
}

.booking-form fieldset:first-child label {
	display: block;
	width: 12em;
	float: left;
	clear: both;
	padding-bottom: .6em;
}
.booking-form fieldset:first-child input {
	display: block;
	width: 15em;
	float: left;
	padding-bottom: 1em;
}

input.done {
	font-size: 75%;
	font-family: "New Rocker", system-ui;
	color: gray;
	height: 2.5em;
	width: 5em;
	margin: 1em
}

section.six {
	width: 100%;
}

a.socials {
	font-size: 1.5em;
	color: crimson;
}

a.intro {
	font-size: 80%;
	line-height: 1.5em;
}

a.park{
	font-size: 1.3em;
}

p.links {
	list-style: none;
	padding: 1.5em;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

figure.folio1 {
	float: right;
}

figure.folio2 {
	float: left;
}

figcaption.desc1 {
	font-size: 1.5em;
	float: right;
}

figcaption.desc2 {
	font-size: 1.5em;
	float: left;
}