body{
    font-family: 'Nunito', sans-serif;
    color: #0e5628;
    background-color: #6fadf9;
    padding:0px;
    margin:0px;
}
#mobileHeader{
    display: none;
}
#left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #6fadf9;
    background-size: contain;
    background-position: top , bottom ;
    background-image: url('/img/logo_SCU_blue_edges2.png') , url('/img/lucht5.png') ;
    background-repeat: no-repeat , no-repeat;
    min-height: 100vh ;
    min-height: 100dvh ;
    width: 200px;
}
#right{
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f4f4f4;
    height: 100vh;
    height: 100dvh;
    background-size: cover;
    background-repeat: no-repeat;    
}
#right.Doel{
    background-image: url('/img/IMG_2362.JPG');
}
#right.Wat{
    background-image: url('/img/IMG_2338.JPG');
}
#right.Wie{
    background-image: url('/img/IMG_2352.JPG');
}
#content{
    width:40%;
    min-width: 370px; 
    background-color: #c6e49e;
    opacity:0.8;
    border-radius: 20px;
    margin:20px;
    padding:20px;
}
#content.Wat{
    margin-left: auto;
    margin-right: 20px;
}
H2{
    font-weight: bold;
}
a{
     color: #0e5628;   
}
.navButton{
    width:fit-content;
    margin-left:auto; 
    margin-right: 0px; 
    margin-bottom:5px;  
    padding:3px;
    text-align:right;
    background-color:#c6e49e; 
    color: #0e5628;
    border:2px solid #0e5628;
    border-width: 2px 0px 2px 2px; 
    border-radius:5px 0px 0px 5px;
}
.navButton:hover{
    background-color:#e5f4ed ;
    cursor: pointer;
}
.navButton > a{
    text-decoration: none;
    color: #0e5628;
}
.downloadButton{
    font-size: 1em;
    width:fit-content;
    padding:3px;
    margin-bottom: 3px;
    background-color:#c6e49e; 
    color:#227342;
    border:2px solid #227342;
    border-width: 2px; 
    border-radius:5px;
}
.downloadButton:hover{
    background-color:#e5f4ed ;
    cursor: pointer;
}
.downloadButton > a{
    text-decoration: none;
    color: #0e5628;
}
.portret{
    width:100px;
    float:right;
    margin-left:10px;
}


@media only screen and (max-width: 657px) , (max-height: 470px){
    /*768px*/
    #mobileHeader{
        display:flex;
        justify-content: space-between;
    }
    .navButton{
        margin-right: 20px;
        border-radius: 5px;
        border-width:2px;
    }
    #left{
        display:none;
    }
    #right{
        height: calc(100vh-200px);
        height: calc(100dvh-200px);
        background-color: #6fadf9;
        background-size:contain;
        background-position: bottom ;
        background-repeat: no-repeat
    }
    #right.Doel{
         background-image: url('/img/lucht5.png');
    }
    #right.Wat{
         background-image: url('/img/lucht5.png');
    }
    #right.Wie{
         background-image: url('/img/lucht5.png');
    }
    #content{
        width:auto;
        min-width:auto;
        margin:0px 20px 150px 20px;
    }
    #content.Wat{
        width:auto;
        min-width:auto;
        margin:0px 20px 150px 20px;
       
    }


}