ul li {
    list-style: none;
    float: right;
    margin-right: 100px;
    margin-top: 30px;
    font-size: 20px;



}

a {
    text-decoration: none;
    color: white;



}

nav {
    background-color: black;

    height: 100px;

    img {
        width: 80px;

        margin-left: 5px;
        margin-top: 10px;
        float: left;
        overflow: hidden;
    }


}

.strepen {
    display: none;
}

#home {
    article {


        grid-template-columns: 1fr 1fr 1fr;
        background-image: url(../afbeeldingen/foto\ otto.jpeg);
        height: 500px;
        margin-top: 20px;

    }

    article p {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 70px;
        margin-top: 380px;
        margin-left: 30px;
        color: white;
        float: left;
    }

    section {
        font-size: 20px;
        text-align: center;
        margin-top: 40px;
        background-color: brown;
        color: white;
        height: 100px;

    }

    section p {
        margin-top: 10px;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        margin-top: 40px;
        background-color: dimgray;
        color: white;


    }

    main h3:nth-child(1) {
        grid-column: 2/3;
        margin-bottom: 15px;
        margin-top: 10px;
        font-size: 30px;

    }

    main h4:nth-child(2) {
        grid-row: 2/3;
        grid-column: 2/3;

    }

    main p:nth-child(3) {
        grid-row: 3/4;
        grid-column: 2/3;
    }

    main h4:nth-child(4) {
        grid-row: 4/5;
        grid-column: 2/3;
    }

    main p:nth-child(5) {
        grid-row: 5/6;
        grid-column: 2/3;
    }

    main h4:nth-child(6) {
        grid-column: 3/4;
        grid-row: 2/3;
    }

    main p:nth-child(7) {
        grid-column: 3/4;
        grid-row: 3/4;
    }

    main h4:nth-child(8) {
        grid-column: 3/4;
        grid-row: 4/5;
    }

    main p:nth-child(9) {
        grid-column: 3/4;
        grid-row: 5/6;
    }
}

#papa {
    main {
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 80px 120px 1fr 1fr;
        background-color: black;
        color: white;
        margin-top: 10px;
    }

    main p:nth-child(1) {
        margin-top: 20px;
        font-size: 30px;
        grid-column: 1/4;
        grid-row: 1/2;
    }

    main p:nth-child(2) {
        font-size: 50px;
        grid-column: 1/4;
        grid-row: 2/3;
        font-family: copperplate gothic bold;
    }

    main img:nth-child(3) {
        width: 450px;
        grid-column: 1/2;
        grid-row: 3/4;
        margin: 10px;
    }

    main img:nth-child(4) {
        width: 450px;
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 10px;
    }

    main img:nth-child(5) {
        width: 450px;
        grid-column: 3/4;
        grid-row: 3/4;
        margin: 10px;
    }

    main img:nth-child(6) {
        width: 450px;
        grid-column: 1/2;
        grid-row: 4/5;
        margin: 10px;
    }

    main img:nth-child(7) {
        width: 450px;
        grid-column: 2/3;
        grid-row: 4/5;
        margin: 10px;
    }

    main img:nth-child(8) {
        width: 450px;
        grid-column: 3/4;
        grid-row: 4/5;
        margin: 10px;
    }
}

#hobby {
    #auto {
        margin-top: 20px;
        background-image: url(../afbeeldingen/rs63.jpg);
        height: 600px;
        font-size: 90px;
        color: white;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

        p {
            margin-top: 300px;
            float: left;
            margin-left: 600px;

        }
    }

    main article:nth-child(1) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 80px 1fr;
        background-color: brown;
        margin-top: 10px;
        height: 700px;
        margin-bottom: 20px;
    }

    main article:nth-child(1) img {
        width: 450px;
        grid-row: 2/3;
        align-content: center;
    }

    main article p:nth-child(1) {
        grid-column: 1/4;
        font-size: 30px;
        text-align: center;
        color: white;

    }

    main article img:nth-child(2) {
        margin-left: 20px;
    }

    main section:nth-child(2) {
        text-align: center;
        background-color: orangered;
        height: 1300px;
        color: white;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 1fr 1fr;
        font-size: 30;
    }

    main section:nth-child(2) p:nth-child(1) {
        font-size: 90px;
        margin-top: 50px;
        text-align: center;
        grid-column: 1/3;
        grid-row: 1/2;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

    }

    main section:nth-child(2) p:nth-child(2) {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    main section:nth-child(2) img:nth-child(3) {
        width: 500px;
        grid-column: 1/2;
        grid-row: 3/4;
        margin-bottom: 50px;
    }
}

#hond {
    article {
        background-image: url("../afbeeldingen/hond.jpg");
        height: 700px;

        margin-top: 20px;
        
        p {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 90px;
            float: left;
            margin-top: 35%;
            margin-left: 5%;
            color: white;
        }

    }

    main p {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 25px;
        margin-top: 20px;
        margin-left: 40px;
        text-align: center;



    }
}

@media only screen and (max-width:480px) {
    nav {
        a:nth-child(1) {
            display: block;
            font-size: 30px;
            padding: 20px 50px 20px 20px;
            background-color: black;
        }

        ul.dicht {
            display: none;
        }

        img {
            width: 50px;
            margin-right: 15px;
            margin-bottom: 10px;
            float: right;
        }

        ul li {
            width: 100%;
            text-align: left;
            float: none;
            margin: 0;
        }
    }

    #hobby {
        #auto {
            display: none;
        }

        main article:nth-child(1) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            height: 300px;
            width: 100%;

            p:nth-child(1) {
                font-size: 15px;
                margin-left: 5%;
                margin-right: 5%;
                margin-top: 5%;
            }

            img:nth-child(2) {
                grid-column: 1/2;
                width: 100%;

            }

            img:nth-child(3) {
                grid-column: 2/3;
                width: 100%;

            }

            img:nth-child(4) {
                grid-column: 3/4;
                width: 100%;

            }
        }

        main section:nth-child(2) {
            display: grid;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-columns: 1fr;
            text-align: center;

            p:nth-child(1) {
                font-size: 70px;
                grid-row: 1/2;
                grid-column: 1/2;
            }

            p:nth-child(2) {
                font-size: 20px;
                grid-row: 2/3;
                grid-column: 1/2;
            }

            img:nth-child(3) {
                grid-row: 3/4;
                grid-column: 1/2;
                width: 100%;
            }

            img:nth-child(4) {
                grid-row: 4/5;
                grid-column: 1/2;
                width: 100%;
            }

            p:nth-child(5) {
                font-size: 20px;
                grid-row: 5/6;
                grid-column: 1/2;
                margin-top: 15px;
            }
        }

    }

    #papa {
        main {
            text-align: center;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            background-color: black;
            color: white;
            margin-top: 10px;
            justify-items: center;
            width: 100%;
        }

        main p:nth-child(1) {
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 10px;
            font-size: 25px;
            grid-column: 1/2;
            grid-row: 1/2;
        }

        main p:nth-child(2) {
            font-size: 40px;
            grid-column: 1/2;
            grid-row: 2/3;
            font-family: copperplate gothic bold;
        }

        main img:nth-child(3) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 3/4;
            margin: 10px;
        }

        main img:nth-child(4) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 4/5;
            margin: 10px;
        }

        main img:nth-child(5) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 5/6;
            margin: 10px;
        }

        main img:nth-child(6) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 6/7;
            margin: 10px;
        }

        main img:nth-child(7) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 7/8;
            margin: 10px;
        }

        main img:nth-child(8) {
            width: 200px;
            grid-column: 1/2;
            grid-row: 8/9;
            margin: 10px;
        }
    }
}