html, body, ul {margin:0; padding:0;}
ul {list-style: none;}
a img {border:0;}
body {
	font-family: 'Cormorant Garamond', serif;
	font-family: 'Open Sans Condensed', sans-serif;
	font-family: 'Assistant', sans-serif;	
	font-size: 1.0em;
	color:#fff;
}

a {text-decoration:none;}
section a {color:rgba(0,150,200,0.7); text-decoration:underline;}
section a:hover {color:rgba(0,150,200,1); text-decoration:none;}
section {
  line-height: 1.6;
}

header nav {background-color:#444; width:100%; position: fixed; top: 0;} 
nav {margin:0; text-transform:uppercase; font-size:1.1em; letter-spacing:0.1em; text-align:center;}
nav ul li {display:inline-block;}
nav ul li a {background-color:#444; display:block; padding:0.8em 1.8em 0.5em; color:#ccc; font-size:0.85em; font-family: 'Open Sans Condensed', sans-serif;}
nav ul li a:hover {color:#fff;}

section {width: 100%; margin: 0 auto; box-sizing: border-box;}
.bg {padding: 14% 0 7%; text-align: center;}
.bg h1 {font-size: 4em; margin: 0 0 1em; text-transform: uppercase; font-family: 'Amatic SC', cursive;}

.text {padding: 2em;}
.text img {width:600px; display: block; margin:0 2em 1em 0; float: left;}
.text .imgright {margin:0 0 1em 2em; float: right;}
.text .imgsmall {width:200px;}
.text #family {border-radius: 50%;}

h2 {font-size:3em; text-transform:uppercase; text-align:center; font-family: 'Amatic SC', cursive;}
h3 {font-size:2em; font-family: 'Amatic SC', cursive; }
quote {font-size:1.4em; font-family: 'Caveat', cursive; display:block; margin:0 auto;}
.paragraph {max-width:1000px; margin:3em auto;}
.paragraph .blue {background-color:rgba(0,0,100,0.1); padding:3em; margin: 3em 0;}
.paragraph .green {background-color:rgba(0,100,0,0.1); padding:3em; margin: 3em 0;}
.paragraph .yellow {background-color:rgba(0,150,200,0.4); padding:3em; margin: 2em 0; color:#fff;}
.paragraph .brown {background-color:rgba(150,50,0,0.5); padding:3em; margin:2em 0; color:#fff;}
.paragraph .space {padding:2em 0; margin: 2em 0;}
.margin_up {padding: 2em 0 0 0;}


.accent {border: 1px solid #fff; border-radius: 2em; padding:1em; margin: 1em 0; display:inline-block; background-color:rgba(0,150,200,0.5); color:#fff;}
.link {text-decoration:none; background-color:rgba(0,150,200,0.5); padding:1em 2em; margin: 1em 0; font-size:2em; text-transform:uppercase; text-align:center; font-family: 'Amatic SC', cursive; color: #fff; display:inline-block;}
.link:hover {background-color: rgba(0,150,200,0.9); color:#fff;}
.spanbg {background-color: rgba(0,150,200,0.6); color:#fff; padding:0.2em;}
.comment {
        width: 40%;
        height: 100px;
        padding: 10px;
        background-color: #d0e2bc;}
.send {}
.darkbg {background-color:rgba(255,255,255,0.9); color:#000;}
.whitebg {background-color:rgba(255,255,255,0.7); color:#000;}
.grassbg .paragraph {background-color:rgba(255,255,255,0.8); color:#000; padding:2em; max-width:700px; text-align:center;}
.grassbg .paragraph .small {font-size: 0.8em;}
.yellowbg {background-color:rgba(250,250,230,0.9); color:#000;}


.centerbigfont {font-size: 1.3em;}


.gallery img {width: 100%; height: auto; box-sizing: border-box;}


.responsive {
  padding: 1em;
  float: left;
  width: 32.99999%;
  box-sizing: border-box;
}

body:before {
	content: "";
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background: url(images/bg2.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


@media only screen and (max-width: 700px) {
	
	.responsive {
    	width: 100%;
	}
	img {
    	float: none;
	}
	.text .imgright {
    	float: none;
	}
  
	nav {text-align:left;}	
	nav ul li a {font-size:0.5em;}
	.bg h1 {font-size: 3em;}
	h2 {font-size: 2em;}
	h3 {font-size: 1.5em;}
	.link {font-size: 1.5em; margin: 0.5em 0;}
	.accent {margin: 0.5em 0;}
}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#pp {font-size:0.7em;}



:root{--bg:#f7fafc;--card:#fff;--accent:rgba(0,150,200,0.5);--muted:#6b7280}
    
    
    .btn{display:inline-block;padding:1rem 2rem;border-radius:0px;background:var(--accent);color:#fff;text-decoration:none;border:none;cursor:pointer;font-size: 1.5em;text-transform:uppercase; font-family: 'Amatic SC', cursive; }

    /* modal */
    .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.45);align-items:center;justify-content:center;padding:1rem;z-index:40}
    .modal{width:100%;max-width:540px;background:var(--card);border-radius:12px;padding:1rem 1.25rem;box-shadow:0 8px 30px rgba(2,6,23,0.3)}
    .modal h3{margin:0 0 .5rem 0}
    .modal p{margin:0 0 1rem 0;color:var(--muted)}
    .field{display:flex;flex-direction:column;margin-bottom:.75rem}
    .field label{font-size:.85rem;margin-bottom:.25rem}
    .field input{padding:.5rem .6rem;border:1px solid #e6e9ee;border-radius:8px;font-size:1rem}
    .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
    .btn-ghost{background:transparent;border:1px solid #e6e9ee;color:var(--muted)}

    /* small helper */
    .note{font-size:.85rem;color:var(--muted)}

    @media (prefers-reduced-motion: no-preference){.modal-backdrop.show{animation:fadeIn .14s ease both}.modal.show{animation:pop .16s cubic-bezier(.2,.9,.2,1) both}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}