/* Font for enitre page */
body {
    font-family: 'Quicksand', sans-serif;
}

/* No links have decoration */
a {
    text-decoration: none;
}

/* Flex container */
#splash {
    display: flex;
    height: 87vh;
    flex-direction: column;
}

/* Which location were you looking for? */
#splash-top {
    margin: auto;
    text-align: center;
    font-weight: 100;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Image link class */
.splash-image {
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    height: 40%;
    transition: opacity .3s linear;
}

/* First image container */
#splash-image-1 {
    background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('../images/lunenburg.jpg');
    background-size: cover;
    width: 100%;
    background-position: center;
}

/* Change opacity on hover */
#splash-image-1:hover {
    opacity: .7;
}

/* Center text */
.splash-body {
    margin: auto;
}

/* Format text */
.splash-body h1 {
    color: white;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
	             0px 8px 13px rgba(0,0,0,0.1),
	             0px 18px 23px rgba(0,0,0,0.1);
    text-align: center;
    margin: auto;
}

/* Resteraunt name */
.splash-body h1:first-of-type {
    font-size: 50px;
}

/* Second image container */
#splash-image-2 {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('../images/fitchburg.jpg');
    margin-top: 5px;
}

/* Change opacity on hover */
#splash-image-2:hover {
    opacity: 0.7;
}

/* Make all links the size of the image */
.splash-image a {
    width: 100%;
    display: flex;
}

/* Separate containers */
#separator {
    height: auto; 
    width: auto; 
    max-width: 30px; 
    max-height: 30px;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
}