*{box-sizing: border-box;}
body{display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-image: url(../afbeeldingen/branko.jpg);
    background-size: cover;
    
}

nav{
    grid-area: 1/1/2/5; 
    background-color: #baeb8c;
}

nav img{
    float: left;
}

nav a{ font-size: 20px;  padding-right: 5%;color: black; }

nav > a:nth-child(2){
    display: none; 
    color:rgb(0, 0, 255);
}

nav ul li{
    float: left; 
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;

    
}

nav ul li a{
    text-align: center;
    padding: 10px;  
    border: solid #05d212 5px;
    border-radius: 20px;
    text-decoration: none;
}

nav ul li a:hover{
    background-color: aqua;
}

nav ul li a.visited{
    background-color:#b7ff00
    
}




nav ul li {
list-style: none;}

p,h1,h2,a{font-family:Verdana, Geneva, Tahoma, sans-serif;}

p{
    line-height: 20px;
}

img:hover{
    scale: 1.1;
    
}

header{
    grid-area: 2/1/3/5;
    text-align: center;
    font-size:50px;
    padding-left: 2%;
    color: white;
}

footer p{
    font-size: 15px;
    text-align: center;
    color: white;
}

footer a{
    font-size: 15px;
    color: white;
}

footer a:hover{
    text-decoration: none;
}


/*pagina ik*/

#ik{
    background-image: none;
    background-color:beige;
    color: black;
}


#ik nav ul li a{
    color: black;
}


#headerik{
    color: black;
    padding: 20px;
    
    
}


#spanje{
    grid-area: 3/1/4/2;
  }
  


#mainik{
    grid-area: 3/2/4/4;
    padding-left: 2%;
    padding-right: 2%;
    
}


#info{
    background-color: aqua;
    grid-area: 3/4/4/5;
    border-radius: 20px;
    text-align: center;
}



#info h2{
    text-align: center;
    font-size: 30px;
    padding: 10px;
}

#donbosco{
    text-align: center;
    grid-area: 7/4/8/5;
}

#huisdier{
    grid-area: 4/2/5/4;
    text-align: center;
    font-size: 30px;
    padding: 10px;
}

#kat{
    grid-area: 5/2/6/4;
    padding-left: 2%;
    padding-right: 2%;
}
section ul li{
    list-style: none;
}

#noedelsenaiki{
    grid-area: 5/1/6/2;
}


#opleiding{
    grid-area: 6/2/7/4;
    text-align: center;
    font-size: 30px;
    padding: 10px;
}

#uitlegopleiding{
    grid-area: 7/2/8/4;
    padding-left: 2%;
    padding-right: 2%;
}

#coderen{
    grid-area: 7/1/8/2;
}

#footerik{
    background-color: black;
    grid-column: 1/5;
    grid-row-start: 8;
}


/* pagina hobby */

#hobby{
    background-image: none;
    background-color: beige;
    figure{
        padding: 10px;
    }
}

#hobby nav ul li a{
    color: black;
}

#headerhobby{
    color: black;
    padding: 20px;
}

#voetbal{
grid-area: 3/2/4/4;
padding-left: 2%;
padding-right: 2%;
}


#carnaval{
    grid-area: 4/2/5/4;
    padding-left: 2%;
    padding-right: 2%;
    img{
        padding-top: 10px;
    }
    
}



#keeper{
    grid-area: 3/4/4/5;
    
}

#dworp{
    grid-area: 3/1/5/2;
}

#chaar{
    grid-area: 4/4/5/5;
}

#carnavalkostuum{
    grid-area: 4/1/5/2;
}



#footerhobby{
    background-color: black;
    grid-column: 1/5;
    grid-row-start: 5;
}

/* pagina informatie */

#informatie{
    background-image: none;
    background-color: beige;
    h2{
        text-align: center;
        font-size: 30px;
        padding: 20px;
    }

    figure{
        padding: 20px;
    }
}


#informatie nav ul li a{
    color: black;
}

#headerinfo{
    grid-area: 2/1/3/5;
    text-align: center;
    font-size:50px;
    padding: 2%;
    color: black;
}

#app{
    grid-area: 3/2/4/4;
    padding-left: 2%;
    padding-right: 2%;
}



#snap{
    grid-area: 3/1/4/2;
}

#dier{
    grid-area: 4/2/5/4;
    padding-left: 2%;
    padding-right: 2%;
}

#hert{
    grid-area: 4/1/5/2;
}

#lievelingsvak{
    grid-area: 5/2/6/4;
    padding-left: 2%;
    padding-right: 2%;
    
}

#lo{
    grid-area: 6/2/7/4;
    padding-left: 2%;
    padding-right: 2%;
}

#afbeeldinglo{
    grid-area: 6/1/7/2;
}

#development{
    grid-area: 7/2/8/4;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
}

#codering{
    grid-area: 7/1/8/2;
}


#footerinfo{
    background-color: black;
    grid-column: 1/5;
    grid-row-start: 9;
}


@media only screen and (max-width: 480px) {

    body{
        display: grid;
        grid-template-columns: 1fr;  
        row-gap: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgb(100, 99, 99);

    }

    nav{
        grid-area: 1/1/2/2;
        
    }

    nav img{
        float: right;
    }

    nav a:nth-child(2){
        display: block;
        font-size: 30px;
        margin: 20px 50px 20px 20px;
        /*background-color: #89ff5a;*/
    }

    nav ul li{
        width: 100%;
        text-align: left;
    }

    nav ul.menu{
        display: none;
    }

    p{
        line-height: 20px;
    }

    img{
        padding-top: 10px;
    }

    img:hover{
        scale: 1.0;
    }

    footer{
        padding: 10px;
       
    }

 

    #footerbegin{
        grid-area: 3/1/4/2;
    
    }



    #headerik{
        grid-area: 2/1/3/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }


    #spanje{
        margin-left: 10px;
        text-align: center;
    }

    #spanje img{
        float: right;
        width: 55%;
        padding-right: 5px;
        
    }


    #mainik{
        grid-area: 4/1/5/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }

    #info{
        grid-area: 3/1/4/2;
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        padding: 10px;
        
        
        width: 40%;
    }

    #huisdier{
        grid-area: 5/1/6/2;
    }


    #noedelsenaiki{
        grid-area: 6/1/7/2;
        margin-left: 10px;
        text-align: center;
    }

    #kat{
        grid-area: 7/1/8/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }


    #opleiding{
        grid-area: 8/1/9/2;
        float: right;
    }

    #uitlegopleiding{
        grid-area: 9/1/10/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }

    #coderen{
        grid-area: 8/1/9/2;
        margin-left: 10px;
        text-align: center;
        padding-top: 10%;
    }

    #coderen img{
        width: 30%;
        float: left;
    }

    #donbosco{
        grid-area: 8/1/9/2;
        padding-top: 10%;
    }

    #donbosco img{
        width: 40%;
        float: right;
    }


    #footerik{
        grid-area: 10/1/11/2;
    }

    #headerhobby{
        grid-area: 2/1/3/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #voetbal{
        grid-area: 4/1/5/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }

    #carnaval{
        grid-area: 6/1/7/2;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr ;
        
    }

    #carnaval p{
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        grid-area: 1/1/2/4;
    }

    #carnaval img{
      grid-area: 2/2/3/3;
    }

    #dworp{
        width: 50%;
        grid-area: 3/1/4/2;
    }

    #dworp img{
        width: 80%;
        float: left;
    }

    #keeper{
        grid-area: 3/1/4/2;
    }

    #keeper img{
        width: 50%;
        float: right;
        
    }
    
    #chaar{
        grid-area: 5/1/6/2;
        padding-left: 5px;
    }
    
    #chaar img{
        width: 50%;
        float: right;
    }
    
    #carnavalkostuum{
        grid-area: 5/1/6/2;
    }

    #carnavalkostuum img{
        width: 51%;
        float: left;
        padding-right: 5px;
    }
    
    #footerhobby{
        grid-area: 7/1/8/2;
    }

    #headerinfo{
        grid-area: 2/1/3/2;
        text-align: center;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    #app{
        grid-area: 3/1/4/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    
    
    #snap{
        grid-area: 4/1/5/2;
        text-align: center;
        justify-content: center;
        width: 100%;
    }
    
    #dier{
        grid-area: 5/1/6/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    #hert{
        grid-area: 6/1/7/2;
        text-align: center;
    }
    
    #lievelingsvak{
        grid-area: 7/1/8/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        
    }
    
    #lo{
        grid-area: 8/1/9/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    #afbeeldinglo{
        grid-area: 9/1/10/2;
        text-align: center;
    }
    
    #development{
        grid-area: 10/1/11/2;
        background-color: #7cef4f;
        border-radius: 20px;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    #codering{
        grid-area: 11/1/12/2;
        text-align: center;
    }


    
    
    #footerinfo{
        background-color: black;
        grid-area: 12/1/13/2;
    }
}