body, html {
    width: 100vw;
    height: 100vh;
    margin:0;
    padding: 0;
    overflow: hidden;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

* {box-sizing:border-box;}

.container {
    
    height: 100%;
    max-height: 100vh;
    width: 100%;
    background-image: url(/home/img/bomen.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    display: grid;
    grid-column: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    grid-auto-flow: row;
    grid-template-areas: 
        "header header header"
        "natuur wandelen about"
        "footer footer footer";
    justify-content: center;
    align-items: center;
}

h1 {
    grid-area: header;
    height: 80px;
    text-align: center; 
    color: lime;
    width: 100%;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    padding: 0;
    background-color: transparent;
    z-index: 100;
    position: fixed;
    align-items: center;
    justify-content: center;
    text-shadow:  
    -1px  0 0 #FFFF00,
     1px  0 0 #FFFF00,
     0   -1px 0 #FFFF00,
     0    1px 0 #FFFF00,
    -1px -1px 0 #FFFF00,
     1px -1px 0 #FFFF00,
    -1px  1px 0 #FFFF00,
     1px  1px 0 #FFFF00;
}

#natuur {
    grid-area: natuur;
    width: 20vw;
    height: 30vh;
    border: 4px solid lime;
    border-radius: 25px;
    color: yellow;
    text-shadow:  
    -1px  0 0 #212121,
     1px  0 0 #212121,
     0   -1px 0 #212121,
     0    1px 0 #212121,
    -1px -1px 0 #212121,
     1px -1px 0 #212121,
    -1px  1px 0 #212121,
     1px  1px 0 #212121;
    justify-content: center;
    align-items: center;
    background-image: url(/home/img/bloemen.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    cursor: pointer;
}

#wandelen {
    grid-area: wandelen;
    width: 20vw;
    height: 30vh;
    border: 4px solid lime;
    border-radius: 25px;
    color: yellow;
    text-shadow:  
    -1px  0 0 #212121,
     1px  0 0 #212121,
     0   -1px 0 #212121,
     0    1px 0 #212121,
    -1px -1px 0 #212121,
     1px -1px 0 #212121,
    -1px  1px 0 #212121,
     1px  1px 0 #212121;
    justify-content: center;
    align-items: center;
    background-image: url(/home/img/marterhaar.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    cursor: pointer;
}

#about {
    grid-area: about;
    width: 20vw;
    height: 30vh;
    border: 4px solid lime;
    border-radius: 25px;
    color: yellow;
    text-shadow:  
    -1px  0 0 #212121,
     1px  0 0 #212121,
     0   -1px 0 #212121,
     0    1px 0 #212121,
    -1px -1px 0 #212121,
     1px -1px 0 #212121,
    -1px  1px 0 #212121,
     1px  1px 0 #212121;

    justify-content: center;
    align-items: center;
    background-image: url(/home/img/ik1.1.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    cursor: pointer;
}

#natuur:hover {
    border: 4px solid yellow;
}

#wandelen:hover {
    border: 4px solid yellow;
}

#about:hover {
    border: 4px solid yellow;
}

footer {
    grid-area: footer;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: lime;
}



@media only screen and (max-width:768px) {
    .container {
    position: relative;
    min-height: calc(100 * var(--vh));
    max-height: calc(100 * var(--vh));
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-rows: calc(25 * var(--vh)) calc(25 * var(--vh)) calc(25 * var(--vh));
    row-gap: 10px;
    
    grid-template-areas: 
        "natuur"
        "wandelen"
        "about";
        
    /*align-items: center;*/
    justify-content: center;
    }

    #header {display:none;}

    #natuur, #wandelen, #about {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80vw;
        height: 100%;
        /*min-height: calc(20 * var(--vh));
        max-height: calc(20 * var(--vh));*/
        margin: 0 auto;
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
       
    }

    #natuur {margin-top: 20px;}
    h1 {display: none;}

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw; 
        text-align: center;
        background-color: transparent;
        color: yellow;
    }
}