#wrapper { 
  max-width: 600px; 
  text-align:left; 
  margin: 0 auto; 
}

.big-text { font-size:125%; }

h1, h2, p, ul { font-family: 'Oswald', sans-serif; }

#about-me img { max-width:200px; }

#contact-info {
  background:lightgreen url(https://lh6.googleusercontent.com/ojfKRYARo5_58wwdeskulvUdQHogKggD9hkkYMxxQcUdQjn8chQwr2XELKks5Dmt9xrOms8aA9jbVciSUKWSe3n64wv9EWHhaEiUsn-5pDJAnNJMsBGI7E3G1E3Cb7G0Lw=w1280) no-repeat 1rem 1rem;
  background-size:300px;
  height:300px;
  padding:1rem;
  border:2px solid green;
  margin:0 auto;
  margin-bottom:2rem;
}


/* Geoffrey's style  code for the 'explore sur' pages */
body, html{
height:100%;}

.walking-tour-bg-1 {
background-image:url("https://digitalprojects.binghamton.edu/files/original/a921903bf6391311949266d1f8a9d62aea22799e.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;}

.quote-img{
    display: block;
    position: static;
    max-width: 100%;
    max-height: 100%;;

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

.continue{
position: absolute;
width: auto;
top: 68%;
left: 39%;
z-index: 2;}

.quote-1{
position: absolute;
width: auto;
height: auto;
top: 25%;
left: 39%;
z-index: 3;}

.quote-2{
position: absolute;
width: auto;
height: auto;
top: 45%;
left: 45%;
z-index: 3;} 

.quote-3{
position: absolute;
width: auto;
height: auto;
top: 75%;
left: 36%;
z-index: 3;} 

.walking-tour-bg-2{
background-image:url("https://digitalprojects.binghamton.edu/files/original/16f3b8ad530d59b2fa0ba9faad97ece84eba9903.png");
height: 100%;
background-position:center;
background-repeat: no-repeat;
background-size: cover;}

.continue-2{
position: absolute;
width: auto;
top: 52%;
left: 53%;
z-index: 2;}

.quote2_1{
position: absolute;
top: 25%;
left: 63%;
z-index: 3;}   

.quote2_2{
position: absolute;
top: 25%;
left: 15%;
z-index: 2;}

.walking-tour-bg-7{
background-image:url("page_7.jpg");
height: 100%;
background-position:center;
background-repeat: no-repeat;
background-size: cover;}

.overlay {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Tahoma', sans-serif;
text-align:center;
font-size: 14px;
margin-top: 0.25em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;}

.overlay-blur {
backdrop-filter: blur(5px);}
       
.overlay> * {
transform: translateY(-20px);
transition: transform 0.25s;}

.overlay:hover {
opacity: 1;}

.overlay:hover > * {
transform: translateY(0);}