body {
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-size: 17px;
}
.text {
    margin: 30px;
}
header {
    position: relative;
    background-color: #FFE896;
    width: auto;
    height: 140px;
    margin-bottom: 30px;
}
header h2 {
/* clever way I found to center the title in the header (https://www.w3.org/Style/Examples/007/center.en.html) */
    margin: 0px;
    margin-left: 160px;
    position: absolute;               
    top: 50%;                         
    transform: translate(0, -50%)
}
header img {
/* same as title, different margin; may be a better way of doing this */
    margin: 0px;
    margin-left: 15px;
    position: absolute;               
    top: 50%;                         
    transform: translate(0, -50%)
}
.menu { 
    text-align: right;
    margin-right: 15px;
}
.menu a {
    color: black;
    text-decoration: none;
    font-size: 20px;
}
.menu a:hover{
    color: rgb(172, 172, 172);
}
.menu ul {
/* remove bullets from menu */
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
/* make menu horizontal */
    display: inline;
}
.menu p {
    display: inline;
}
.images_container {
/* for three centered images */
    width: 100%;
    display: flex;
    justify-content: center;
}
.images_container img {
/* adjust margin with page width */
    margin-left: auto;
    margin-right: auto;
}
.yellow_section {
    height: 290px;
    width: auto;
    justify-content: center;
    background-color: #FFE896;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.slider-container {
/* container for image slider */
    width: 50vw;
    margin: 0 auto;
    height: 40vw;
    max-width: 80rem;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background:#FFE896;
    display: grid;
    place-items: center;
    transition: all 0.25s ease-in-out;
    text-align: center;
}
.slide-img {
    height: 40vw;
    object-fit: cover;
}
.btn-container {
/* next and prev buttons */
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}
input[type=text] textarea {
    width: 100%;
    align-content: left;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}
@keyframes spinning {
    from { 
        transform: rotate(0deg) 
    }
    to { 
        transform: rotate(360deg) 
    }
}
.spin {
    animation-name: spinning;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}