body{margin: 0;
padding: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 17px;
height: 200px;
background: url(https://image.freepik.com/free-vector/blue-wave-background-pattern_40555-107.jpg);
line-height: 1.4em;
color: black;
text-align: center;}

a:visited{
    color:white;
text-decoration: none;
  }
a:link { color: white;
text-decoration: none;}

.topnav {color: white;
background-color:rgb(67, 170, 214);
text-align:cente;
font-family: 'Times New Roman', Times, serif;
font-size: 17px;
display: flex
 }


.img-reisverhalen{
    border: 4px rgb(67, 170, 214); 
    border-radius: 10px;
    border-style: groove ;
    }

.topnav a {
color: white;
font-size: large;
font-family: monospace;
text-decoration: none;
list-style: none;
overflow: hidden;
padding: 10px 20px;
left:0px;
width: 100%;
}

button{background-color: rgb(67, 170, 214);
font-size: 20px;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-decoration: none;
display: flexbox;
text-align: center;
border: none;
padding: 10px;
border-radius: 50%;
border-style: 3px groove white;

}
button:hover {background-color:rgb(67, 170, 214);}

button:active {
    background-color:rgb(67, 170, 214);
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
ul a:hover{  
    background-color: #B3C7D6FF;
}
.active {background-color:#B3C7D6FF}

h3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
} 

     .box{
        color:white;
        background-color:rgb(67, 170, 214);
        margin: 20px 20px 20px 600px ;
        padding: 20px;
        width: 300px;
        border: 3px solid black;
        border-radius: 5px;}
.box1{
    float: left;
    margin: 110px 110px 50px 30px;
    padding: 20px;
    background-color:rgb(67, 170, 214);
    color: white;
border: 3px solid black;
border-radius: 5px;}

.box2{
float: right;
margin: 110px 110px 50px 30px;
padding: 20px;
background-color: rgb(67, 170, 214);
color: white;
border: 3px solid black;
border-radius: 5px;}

#button1 {position: fixed;
top: 540px;
left: 50px;
color: rgb(67, 170, 214);
text-decoration: none;
font-size: 15 px;
padding: 12px;
margin: 28px;
border-radius: 40%;
border-style: solid;
border-color: rgb(7, 7, 7);
}

.button1 a:hover{background-color: #B3C7D6FF;
color:cornsilk;}
/*naar benden */
#button2 { position: fixed;
    top: 460px;
    left: 40px;
    color: rgb(67, 170, 214);
    text-decoration:none;
    font-size: 15 px;
    padding: 12px;
    margin: 28px;
    border-radius: 40%;
    border-style: solid;
    border-color: rgb(7, 7, 7);
}
    

    .button2 a:hover{background-color: #B3C7D6FF;
        color:cornsilk;}

        .footer{
            background-color:  rgb(67, 170, 214);
            color: white;
            padding: 10px;
        }
        @media (max-width: 480px) {}