/* css for all pages: */
body {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    font-size: 12.5pt;
}

.picture {
    display: flex;
}

.picture img {
    position: absolute;
    top: 0;
    right: 7.5%;
    height: 160px;
    border: 8px solid #FFF;
}

header {
    background-color: rgb(245, 70, 255);
    display: flex;
    flex-direction: column;
    line-height: 1.25rem;
    padding-left: 0.25rem;
}

#home nav {
    font-size: 1.5rem;
}

#home .about {
    display: flex;
    flex-direction: column;
    background-color: rgb(224, 203, 183);
    color: #000;
    line-height: 1rem;
    padding-left: 0.25rem;
}

#home .options {
    position: relative;
    width: 100%;
    
}
#home .options img{
    width: 99%;
    padding: 3px;
}

#home .list {
    position: absolute;
    top: 0;
    color: #000;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
    color: #000000;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    padding-left: 0.25rem;
    line-height: 1.5rem;
}

#home footer {
    position: absolute;
    bottom: -125px;
    color: #000000;
    width: 100%;
    padding-left: 0.25rem;
}

footer span {
    background-color: rgb(236, 225, 223);
    display: flex;
    flex-direction: column;
}

/* specific #trails css: */
#trails header {
    background-color: rgb(250, 237, 202);
}

#trails h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
}

#trails .about li {
    /* clear: right; */
    background-color: rgb(208, 229, 255);
    color: #000;
}

#trails .about img {
    float: right;
    /* top: 0;
    right: 7.5%; */
    height: 160px;
    border: 8px solid #FFF;
}

#trails body {
    content: "";
    background: url("image1.jpg") no-repeat center bottom local;
    background-size: 85%;
}

#trails footer p {
    background-color: rgb(240, 240, 220);
}