/* bitmap font */
@font-face {
  font-family: 'gameboy';
  src: url('/gameboy-webfont.woff2') format('woff2'),
       url('/gameboy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Body Styles */
body {
    font-family: 'gameboy';
    font-size: 16px;
    -webkit-font-smoothing: none;        /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale;  /* Firefox (opposite effect — use grayscale instead of antialiased) */
    background-image: url("PAPER_CR.JPG"); /* aluminum: url("crumpled-aluminium-foil-background.jpg"); */
    text-align: center;
    position: relative;
    min-height: 100vh;
    padding-bottom: 60px; /* Add padding to the body to avoid overlap with bottom banner */
    overflow: hidden;
}

/* Main container centered on the page */
#container {
    width: 80%;
    max-width: 1000px;
    margin: 40px auto;
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 5px;
    position: relative;
    display: flex;
    flex-direction: column; /* Stack banner, nav, and content vertically */
}

/* Banner Style */
#banner {
    background: linear-gradient(to bottom, #ffcc00, #ff9900);
    color: #000;
    padding: 0px;
    width: 100%;
    text-align: center;
}

#banner h1 {
    font-size: 32px;
    text-transform: uppercase;
}

/* Navigation Menu */
#nav-menu {
    background-color: #444;
    color: white;
    width: 100%;
    padding: 0px;
    text-align: center;
}

#nav-menu ul {
    list-style: none;
    padding: 0;
}

#nav-menu ul li {
    display: inline;
    margin-right: 20px;
}

#nav-menu ul li a {
    color: white;
    text-decoration: none;
}

/* Content Wrapper (flex layout to position main content and reviews side by side) */
#content-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* Main Content */
#main-content {
    padding: 20px;
    background-color: #f4f4f4;
    /* border: 2px solid #333; */
    width: 70%; /* 70% width for main content */
    max-height: 590px; /* calc(100vh - 160px);  Calculate available height minus header and bottom banner */
    overflow-y: auto; /* Scrollable content if it exceeds max-height */
}

#main-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

#main-content p {
    font-size: 16px;
}

/* Main Content About Page */
#main-content-abt {
    padding: 10px;
    background-color: #f4f4f4;
    /* border: 2px solid #333; */
    width: 98%; /* 70% width for main content */
    max-height: 590px; /* calc(100vh - 160px);  Calculate available height minus header and bottom banner */
    overflow-y: auto; /* Scrollable content if it exceeds max-height */
}

#main-content-abt h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

#main-content-abt p {
    font-size: 16px;
    white-space: normal;
    word-break: normal;
}

/* Map Wrapper */
#map-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    background-color: #ccc;
}

#map-buttons {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
}

#map-buttons button {
    padding: 10px;
    background-color: #444;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#map-buttons button:hover {
    background-color: #888;
}

#map {
    width: 500px;
    height: 400px;
}

/* Recent Reviews Column */
#recent-reviews {
    width: 25%; /* 25% width for the recent reviews */
    padding: 10px;
    margin-left: 10px;
    background-color: #eee;
    /* border: 2px solid #333; */
    height: auto;
}

#recent-reviews h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

#recent-reviews .review {
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 10px;
    /* border: 1px solid #333; */
}

#recent-reviews .review h4 {
    font-size: 18px;
    margin-bottom: 5px;
}

#recent-reviews .review p {
    font-size: 14px;
}

/* Ad Space Inside Recent Reviews */
#ad-space {
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 10px;
    /* border: 1px solid #333; */
}

#ad-space p {
    font-size: 14px;
    font-weight: bold;
}

/* Bottom Horizontal Ad Banner FOOTER */
#bottom-banner {
    position: fixed;  /* Fix it to the bottom */
    bottom: 0;        /* Align it at the bottom of the viewport */
    left: 0;
    width: 100%;      /* Make it span the entire width */
    background-color: #444;  /* Set the background color */
    text-align: center;
    padding: 10px 0;
    z-index: 1000;    /* Make sure it's always on top */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    #container {
        width: 100%;
        padding: 5px;
    }

    #content-wrapper {
        flex-direction: column; /* Stack content vertically on smaller screens */
    }

    #main-content {
        width: 100%;
        max-height: calc(100vh - 160px); /* Allow for full height when stacked */
    }

    #recent-reviews {
        width: 100%;
        margin-top: 20px;
    }

    #map-wrapper {
        flex-direction: column; /* Stack map buttons and map vertically */
        align-items: center;
    }

    #map {
        width: 100%;
        height: 400px; /* Adjust map height on smaller screens */
    }
}

/* Wavy txt effects */
.wave-text {
  display: inline-block;
  font-family: 'gameboy', monospace;
  white-space: nowrap;
}

.wave-text span {
  display: inline-block;
  animation: wave 1.5s infinite ease-in-out;
  animation-delay: calc(var(--i) * 0.1s);
  
  
  /* Glow effect */
  color: black;  
  text-shadow:
  0 0 2px #FFD700, /* GOLD */
  0 0 4px #FFC300,
  0 0 6px #FFA500,
  0 0 8px #FF8C00,
  0 0 10px #FFD700;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-1px); }
  75%      { transform: translateY(1px); }
}

/* Apply an index to each span */
.wave-text span:nth-child(1)  { --i: 0; }
.wave-text span:nth-child(2)  { --i: 1; }
.wave-text span:nth-child(3)  { --i: 2; }
.wave-text span:nth-child(4)  { --i: 3; }
.wave-text span:nth-child(5)  { --i: 4; }
.wave-text span:nth-child(6)  { --i: 5; }
.wave-text span:nth-child(7)  { --i: 6; }
.wave-text span:nth-child(8)  { --i: 7; }
.wave-text span:nth-child(9)  { --i: 8; }
.wave-text span:nth-child(10) { --i: 9; }
.wave-text span:nth-child(11) { --i: 10; }
.wave-text span:nth-child(12) { --i: 11; }
.wave-text span:nth-child(13) { --i: 12; }