body {  background-color: rgb(252, 236, 213);
        font-family: Arial, Helvetica, sans-serif;
        line-height: 2em;
}

.allcontent {width: 800px;
            margin: auto;
            background-color: rgb(252, 236, 213);
}


h1 {color:rgb(122, 102, 66);}
h2 {color: rgb(65, 87, 66);}
h3 {color: rgb(65, 87, 66);}
p {color: rgb(76, 108, 79)}

.header {
    text-align: center;
    border-width: thick;
    border-style:double;
    border-color: rgb(122, 102, 66);
    background-color:rgb(224, 207, 165);
    margin-bottom: 30px;
}

.header img {
    border-radius: 8px;
}

.spots {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(81, 116, 84);
    border-width: thick;
    border-style: double;
    border-color: rgb(122, 102, 66);
    background-color: rgb(224, 207, 165);
    width: 250px;
    padding: 0px 20px 20px 20px;
    margin: 0px 20px 20px 10px;
    margin-top: 10px;
    margin-right: 0px;
    margin-left: 30px;
    text-align: center;
    line-height: 1.1em;
    float: right;
}

.spots:hover {
    box-shadow: 0 4px 8px;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.spots img {
    width: 100%;
    border-radius: 8px;
}

.spots img:hover {
    transform: scale(1.05);
}

.mission {
    border-color: rgb(122, 102, 66);
    border-width: 1px;
    border-style: groove;
    background-color: rgb(224, 207, 165);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 325px;
    margin-left: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: rgb(122, 102, 66);
}

a:link{color:rgb(55, 79, 57);}
a:visited {color:rgb(76, 108, 79)}
a:hover {color: rgb(104, 146, 107);
}

.explanation {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(81, 116, 84);
    border-width: thick;
    border-style: double;
    border-color: rgb(122, 102, 66);
    background-color: rgb(224, 207, 165);
    width: 675px;
    padding: 20px;
    margin: 30px auto;
    text-align: center;
    line-height: 1.1em;
}

.explanation:hover {
    box-shadow: 0 4px 8px;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}    

.imagesleft  {
    float: left;
    max-width: 300px;
    margin-left: 40px;
}

.imagesright {
    float: right;
    max-width: 300px;
    margin-right: 40px;
}

.imagesleft img:hover {
    transform: scale(1.05);
}

.imagesleft img {
    width: 100%;
    border-radius: 8px;
}

.imagesright img:hover {
    transform: scale(1.05);
}

.imagesright img {
    width: 100%;
    border-radius: 8px;
}

.name {
    border-width: 1px;
    border-style: groove;
    border-color: rgb(122, 102, 66);
    background-color: rgb(224, 207, 165);
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    text-align: center;
    margin-right: 325px;
    margin-left: 0px;
    margin-top: 25px;
}