/* Global */
body {
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin:0;
}
.content {
text-align: center;
}
/*HEADER */
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* Navigation */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}

li {
float: left;
}

li a {
display: block;
color: rgb(255, 255, 255);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: rgb(180, 177, 177);
}
/* END OF NAV */
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* General styles for the gallery */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}

.gallery img {
margin: 0.2em;
cursor: pointer;
transition: transform 0.3s;
}

.gallery img:hover {
transform: scale(1.1);
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* Style for the modal */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
padding-top: 3em;
}

.modal-content {
background-color: rgb(255, 255, 255);
text-align: left;
margin: 8% auto;
padding: 2em;
border: 1px solid rgb(0, 0, 0);
width: 60%;
}

.close {
color: #aaa;
float: right;
font-size: 2.8em;
font-weight: bold;
}

.close:hover,
.close:focus {
color: rgb(0, 0, 0);
text-decoration: none;
cursor: pointer;
}

#memberPhoto {
max-width: 100%;
height: auto;
margin: 2em 0;
}

#memberBday {
font-size: 1.6em;
color: rgb(0, 0, 0);
margin-right: 0.2em;
padding-right: 3.2em;
margin-top: 0em;
margin-bottom: 0em;
}
#memberFname {
font-size: 1.6em;
color: rgb(0, 0, 0);
margin-right: 0.2em;
padding-right: 3.2em;
margin-top: 0em;
margin-bottom: 0em;
}

#memberDetails {
font-size: 1.6em;
color: rgb(0, 0, 0);
margin-right: 0.2em;
padding-right: 3.2em;
margin-top: 0em;
margin-bottom: 0em;
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*FOR GRID STYLE*/


[class^='grid-item'] a {
text-decoration: none;
padding: 0;
margin: 0;
text-align: center;
color: rgb(0, 0, 0);
background-color: rgb(255,255,255);
transition: all 0.5s;
}

.grid-header {
display: grid;
align-items: center;
justify-content: center;
height: auto;
text-align: center;
color: rgb(0,0,0);
border: 2px solid rgb(255, 255, 255);
background-color: rgb(255,255,255);
border-radius: 5px;
margin-left: 1em;
padding-bottom: 1em;
}

.grid-header h6 {
margin: 0;
padding: 0;
}



[class^='grid-mod'] a h5 {
margin: 0;
padding: 0;
}

[class^='grid-item'] a:hover {
text-decoration: none;
}

[class^='grid-item'] {
display: grid;
align-items: center;
justify-content: center;
height: auto;
font-size: 0.7em;
color: rgb(0,0,0);
border: 2px solid rgb(79, 79, 83);
border-radius: 5px;
}

/* 4th Great Grandparents */
.grid-mod-1 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em;
grid-template-rows: 2em 2em;
background-color: rgb(255,255,255);
}

/* Children of 4th Great Grandparents */
.grid-mod-2 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns:  11em 11em 11em 11em 11em;
grid-template-rows: 2em 2em 2em 2em;
background-color: rgb(255,255,255);
}
/* 3rd Great Grandparents */
.grid-mod-3 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em;
grid-template-rows: 2em 2em;
background-color: rgb(255,255,255);
}


/* Children of 3rd Great Grandparents */
.grid-mod-4 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em 11em 11em;
grid-template-rows: 2em 2em 2em 2em;
background-color: rgb(255,255,255);
}
/* 2nd Great Grandparents */
.grid-mod-5 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em;
grid-template-rows: 2em 2em;
background-color: rgb(255,255,255);
}

/* Children of 2nd Great Grandparents */
.grid-mod-6 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em 11em 11em;
grid-template-rows: 2em 2em 2em 2em;
background-color: rgb(255,255,255);
}

/* 1st Great Grandparents */
.grid-mod-7 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em;
grid-template-rows: 2em 2em;
background-color: rgb(255,255,255);
}

/* Children of 1st Great Grandparents */
.grid-mod-8 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em 11em 11em;
grid-template-rows: 2em 2em 2em 2em;
background-color: rgb(255,255,255);
}
/* Grandparents */
.grid-mod-9 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em;
grid-template-rows: 2em 2em;
background-color: rgb(255,255,255);
}
/* Children of Grandparents */
.grid-mod-10 {
display: inline-grid;
column-gap: 0.1em;
row-gap: 0.1em;
grid-template-columns: 11em 11em 11em 11em 11em;
grid-template-rows: 2em 2em 2em 2em;
background-color: rgb(255,255,255);
}


/* Footer */
footer {
text-align: center;
color: rgb(0,0,0);
font-weight: 900;
padding-top: 2.5rem;
margin-top: 5rem;
}