/* ---------- main page body and headers styles :) -----*/
body{
    margin: 0;
    background-color: #98b79a; 
    font-family: 'Tahoma', sans-serif;
}

.siteHeader{
    text-align: center;
    border-bottom: 1px solid #600c03;

}

/* grid style */
.gridd{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem 1.5rem;
    padding: 10px;
}

/* grid item style */
.frontImage{
    position: relative;
    overflow: hidden;
    border: 1px solid #600c03;
    border-radius: 4px;
}
.frontImage img {
    width: 100%;
    height: auto;
    display: block;
}
/* caption style */
.caption{
    position:absolute;
    bottom: 0;
    left: 0;
    right:0;
    background-color:#ffdcee;
    border: 1px solid #600c03;
    color: #011005;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease
}
/*captions for hovering*/
.frontImage:hover .caption {
    transform: translateY(0);
}
/*----------------Gallery pages-----------------*/
.galleryGridd{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem 1.5rem;
    padding: 10px;
}

.galleryImage{
    position: relative;
    overflow: hidden;
    border: 1px solid #600c03;
    border-radius: 4px;
} 
.galleryImage img {
    width: 100%;
    height: auto;
    display: block;
}
.description{
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 1rem;
    color:#1f0209;
}
.subSiteHeader{
    text-align: right;
    color:#1f0209;
}
.buttonGridd{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 200px));
    gap: 1.5rem 1.5rem;
    padding: 10px;
}
.home-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffdcee;
    color: #1f0209;
    border: 1px solid #600c03;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}



/* heading styles */
h1{
    font-family: 'Georgia', serif; 
    text-align: center;
    color: #1f0209;
}
h2{
    font-family: 'Georgia', serif; 
    text-align: center;
    color:#380702
}
h3{
    font-family: 'Georgia', serif; 
    text-align: center;
}
h4{
    font-family: 'Georgia', serif; 
    text-align: center;
}
h5{
    font-family: 'Georgia', serif; 
    text-align: center;
}
h6{
    font-family: 'Georgia', serif; 
    text-align: center;
}