<style>
html {
overflow: scroll;
}

p {
margin-bottom: 10px;
}

header {
z-index: 9998;
width: 100%;
height: 150px;
min-height: 150px;
text-align: center;
color: white;
text-shadow: 0 0 5px rgba(0, 0, 0, 1);
border: 0px solid black;
font-family: 'helvetica', arial black;
font-size: 3em;
background-size: cover;
background-image: url('../images/MarineHeader.jpg');
background-color: white;
position: fixed;
top: 0;
left: 0;
}

#Logo {
width: 110px;
height: 110px;
border: 0;
position: absolute;
top: 11px;
left: 11px;
background-image: url('../images/MarineLogo.jpg');
background-size: cover;
background-position: bottom right;
z-index: 9999;
}

body {
margin: 0;
font-family: sans-serif, Helvetica;
width: 100%;
background-color: #10161d;
}

#content {
padding-top: 200px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
}

#clamshell-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 32px;
width: 100%;
}

#clamshell-images {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 24px;
margin-bottom: 24px;
padding: 0 16px;
}

#clamshell-images img {
height: 567px;
max-width: 100%;
width: auto;
background-color: white;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
object-fit: contain;
}

@media (max-width: 1500px) {
	#clamshell-images img {
		height: 48.6vw;
	}
}

#clamshell-form {
width: auto;
display: flex;
flex-direction: column;
align-items: center;
}

#Form1 {
width: auto;
max-width: 500px;
margin: 0 auto 20px;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 18px;
overflow: hidden;
}

#Form1 td, #Form1 th {
padding: 10px;
color: white;
font-size: 15px;
}

#Form1 th {
font-weight: bold;
font-family: 'helvetica', arial black;
}

#Form1 .table-section-title {
padding: 10px;
font-size: 16px;
text-align: center;
}

#Form1 input {
width: 120px;
}

#Button {
width: auto;
max-width: 500px;
margin: 0 auto 30px;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.75);
padding: 7px 24px;
border: none;
color: white;
font-size: 20px;
font-weight: bold;
font-family: 'helvetica', arial black;
cursor: pointer;
border-radius: 18px;
}

#clamshell-results-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 20px;
margin-top: 60px;
}

#clamshell-results {
width: auto;
max-width: 700px;
margin: 0;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 18px;
overflow: hidden;
}

#clamshell-results td, #clamshell-results th {
padding: 10px 14px;
color: white;
font-size: 16px;
text-align: center;
}

#clamshell-results th {
font-weight: bold;
font-family: 'helvetica', arial black;
}

#clamshell-angles {
width: auto;
max-width: 500px;
margin: 0;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 18px;
overflow: hidden;
}

#clamshell-angles td, #clamshell-angles th {
padding: 10px;
color: white;
font-size: 15px;
}

#clamshell-angles .table-section-title {
padding: 10px;
font-size: 16px;
text-align: center;
}

#clamshell-dimensions {
width: auto;
max-width: 500px;
margin: 0;
border-collapse: collapse;
background-color: rgba(0, 0, 0, 0.75);
border-radius: 18px;
overflow: hidden;
}

#clamshell-dimensions td, #clamshell-dimensions th {
padding: 10px;
color: white;
font-size: 15px;
}

#clamshell-dimensions .table-section-title {
padding: 10px;
font-size: 16px;
text-align: center;
}

footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 79px;
text-align: center;
border: 0px solid black;
font-family: 'helvetica', arial black;
font-size: 1em;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
background-size: cover;
background-image: url('../images/Footer.png');
background-position: bottom right;
}

#LocationTag,
#ContactTag {
width: auto;
text-align: center;
color: white;
font-family: 'helvetica', arial white;
font-size: 1em;
line-height: 1.6;
position: static;
margin: 0;
}

#TrmbLogo {
width: 500px;
height: 140px;
transform: scale(0.35);
border: 0;
position: fixed;
bottom: -32.5px;
right: -150px;
background-image: url('../images/TrmbLogo.jpg?v=20260830');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 9999;
}

@media (max-width: 900px) {
	body {
		background-size: auto 900px;
		background-position: top center;
	}

	#clamshell-top {
		flex-direction: column;
		align-items: center;
	}

	#clamshell-images {
		flex-direction: column;
		align-items: center;
	}

	#clamshell-images img {
		height: auto;
		width: 100%;
		max-width: 380px;
	}

	#clamshell-results-container {
		flex-direction: column;
		align-items: center;
	}

	#Form1,
	#Button,
	#clamshell-results,
	#clamshell-angles,
	#clamshell-dimensions {
		width: 100%;
		max-width: 500px;
	}
}
</style>
