.site-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 120px;
    height: auto;
}

/* single image positioning */
.center-image img{
    width: 50%;        /* shrink width to 50% */
    height: 50%;       /* shrink height to 50% */
    display: block;
    margin-left: 25%;  /* keep image slightly left of center */
}

/* navigation menu as vertical list */
.main-nav ul{
    list-style: disc;     /* shows bullet points */
    padding-left: 20px;
    margin: 20px 0;
}

.main-nav li{
    margin-bottom: 8px;   /* space between items */
}

.main-nav a{
    text-decoration: none;
    color: #333;
}

/* navigation link styling */
.main-nav a{
    color: blue;          /* make links blue */
    font-weight: bold;    /* make links bold */
    text-decoration: none;
}

/* optional hover effect */
.main-nav a:hover{
    color: darkblue;
    text-decoration: underline;
}

footer{
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

.footer-links{
    margin-bottom: 10px;
}

.footer-links a{
    margin-right: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #333;
}

.footer-links a:hover{
    color: #8b5a2b;
}

/* footer link styling */
footer a{
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

/* hover effect */
footer a:hover{
    color: darkblue;
    text-decoration: underline;
}

/* footer container spacing */
.footer-links{
    margin: 15px 0;
}

/* footer link button style */
.footer-links a{
    display: inline-block;
    background-color: #e6e6e6;   /* light background */
    color: blue;
    font-weight: bold;
    padding: 8px 14px;
    margin: 4px;
    text-decoration: none;
    border-radius: 8px;          /* rounded rectangle */
}

/* hover effect */
.footer-links a:hover{
    background-color: #d0d0d0;
    color: darkblue;
}

/* Event poster image styling for events.html */
.event-image img {
    width: 80%;          /* makes the image larger than 50% */
    max-width: 900px;    /* prevents it from becoming too big on large screens */
    height: auto;        /* keeps correct proportions */
    display: block;      /* required for margin auto centering */
    margin: 20px auto;   /* centers image horizontally with vertical spacing */
    border: 3px solid #78593a;  /* optional frame for style */
    border-radius: 10px;         /* optional rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* optional subtle shadow */
}

/* Page headers */
h1{
    text-align: center;
    font-size: 36px;
    color: #5a3e2b;
    margin-top: 20px;
}

h3{
    color: #78593a;
    margin-top: 30px;
}

h2{
    color: #78593a;
    margin-top: 25px;
}

/* paragraph text */
p{
    font-size: 18px;
    line-height: 1.6;
    margin: 10px 20px;
}

/* about page list */
ol{
    margin-left: 40px;
    font-size: 18px;
}

ol li{
    padding: 8px 0;
}

/* About page images */
.about1-image img,
.about2-image img{
    width: 75%;        /* display image at 75% of container */
    height: auto;      /* maintain correct aspect ratio */
    display: block;
    margin: 20px auto; /* centers image horizontally */
}

.about2-image img{
    width: 75%;
    height: auto;
    display: block;
    margin-left: 13%;
}

/* Products page images */
.earrings-image img,
.keychains-image img,
.ornament-image img,
.medallion-image img,
.boxdesign-image img,
.smallbox-image img,
.mediumbox-image img,
.largebox-image img{
    width: 50%;        /* reduce image size */
    height: auto;      /* keep correct proportions */
    display: block;
    margin-left: 25%;  /* centers image */
}

/* Contact form container */
.contact-container{
    width: 60%;
    margin: 40px auto;
    padding: 25px;
    background-color: #e6f3ff; /* light blue background */
    border-radius: 10px;
}

/* form field blocks */
.form-group{
    display: block;
    margin-bottom: 20px;
}

/* labels */
.form-group label{
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

/* inputs and textarea */
.form-group input,
.form-group textarea{
    width: 100%;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 5px;
    font-size: 16px;
}

/* button alignment */
.form-button{
    text-align: center;
}

/* send button */
.form-button button{
    padding: 12px 25px;
    font-size: 18px;
    background-color: #78593a;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.form-button button:hover{
    background-color: #5a3e2b;
}

.shaka-image img{
    display: block;
    width: 50%;
    height: auto;
    margin: 20px auto;
}

.venmo-image img{
    width: 35%;
    display: block;
    margin: 20px auto;
}

/* main page container */
#wrapper{
    max-width: 1200px;
    margin: auto;
    padding: 10px;
}

/* mobile navigation */
.main-nav ul{
    list-style: none;
    padding: 0;
}

.main-nav li{
    margin: 10px 0;
}

.main-nav a{
    display: block;
    padding: 10px;
}

/* Media Query for Tablet Viewports */
@media screen and (min-width: 768px){

.main-nav ul{
    display: flex;
    justify-content: center;
}

.main-nav li{
    margin: 0 15px;
}

.center-image img{
    width: 60%;
}

.contact-container{
    width: 70%;
}

}

/* Media Query for Desktop Viewports */
@media screen and (min-width: 1024px){

body{
    font-size: 18px;
}

.main-nav ul{
    justify-content: center;
}

.center-image img{
    width: 40%;
}

.contact-container{
    width: 50%;
}

.event-image img{
    width: 70%;
}

}

/* Media Query for Large Desktop Viewports */
@media screen and (min-width: 1921px){

body{
    background: linear-gradient(#f6eee4, #78593a);
}

#wrapper{
    max-width: 1600px;
}

}