html{margin:0; padding: 0; border: 0.5vw solid burlywood; background-color: lightblue;}
h1{display:flex; font-size:4vw; text-decoration:underline overline; color: goldenrod; justify-content: center;text-shadow: -0.1vw 0.1vw aqua;}
h2{display:flex; flex-flow: row nowrap; font-size: 1.5vw; text-decoration:underline; color: goldenrod; justify-content: center; justify-items:center;}
hr{display:block; background-image: linear-gradient(65deg, violet, indigo, blue, green, yellow, orange, red); height:0.5vw;}
li{margin-left: 2vw; color:black;}

/* various menu pages */
#soep{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#voorgerecht{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#kerry{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#sate{display: grid;grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#zoetzure{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#tomaten{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#zwarte{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#chop{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#nasi{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#bami{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#noedels{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#specialiteit{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#supplement{display: grid; grid-template-columns: 30vw 15vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#twee{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#drie{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#vier{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#vijf{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
#rijsttafel{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}

/* common sections */
#soep-1, #voorgerecht-1, #kerry-1, #sate-1, #zoetzure-1, #tomaten-1, #zwarte-1, #chop-1, #nasi-1, #bami-1, #noedels-1, #specialiteit-1, #supplement-1, #twee-1, #drie-1, #vier-1, #vijf-1, #rijsttafel-1{list-style-type:none;margin-top: 3vw; line-height: 2;}
.prijs{display: block; list-style-type:none; margin-top:3vw;line-height: 2;}
.active{color:darkgrey; text-decoration:none;margin-top: 1vw;}
.fotos{display:grid;grid-template-columns:1fr 1fr; grid-auto-rows:minmax(1vw, auto);}
.additional{margin-left:5vw; color: black;}
figcaption{display:block; text-align: center; line-height:1;margin-bottom:0.5vw; font-size:1.15vw; font-weight:600; color: goldenrod; text-shadow: 0.05vw 0.05vw blue;}
figure img{display:flex; justify-items: end;}

#menu__2 > h2{display: block; color:goldenrod; font-size:2vw; text-align:left; text-decoration: none; text-shadow:0.1vw 0.2vw darkgreen;}
#menu__2{display:grid; grid-template-columns:1fr 1fr; margin-left: 5vw;line-height: 1;}
#home{font-size: 2vw;color:goldenrod; text-shadow:0.01vw 0.01vw blue; line-height: 2;}
#menu__2 a:not(#home, .active){color: blue;font-size: 1.15vw; line-height: 2;}

/* aside */
aside{display:flex; flex-flow: column wrap; margin-left: 3vw;}
aside .details{margin-left: -2vw;font-size:1.75vw;font-weight:bold; color:goldenrod; text-shadow:0.01vw 0.01vw 0.01vw dodgerblue;}
aside a{color:black;font-size:1.15vw; font-weight: 600;}

/* footer */
footer{display: flex; flex-flow: row nowrap;}
h3{margin-left: 10vw; }
#dagtijd{display: block; margin:1vw auto; font-size:1vw; color: goldenrod; }
#jaar{display: inline; margin:1vw auto; font-size:1vw; color: goldenrod; }



@media screen and (max-width: 1024px ) and (orientation: landscape){
    #soep{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
    #voorgerecht{display: grid; grid-template-columns: 35vw 10vw 55vw;grid-auto-rows: minmax(2vw, auto);}
    #kerry{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #sate{display: grid;grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #zoetzure{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #tomaten{display: grid; grid-template-columns: 35vw 10vw 55vw;grid-auto-rows: minmax(2vw, auto);}
    #zwarte{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #chop{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #nasi{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #bami{display: grid; grid-template-columns: 30vw 10vw 60vw;grid-auto-rows: minmax(2vw, auto);}
    #noedels{display: grid; grid-template-columns: 30vw 10vw 55vw;grid-auto-rows: minmax(2vw, auto);}
    #specialiteit{display: grid; grid-template-columns: 35vw 10vw 55vw;grid-auto-rows: minmax(2vw, auto);}
    #supplement{display: grid; grid-template-columns: 30vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #twee{display: grid; grid-template-columns: 40vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #drie{display: grid; grid-template-columns: 40vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #vier{display: grid; grid-template-columns: 40vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #vijf{display: grid; grid-template-columns: 40vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #rijsttafel{display: grid; grid-template-columns: 40vw 10vw 50vw;grid-auto-rows: minmax(2vw, auto);}
    #rijsttafel{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #soep-1, #voorgerecht-1, #kerry-1, #sate-1, #zoetzure-1, #tomaten-1, #zwarte-1, #chop-1, #nasi-1, #bami-1, #noedels-1, #specialiteit-1, #supplement-1, #twee-1, #drie-1, #vier-1, #vijf-1, #rijsttafel-1{list-style-type:none;margin-top: 1vw; line-height: 2;}
    .prijs{display: block; list-style-type:none; margin-top:1vw;line-height: 2;}
    .fotos{display:grid;grid-template-columns: 1fr ;}
    #foto2, #foto3, #foto4{display: none;} 
    li{margin-left: -2vw; font-size:1vw;}
    .prijs{font-size:0.5vw;}
    #menu__2 > h2{display: block; color:dodgerblue; font-size:1.2vw; text-align:left; text-decoration: none;}
    #menu__2{display:grid; grid-template-columns:1fr 1fr; line-height: 1; font-size: 0.8vw;}
    #home{font-size: 1vw;color:crimson;}
    aside{display:flex; flex-flow: column wrap; margin-left: 2vw;  font-size: 1vw;}
    footer{display: flex; flex-flow: row nowrap; font-size: 0.8vw;}
    h3{margin-left: 1vw; }
    #dagtijd{display: block; font-size:0.8vw; color: blue; }
    
    }

    @media screen and (max-width: 768px ) and (orientation: portrait){
        #soep{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #voorgerecht{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #kerry{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #sate{display: grid;grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #zoetzure{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #tomaten{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #zwarte{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #chop{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #nasi{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #bami{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #noedels{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #specialiteit{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #supplement{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #twee{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #drie{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #vier{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #vijf{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #rijsttafel{display: grid; grid-template-columns: 40vw 15vw 30vw;grid-auto-rows: minmax(2vw, auto);}
        #rijsttafel{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
        #soep-1, #voorgerecht-1, #kerry-1, #sate-1, #zoetzure-1, #tomaten-1, #zwarte-1, #chop-1, #nasi-1, #bami-1, #noedels-1, #specialiteit-1, #supplement-1, #twee-1, #drie-1, #vier-1, #vijf-1, #rijsttafel-1{list-style-type:none;margin-top: 1vw; line-height: 2;}
        .prijs{display: block; list-style-type:none; margin-top:1vw;line-height: 2;}
        .fotos{display:grid;grid-template-columns: 1fr ;}
        #foto2, #foto3, #foto4{display: none;} 
        li{margin-left: -2vw; font-size:1vw;}
        .prijs{font-size:0.5vw;}
        #menu__2 > h2{display: block; color:dodgerblue; font-size:1.2vw; text-align:left; text-decoration: none;}
        #menu__2{display:grid; grid-template-columns:1fr 1fr; line-height: 1; font-size: 0.8vw;}
        #home{font-size: 1vw;color:crimson;}
        aside{display:flex; flex-flow: column wrap; margin-left: 2vw;  font-size: 1vw;}
        footer{display: flex; flex-flow: row nowrap; font-size: 0.8vw;}
        h3{margin-left: 1vw; }
        #dagtijd{display: block; font-size:0.8vw; color: blue; }
        
        }

@media screen and (max-width: 700px ) and (orientation: portrait){
    #soep{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #voorgerecht{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #kerry{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #sate{display: grid;grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #zoetzure{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #tomaten{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #zwarte{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #chop{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #nasi{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #bami{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #noedels{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #specialiteit{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #supplement{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #twee{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #drie{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #vier{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #vijf{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #rijsttafel{display: grid; grid-template-columns: 70vw 25vw;grid-auto-rows: minmax(2vw, auto);}
    #soep-1, #voorgerecht-1, #kerry-1, #sate-1, #zoetzure-1, #tomaten-1, #zwarte-1, #chop-1, #nasi-1, #bami-1, #noedels-1, #specialiteit-1, #supplement-1, #twee-1, #drie-1, #vier-1, #vijf-1, #rijsttafel-1{list-style-type:none;margin-top: 1vw; line-height: 2;}
    .prijs{display: block; list-style-type:none; margin-top:1vw;line-height: 2;}
    .fotos{display: none;}
    li{margin-left: -2vw; font-size:1vw;}
    .prijs{font-size:0.5vw;}
    #menu__2 > h2{display: block; color:dodgerblue; font-size:1.2vw; text-align:left; text-decoration: none;line-height: 2;}
    #menu__2{display:grid; grid-template-columns:1fr 1fr; line-height: 1; font-size: 0.8vw;}
    #home{font-size: 1vw;color:crimson;}
    aside{display:flex; flex-flow: column wrap; margin-left: 2vw;  font-size: 1vw;line-height: 2}
    footer{display: flex; flex-flow: row nowrap; font-size: 0.8vw;}
    h3{margin-left: 1vw; }
    #dagtijd{display: block; font-size:0.8vw; color: blue; }

}