/* dit wordt de navigatie balk shit  */
.topnav{
    overflow: hidden;
    background-color: #333;
    position: relative;
}

/* dit verbergt de navigatie balk, behalve logo en home */
.topnav #myLinks{
   display: none;
   font-size: 200%;
}

/* style navigation menu links */
.topnav a{
    color: white;
    padding: 24px 16px;
    text-decoration: none;
    font-size: 20px;
    display: block;
}

/* style van de hamburger menu */
.topnav a.icon{
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;

}


/* dit is voor wanneer je met de muis over de knop gaat */
.topnav a:hover{
    background-color: grey;
    color:black;
}

/* style van de actieve link, of logo*/
.active{
    background-color: #04AA6d;
    color: white;
    font-size: 200%;
}

/* stukken tekst */
.filler{
    color: white;
    font-size: 120%;
}

h1 {
    font-size: 160%;
    background-color: lightgray;
    margin: 0;
}

/* foto's */
img {
    width: 50%;
}

div .boom{
    width:100%;
}

/* Dit gedeelte is voor de telefoon */
@media(min-width:0px){
    .button_info{
        background: gray;
    }

    .container {
        display: flex;
        justify-content: space-around;
    }
    footer{
        background-color: black;
        color: white;
        font-size: 110%;
    }

    .hyperlink{
        color: black;
        background: black;
        text-decoration: none;
        font-size: 300%;
    }
    .text{
        background: gray;
        padding-top: 18px;
        margin-left: 10px;
        padding-right: 1vw;
    }
    .product{
        background-color: rgb(0, 163, 0);
        color: white;
        font-size: 150%;
        text-decoration: none;
    }
}

/* Dit gedeelte is voor de tablet */
@media(min-width:600px){
    h1 {
        font-size: 160%;
        background-color: lightgray;
    }
    footer{
        background-color: black;
        color: white;
        font-size: 130%;
    }

    .hyperlink{
        color: black;
        background: black;
        text-decoration: none;
        font-size: 400%;
    }
    .text{
        background: gray;
        padding-top: 25px;
        margin-left: 10px;
        font-size: 125%;
        padding-right: 5vw;
    }
    .product{
        background-color: rgb(0, 163, 0);
        color: white;
        font-size: 180%;
    }
    .filler{
        font-size: 160%;
    }
}


/* dit gedeelte is voor de laptop/computer */
@media(min-width:1200px){
    h1 {
        font-size: 175%;
        background-color: lightgray;
    }
    footer{
        background-color: black;
        color: white;
        font-size: 150%;
    }

    .hyperlink{
        color: black;
        background: black;
        text-decoration: none;
        font-size: 500%;
    }
    .text{
        background: gray;
        padding-top: 30px;
        margin-left: 10px;
        font-size: 150%;
        padding-right: 20vw;
    }
    .product{
        background-color: rgb(0, 163, 0);
        color: white;
        font-size: 200%;
    }
    .filler{
        font-size: 200%;
    }
}

/* dit gedeelte blijft hetzelfde bij elke schremgrootte */
footer{
    background-color: black;
    color: white;
}

header{
    padding-bottom: 30px;
}