/* algemene styling */
*{
margin: 0;
max-width: 375px;
}
body{
    background-color: #56BC7A;
    margin-bottom: 69px;
    font-family: "spirits-neutral", serif;
}
main{
    background-image: url(images/fietsenidbuurt.png);
    background-repeat: no-repeat;
    background-position: center top;
    margin-bottom: 30px;
    margin-top: 13px;
}
.topimg{
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* styling voor homepagina */
.huren{
    background-color:#0F1011;
    display: flex;
    justify-content: center;
}
.huren div{
    background-color: #3BBA93;
    padding: 25px 20px;
}
.huren a{
    animation: backgroundchange 2s infinite;
    font-weight: 900;
    color:#3BBA93;
    background-color:#0F1011;
    text-decoration: none;
    font-size: 3em;
    padding: 10px 75px;
    border-radius: 20px;
}
@keyframes backgroundchange {
    0% {
        background-color: #0F1011;
        color: #3BBA93;
    }
    50% {
        background-color: #03624C;
        color: #F4FAFA;
    }
    100% {
        background-color: #0F1011;
        color: #3BBA93;
    }
}
.homepage{
    background-color: #0F1011;
    margin: 0 42px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.homepage p{
    font-family: "basic-sans", sans-serif;
    color: #F4FAFA;
    text-align: center;
}
.homepage h1{
    background-color:#3BBA93;
    font-size: 3em;
    padding: 10px 33px;
    margin: 46px 0 20px 0;
    border-radius: 20px;
}
.homepage img{
    margin-top: 36px;
}

/* styling voor hurenpagina */
.fb{
    height: 100px;
    color:#3BBA93;
    margin: auto;
    display: flex;
    font-size: 50px;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    line-height: 30px;
    padding-top: 70px;
    padding-bottom: 15px;
}
h1 span{
    font-size: 20px;
}
.fietsbuurt{
    background-color:#0F1011;
    display: flex;
    justify-content: center;
    padding-bottom: 27px;
    margin: 0 43px;
}
.huurfiets{
    background-color:#0F1011;
    display: flex;
    justify-content: center;
}
.huurfiets div{
    background-color: #3BBA93;
    padding: 25px 20px;
}
.huurfiets a{
    font-weight: 900;
    color: #F4FAFA;
    background-color:#0F1011;
    text-decoration: none;
    font-size: 3em;
    padding: 10px 23px;
    border-radius: 20px;
}
.stopwatch{
    background-color: #0F1011;
    margin: 0 42px;
    padding: 5px 26px 15px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stopwatch h2{
    font-family: "spirits-neutral", serif;
    font-weight: 300;
    font-style: normal;
    color:#F4FAFA;
    font-size: 4em;

}
.stopwatch p{
    font-family: "basic-sans", sans-serif;
    color: #F4FAFA;
}

/* styling voor faqpagina */
.faq{
    height: 100px;
    color:#3BBA93;
    display: flex;
    font-size: 50px;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding-top: 50px;
}
.faqlinks{
    background-color:#0F1011;
}
.faqlinks div{
    background-color: #3BBA93;
    padding: 15px 20px 25px 20px;
    margin: 0px 42px;
}
.faqlinks h2, .faqlinks h4{
    font-family: "albiona", sans-serif;
    font-size: 1.25em;
    margin-bottom: 10px;
}
.faqlinks p{
    font-family: "basic-sans", sans-serif;
    font-size: 0.85em;
    line-height: 13pt;
}
.faqrechts{
    background-color: #0F1011;
    padding: 25px 20px;
    margin: 0px 42px;
}
.faqrechts h3, .faqrechts h5{
    font-family: "albiona", sans-serif;
    font-size: 1.25em;
    color:#F4FAFA;
    text-align: right;
    margin-bottom: 5px;
}
.faqrechts p{
    font-family: "basic-sans", sans-serif;
    font-size: 0.85em;
    line-height: 13pt;
    color: #F4FAFA;
    text-align: right;
}

/* styling voor footer en navigatibalk */
footer{
    background-color: #0F1011;
    display: flex;
    justify-content: space-between;
}
footer ul{
    color: #F4FAFA;
    list-style-type: none;
    font-family: "basic-sans", sans-serif;
    font-size: 0.5em;
    padding: 0;
    margin: 20px 0 20px 20px;
}
footer img{
    margin: 25px 20px 25px 0;
}
nav{
    background-color: #0F1011;
    display: flex;
    justify-content: space-around;
    padding: 7px 0;
    position:fixed;
    bottom: 0;
    width: 100%;
}
nav ul{
    display: flex;
    align-items: center;
    list-style-type: none;
    padding: 0;
}
nav a{
    font-size: 1.6em;
    color: #F4FAFA;
    text-decoration: none;
    margin: 0 17px;
}
nav a mark{
    color: #3BBA93;
    background-color: #0F1011;
}
nav img{
    margin: 0 17px;
}