/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { box-sizing: border-box; }

/* Base styling */
html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #cfe8e2;
  overflow: hidden;
}

/* Topnav */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: transparent;
  z-index: 10;
}

#mainlogo { position: absolute; left: 20px; top: 12px; width: 44px; height: 38px; z-index: 3; }
#hambmen-container { position: absolute; right: 20px; top: 12px; z-index: 3; }
#hambmen { width: 32px; height: 32px; transition: filter 0.3s ease; }
#hambmen:hover { filter: brightness(0.8); }

#myLinks {
  display: none;
  position: absolute;
  top: 56px;
  right: 0;
  background-color: #555;
  border-radius: 5px;
  padding: 10px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
#myLinks a { color: white; padding: 10px; text-decoration: none; display: block; }
#myLinks a:hover { background-color: #777; }

/* White box container */
#whitespace {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  bottom: 60px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0;
}

/* Scrollable content */
#whitespace .content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* Images inside content — fixed height */
#whitespace .content img {
  width: 100%;
  max-width: 500px;
  height: 300px;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 10px;
}

/* Headings */
#whitespace h3 { font-weight: bold; margin: 15px 0 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
#whitespace h1 { font-weight: bolder; text-align: center; margin-bottom: 10px; }

/* Footer */
#ilovefeet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: black;
  color: white;
  font-size: small;
  padding: 10px;
  text-align: center;
  z-index: 9999;
}

/* Special headings */
#welcome, #feathead { font-size: xx-large; font-weight: bolder; }

/* Page-specific images (map and Yelp same size) */
#homepic, #menupic, #casinopic, #featurespic, #aboutpic, #map, .yelp-review {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 300px;
  object-fit: cover;
  margin: 0 auto 10px auto;
  border-radius: 10px;
}

/* Contact Section */
#contact {
  margin-top: 40px;
  text-align: center;
}

#contact h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.contact-form {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-form .form-group {
  margin-bottom: 15px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
  position: relative;
}

/* Red * for required fields */
.contact-form label[for]:has(+ input[required])::after,
.contact-form label[for]:has(+ textarea[required])::after {
  content: " *";
  color: red;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  display: inline-block;
  background-color: #00695c;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #004d40;
}