/*Navbar*/
nav{
    position: fixed;
    top: 0;
    width: 100%;
}
ul{
    list-style-type: none;
    margin:0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(186, 24, 24);
    
}
li{
    float:left;
    width: 20%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
li a {
    display: block;
    color:  white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
li a:hover{
    background-color: red;
}
.active{
    background-color: red;
}
@media only screen and (max-width: 390px) {
    ul.topnav{
        display: none;
    }
    li{
        float: none;
        width: 100%;
    }
    nav{
        position: sticky;
    }
}
@media only screen and (min-width: 390px){
    .icon{
        display: none;
    }
}
body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: beige;
}
/*Footer*/
.footer {
    background-color: rgb(213, 97, 97);
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: 5em;
    text-align: center;
}
#p2.footer{
    margin-top: 3em;
}
#p3.footer {
    margin-top: 8em;
}
#p4.footer{
    margin-top: 3em;
}
#p5.footer{
    margin-top: 3em;
}
/*Images*/
img{
    width: 25%;
    height: auto;
}
.img1 {
    width: 50%;
    height: auto;
    float: left;
    margin: 2em 0.5em 0.5em 1em;
    background-color: rgb(213, 97, 97);
}
.img2{
    float: left;
    margin: 1em 0.5em 0.5em 0.5em;
}
.img3{
    margin-left: 33%;
    margin-top: -40%;
    margin-right: 0;
}
.divline{
    background-color: rgb(213, 97, 97);
    width: 100%;
    padding-top: 2em;
    margin-top: 13em;
}
#p2.divline{
    margin-top: 2.3em;
}
#p22.divline{
    margin-top: 2.3em;
}
#p3.divline{
    margin-top: 2.3em;
}
#p32.divline {
    margin-top: 2.3em;
}
#p4.divline{
    margin-top: 2.3em;
}
#p42.divline{
    margin-top: 2.3em;
}
#p5.divline{
    margin-top: 2.3em;
}
#p52.divline{
    margin-top: 2.3em;
}
.fabianpolitiekfoto, .copyright, .reviewfoto1, .tutorial1, .luukpolitiekfoto, .luukecoautfoto, .reviewfoto2, .tutorial2, .reviewfoto3, .sampolitiekfoto, .samauteurfoto, .tutorial3{
    float: left;
    margin: 3em 0.5em 0.5em 0.5em;
    width: 20%;
}
.politiekdenhaag, .copyright2, .copyright3, .luukecoautofoto2, .samauteurfoto2{
    float: left;
    margin-left: 0.5em;
    margin-top: -9em;
    margin-right: 4em;
    width: 20%;
}
.samauteurfoto2{
    margin-top: -16em;
}
.copyright2{
    margin-top: -37em;
}
.copyright3{
    margin-top: -28em;
}
.luukecoautofoto2 {
    margin-top: -28em;
}
/*Text*/
.kop1{
    padding-top: 5em;
}
.kop2{
    padding-top: 2em;
}
.kop3{
    float: right;
    margin-top: -12%;
    margin-right: 6%;
    padding-top: 1.5em;
}
.fabianpolitiekkop, .copyrightkop, .reviewkop1, .tutorialkop1, .luukpolitiekkop, .luukecoautkop, .reviewkop2, .tutorialkop2, .reviewkop3, .sampolitiekkop, .sameconomiekop, .tutorialkop3{
    padding: 1.5em;
}
.fabianpolitiektext, .copyrighttext, .reviewtext1, .luukpolitiektext, .luukecotext, .reviewtext2, .reviewtext3, .sameconomietext, .tutorialtextsam, .tutorialtextluuk, .tutorialtextfabian{
    margin-top: -4%;
    margin-left: 21%;
}
@media only screen and (max-width: 390px){
    .fabianpolitiektext, .copyrighttext, .reviewtext1, .luukpolitiektext, .luukecotext, .reviewtext2, .reviewtext3, .sameconomietext, .tutorialtextsam, .tutorialtextluuk, .tutorialtextfabian{
        margin-left: 0%;
    }
}
.reviewtext2{
    margin-top: -3%;
}
.rtx4090{
    float: right;
    margin-top: -6% ;
    margin-right: 1%;
}
/*Kleuren*/
/*Tutorial Fabian*/
.vsc {
    width: 2%;
}
.project, .main{
    width: 15%;
    transition: transform .2s;
}
.project:hover{
    transform: scale(3);
}
.main:hover{
    transform: scale(2);
}
/*Tutorial Luuk*/
.luukvsc {
    width: 2%;
}
.soortproject, .netframework, .create, .programmeerscherm, .inttable, .invoertable, .tafelinvoer, .uitvoer, .readkey, .console {
    width: 15%;
    transition: .2s;
}
.soortproject:hover{
    transform: scale(3);
}
.create:hover{
    transform: scale(2);
}
.uitvoer:hover{
    transform: scale(1.5);
}
/*Tutorial Sam*/
.folder{
    width: 10%;
}
.uitwerking{
    width: 15%;
    transition: transform .2s;
}
.uitwerking:hover {
    transform: scale(1.5);
}