/* 905px        Responsive layout for smaller screens */
@media (max-width: 1005px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
padding-bottom: 2rem;
margin-bottom: 2rem;
}
h1{ 
float: left;
padding: 2.5rem 0rem 0rem 2rem;
margin: 2.5rem 0rem 0rem 2rem;
font-size: 2rem;
color: rgb(250,250,250);
}
h2{font-size: 110%;}
.narrative{
margin: 6rem 1rem 0rem 1rem;
padding: 3rem .5rem 0rem .5rem;
}

.nav-btn.left {
left: 5px;
top: 200px;}
.nav-btn.right {
right: 5px;
top: 200px;}


footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(250,250,250);
font-weight: 300;
padding: .5rem;}
#background-image {
/*background-size:cover;*/
background-position:center;}}


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* 768px        Responsive layout for smaller screens */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
padding-bottom: 2rem;
margin-bottom: 2rem;
}
h1{ 
float: left;
padding: 2.5rem 0rem 0rem 2rem;
margin: 2.5rem 0rem 0rem 2rem;
font-size: 2rem;
color: rgb(250,250,250);}
h2{
font-size: 110%;}
.narrative{
margin: 6rem 1rem 0rem 1rem;
padding: 3rem .5rem 0rem .5rem;}

.nav-btn.left {
left: 5px;
top: 200px;}
.nav-btn.right {
right: 5px;
top: 200px;}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(250,250,250);
font-weight: 300;
padding: .5rem;
}
#background-image {
/*background-size:cover;*/
background-position:center;
}
}

/* 414px   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX    More specific layout for iPhones */
@media (max-width: 414px) {
.gallery {
grid-template-columns: 1fr;
padding-bottom: 2rem;
margin-bottom: 2rem;
}
h1{ 
float: left;
padding: 2.5rem 0rem 0rem 2rem;
margin: 2.5rem 0rem 0rem 2rem;
font-size: 2rem;
color: rgb(250,250,250);
}
h2{font-size: 110%;}
.narrative{
margin: 6rem 1rem 4rem 1rem;
padding: 3rem .5rem 2rem .5rem;
}

.nav-btn.left {
left: 5px;
top: 200px;
}
.nav-btn.right {
right: 5px;
top: 200px;
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(250,250,250);
font-weight: 300;
padding: .5rem;
}
#background-image {
/*background-size:cover;*/
background-position:center;
}
}
/*END     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* 390px   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX    More specific layout for iPhones */
@media (max-width: 390px) {
.gallery {
grid-template-columns: 1fr;
padding-bottom: 2rem;
margin-bottom: 2rem;
}
h1{ 
float: left;
padding: 2.5rem 0rem 0rem 2rem;
margin: 2.5rem 0rem 0rem 2rem;
font-size: 2rem;
color: rgb(250,250,250);
}
h2{font-size: 110%;}
.narrative{
margin: 6rem 1rem 6rem 1rem;
padding: 3rem .5rem 3rem .5rem;
}
.nav-btn.left {
left: 5px;
top: 200px;
}
.nav-btn.right {
right: 5px;
top: 200px;
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(250,250,250);
font-weight: 300;
padding: .5rem;
}
#background-image {
/*background-size:cover;*/
background-position:center;
}
}
/*END     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */