/* CSS reset */
body, div, head, header, nav, img, figure, fig caption {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Style rules for index.html */
#index {
    text-align: center;
}
#index h1 {
    color:#2dc653;
    font-family: "Supermercado One", sans-serif;
}

#index p {
    color: #2dc653;
    font-size: 1.5em;
    font-family: "Audiowide", sans-serif;
}

.rave {
    display: block;
    max-width: 100%;
}

/* Style rules for navigation area */
nav {
	padding: 1%;
    margin-bottom: 1%;
    text-align: center;
    font-size: 1.5em;
}

nav a {
    display: inline-block;
    color: #4ad66d;
    text-decoration: none;
    font-family: Anta, sans-serif;
}

/* Style rules for neon button */
button {
    position: relative;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    transition: all 0.3s ease;
 }
 
.btn-neon {
            background-color: transparent;
            color: #208b3a;
            border: 2px solid #208b3a;
            box-shadow: 0 0 5px #208b3a;
            transition: all 0.3s;
        }

        .btn-neon:hover {
            color: #208b3a;
            background-color: #2dc653;
            box-shadow: 0 0 20px #25a244, 0 0 40px #25a244, 0 0 60px #25a244;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            letter-spacing: 3px;
        }

body {
    background-color: #155d27;
}

#music {
    text-align: center;
    display: block;
    max-width: 100%;
    color:#4ad66d;
    font-size: 1.5em;
}
/* Main styles */
main {
	padding: 2%;
}

/* Footer styles */
footer {
    color: #4ad66d;
	text-align: center;
	font-size: .8em;
}

/* logo and image style rules */
#banner {
    height: 50px;
    width: 160px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.twitter, .facebook {
    height: 100px;
    width: 150 px;
    display: inline-block;
}

.image-container {
    position: relative;
    display: inline-block;
    margin: 0;
}

.image-container img {
    display: block;
    max-width: 100%;
}

.image-container figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, #25a244, 0, 0.6);
    color: white;
    padding: 1.4em;
    margin: 0;
}
/* Style rules for about.html */
#about h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#about p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#about a {
    text-decoration: none;
    font-size: 1.5em;
    color: #2dc653;
}

/* Style rules for story.html */
#story h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#story p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}
    

/* Style rules for contact.html and form */
#contact a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
        }

#contact p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
        }
#contact h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

.event-form {
        background: #4ad66d;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        max-width: 100%px;
        }

 form-section {
    margin-bottom: 15px;
        }
        
label {
     display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
        }

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't increase width */
        }

button {
    width: 100%;
    padding: 10px;
    background-color: #208b3a;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
        }

button:hover {
        background-color: #2dc653;
        }

/* style rules for packages.html and grid */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box img {
    max-width: 100%;
    display: block;
}

.box-3 {
    flex: 1;
    display: flex;
    max-width: 100%;
    align-items: center;
    flex-direction: column;
}

#packages ul, li, p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#packages a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

#packages h1 {
    color:#4ad66d;
    font-family: "Supermercado One", sans-serif;
}

#packages h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

.box-3 p {
max-width: 100%;
display: block;
text-align: center;
}

.box-3 img {
    max-width: 100%;
    display: block;
    align-items: center;
}

/* Style rules for events.html items */
#events h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#events h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#events a {
     text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

#events p {
     color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

.box1 {
    text-align: center;
}

.box1 img {
    max-width: 100%;
    display: block;
}

/* Style rules for weddings.html */
#weddings h1 {
     color:#4ad66d;
    font-family: "Supermercado One";
}

#weddings h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#weddings p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#weddings a {
     text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

/* Style rules for school.html */
#school h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#school h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#school p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#school a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

/* Style rules for corporate.html */
#corporate h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#corporate h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#corporate p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#corporate a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

/* Style rules for special.html */
#special h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#special h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#special p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

#special a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

/* Style rules for reviews.html */
.reviews {
    display:block
}

.reviews p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
    background-color: white;
    color: #4ad66d;
}

#reviews h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

/* Style rules for grid */
.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-gap: 10px
}

.grid img {
    display: block;
    max-width: 100%;
}

/* Style rules for gallery.html */
#gallery h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#gallery h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

/* Style rules for resources.html */
#resources h1 {
    color:#4ad66d;
    font-family: "Supermercado One";
}

#resources h2 {
    color:#4ad66d;
    font-family: "Audiowide", sans-serif;
}

#resources a {
    text-decoration: none;
    font-size: 1.4em;
    color: #2dc653;
}

#resources p {
    color: #2dc653;
    font-family: "Anta", sans-serif;
    font-size: 1.5em;
}

/* Media Query for Tablet Viewport */
@media screen and (min-width: 728px) {
    
    /* Tablet Viewport: Show tablet-desktop class, hide mobile class */
    .tablet-desktop {
        display: block;
    }

    .mobile {
        display: none;
    }
    
    /* Tablet Viewport: Style rule for header */
    header {
        padding-bottom: 2%;
    }
    
    .btn-neon{
        size: 1.5em;    
    }
    .box, .box-3 {
    display: block;
    max-width: 100%;
    height: auto;
    }

    nav {
     width: 100%
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        width: 100%;
    }

     .btn-neon:hover {
        letter-spacing: 1px;
     }

}