/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
@font-face{
	font-family:Roboto;
	src: url(Roboto/Roboto-VariableFont_wdth,wght.ttf);
}
:root{
	--theme_navy:RGB(6, 39, 66);
	--theme_gold:RGB(255, 165, 0);
}
body{
	
	background-color:var(--theme_navy);
	font-family: "Roboto", Verdana, Sans;
	margin:0 0 0 0;
}
hr{
	height:6px;
	background-color: rgb(116, 73, 0);
	opacity:.12;
}
#TopBar{
	height:20px;
}
.spacer{
	height:30px;
}
#-Splash-Image{
	background-image:URL("St Claire Photo.jpg");
	background-size:cover;
	background-position:0% 40%;
	height:calc(100vh - 43px);
	position:relative;
	overflow:hidden;
}
#LightBulbLogo{
	position:absolute;
	top:9.0014%;
	left:10.9461%;
	width:34.5582%;
	height:32.6301%;
}
#ResolutionBlurb{
	font-family:'Roboto', Verdana, Sans;
	color:white;
	font-size:2.5vw;
	position:absolute;
	top:48%;
	left:15%;
	line-height:18px;
}
#ResolutionBlurb h3{
	font-weight:normal;
	line-height:28px;
}
#BookingZone{
	color:var(--theme_gold);
	display:inline-block;
	width:100%;
	padding-top:40px;
	padding-bottom:40px;
}
#BookingHeader{
	font-family: "Roboto", Arial, Sans;
	padding-left:3.5ch;
	font-size:45px;
	font-stretch:ultra-condensed;
	display:inline;
}
#BookingLink{
	color:var(--theme_gold);
	border:2px solid var(--theme_gold);
	text-decoration:none;
	padding:18px 34px 18px 34px;
	float:right;
	font-size:1.4em;
	margin-right:60px;
	margin-left:35px;
	margin-top:-.25em;
}
#BookingLink:is(:hover, :focus){
	color:var(--theme_navy);
	background-color:var(--theme_gold)
}
#AboutSpace{
	margin-left:20%;
	margin-right:20%;
	color:white;
	display:inline-block;
	margin-bottom:80px;
}
#AboutSpace p{
	color:lightGrey;
	margin-top:15px;
}
#AboutSpace h2{
	display:inline-block;
}
#ChelseaPic{
	float:left;
	/*float:right*/
	width:30%;
	/*margin-left:25px;*/
	margin-bottom:14px;
	margin-right:25px;
	margin-top:50px;
}

footer{
	background-color:var(--theme_navy);
	color:lightGrey;
	padding-top:20px;
	padding-bottom:30px;
	text-align:center;
	font-size:1.2em;
}
footer a{
	color:var(--theme_gold)
}
#CopyrightNotice{
	font-size:.9em;
	line-height:3em;
	color:grey;
}


@media (min-width:1218px){
	#-Splash-Image{
		height:calc(100vh - 43px - 184px);
	}
	#BoatCutout{
		position: absolute;
		/*Background image's size: 3024*4032  = 3*4
		left: calc( .75 * max((100vw * 4 / 3),((100vh - 43px - 184px))));    4032 /3778 = 1.06723133933 → *.4 = 0.426892535732*/
		/* NOTE: PLEASE FIX THE BOAT SIZES */
		/*height:calc(100vh - 43px - 184px);*/
		
		/*display:none;*/
		width:100vw;
		height:calc(100vw / .75);
		background-image:URL("Smoother Boat.avif");
		background-size:cover;
		background-position:0% 40%;
		transform-origin: calc(.75 * max(calc(100vw / .75), calc(100vh - 43px - 184px)) * 0.694444444444 ) calc(max(calc((100vh - 43px - 184px) * .75), 100vw) / .75 * 0.830853174603);
		/*clip-path:xywh(0 calc((calc(max(calc((100vh - 43px - 184px) * .75), 100vw) / .75) - calc(100vh - 43px - 184px)) / 2 * .4 / .5) 100vw calc(100vh - 43px - 184px));*/
		top:calc((calc(max(calc((100vh - 43px - 184px) * .75), 100vw) / .75) - calc(100vh - 43px - 184px)) / -2 * .4 / .5);
		transition:transform 1s ease-out;
		
	}
}

@media (max-width:1218px){
	#BookingZone{
		text-align:center;
	}
	#BookingLink{
		display:inline-block;
		margin:.8em 0 0 0;
		float:none;
	}
	#BookingHeader{
		display:block;
		padding-left:0;
	}
}
@media (max-width:1000px){
	#AboutSpace h2{
		display:block;
	}
	#ChelseaPic{
		margin-top:8px;
	}
}
@media (max-width:840px){
	#LightBulbLogo{
	/*top:1%;
	left:10.9461%;
	SVG ASPECT RATIO: 2.45274998256
	*/
	width:43%;
	height:40.6009080335%;
	top:6.01459598325%;
	}
	#AboutSpace{
		margin: 0 calc(45% - 210px) 80px calc(45% - 210px);
	}
	#ResolutionBlurb{
		top:43%;
	}
}
@media  (max-width:600px){
	#AboutSpace{
		margin:0 10% 80px 10%;
	}
	#LightBulbLogo{
		width:min(258px, 80%);
		
		height:25%;
		top:0px;
	}
	#ResolutionBlurb{
		top:23%;
		left:16%;
	}
	#ResolutionBlurb h3{
		font-size:max(3.5vw, 24px);
	}
}
@media (max-width:400px){
	#ChelseaPic{
		width:80%;
		float:none;
	}
}
@media not (any-pointer:fine){
	#TelLink{
		margin:30px 0 10px 0;
		display:block;
	}
	#MailToLink{
		margin:50px 0 30px 0;
		display:block;
	}
	#BookingLink{
		padding:30px 34px 30px 34px;
	}
	#AddressPipe{
		display:none;
	}
	footer{
		padding-bottom:80px;
	}
}