/* Page Setup */
body {
    background: url('bkg.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
padding-top:20px;
    margin: 0;
    font-family: sans-serif;
}

/* The Sign Structure */
.sign-container {
    width: 580px; /* Adjust based on the # columns */
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.5));
}

.sign-cap {
    background-color: #a68a56; 
    height: 60px;
    width: 100%;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    border-bottom: 4px solid #826a42;
}

.sign-body {
    background-color: #a68a56;
    padding: 15px;
    border-left: 10px solid #826a42;
    border-right: 10px solid #826a42;
}

/* Banners and Buttons */
.banner-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.large-banner {
    width: 100%;
    height: auto;
    border: 2px solid #fff;
    background-color: #eee; /* Optional, adds a border around the banner */
}
.banner-text { /* Optional if there's text, I didn't bother to style this any better */
width:100%;
background-color: #eee;
padding:3px;
text-align:center;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* number of columns - adjust sign-container width if this changes */
    gap: 8px;
    background: #333;
    padding: 10px;
    border-radius: 4px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.column img {
    display: block;
    border: 1px solid #555;
    transition: transform 0.1s;
}

.column img:hover {
    transform: scale(1.05);
}

/* feet */
.sign-posts {
    height: 40px;
    width: 100%;
    background: linear-gradient(to right, transparent 15%, #826a42 15%, #826a42 25%, transparent 25%, transparent 75%, #826a42 75%, #826a42 85%, transparent 85%);
}

/* Mobile responisve */

@media (max-width: 600px) {
    .sign-container {
        width: 75vw; /* Adjust based on the # columns */
        margin: 10px auto;
    }

    .sign-cap {
        height: 40px;
    }

    .button-grid {
        grid-template-columns: repeat(3, 1fr);  /* number of columns on mobile view - adjust sign-container width if this changes */
        gap: 5px;
        padding: 5px;
    }

    .column img {
        max-width: 100%;
        height: auto; 
    }

    .banner-text {
        font-size: 0.8rem;
        word-wrap: break-word;
        padding: 8px 4px;
    }

    .sign-posts {
        height: 30px;
    }
}