html{margin:0; padding: 0;background-image: linear-gradient(25deg, grey,green, red, yellow, blue, aqua, aquamarine);scroll-snap-type:y mandatory;scroll-snap-align: start; scroll-behavior: smooth; max-width: 120rem; width: 100%; margin: -4dvh auto;}

body{--s: .2dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,black 40% 70%, #0000 72%; background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),  radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c); }

h1{display:flex; font-size:3rem; text-decoration:underline; color: black; justify-content: flex-start;text-shadow: -0.1dvw 0.1dvw aqua;}

h2{display:flex; flex-flow: row nowrap; font-size: 1.25dvw; text-decoration:underline; color: black; justify-content: flex-start; justify-items:center;}
hr{display:block; background-image: linear-gradient(65deg, violet, blue, green, yellow, orange); height:0.25dvw;}
li{margin-left: 2dvw; color:black;}

/* various menu pages */
.dishes{display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(2vw, auto);max-width: 120rem; width: 100%; margin-inline: auto; font-size: 2rem;}
#tafels{display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(3dvw, auto); max-width: 120rem; width: 100%; margin: 0 auto;font-size: 1dvw;}
#rijsttafel{display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(3dvw, auto); max-width: 120rem; width: 100%; margin: 0 auto;font-size: 1dvw;} 
#twee, #drie, #vier, #vijf, #rijsttafel{display: flex; flex-flow : column nowrap;}

/* 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: 2dvw; line-height: 2; margin-inline: auto;}

.prijs{display: block; list-style-type:none; margin-top:3vw;line-height: 2;}
.active{color:darkgrey; text-decoration:none;margin-top: 1vw;}
.additional{margin-left:3vw; color: black; font-size: 1dvw; justify-content: flex-start;}
li span{font-size: 0.5dvw;}


#menu_2{display:grid; grid-template-columns:1fr 1fr 1fr; margin-left: 2vw;}
#menu_2 a{color: blue;font-size: 1vw; line-height: 2;}

/* aside */
aside{display:flex; flex-flow: column wrap; margin-left: 3vw; max-width: 120rem; width: 100%; }
aside a, aside p{margin-left: 2vw;font-size:1.25vw;font-weight:normal; text-shadow:0.01vw 0.01vw 0.01vw dodgerblue; }
aside span{color:black;font-size:1.15vw; font-weight: normal; margin-left: 5dvw;}

/* footer */
footer{display: flex; flex-flow: row nowrap;max-width: 120rem; width: 100%; font-size: 1dvw;}
#dagtijd{display: block; margin:1dvw auto; font-size: 1dvw; color: black; }
#jaar{display: inline; margin:1vw auto; font-size:1vw; color: black; }




/** Desktop (large) : max-width: 120rem; width: 100%;520px (95.5) **/ 
@media (max-width: 120rem ) {
    h1{ font-size: 2rem; }
    .dishes{ font-size: 2rem}
    .prijs{ font-size: 2rem;}
}   

/** Desktop (medium) : 1280px (80em)– 1920px (120em)**/
@media (min-width: 80em) and (max-width: 120em){
      h1{ font-size: 2rem; }
    .dishes{ font-size: 2rem}
    .prijs{ font-size: 2rem;}
}


/** Desktop (small) : 1024px (64em)- 1279px(80em) **/
 @media (min-width: 64em) and (max-width: 80em){
    h1{ font-size: 2rem; }
    .dishes{ font-size: 1rem}
    .prijs{ font-size: 1rem;}
 }
/** Tablet (landscape : 900px (56.25em)- 1023px (63.93em) **/
 @media (min-width: 56.25em) and (max-width: 63.93em){   
   h1{ font-size: 2rem; }
    .dishes{ font-size: 1rem}
    .prijs{ font-size: 1rem;}
 }

/** Tablet (portrait) : 768px (48em) - 899px (56.25em)**/
@media (min-width: 48em) and (max-width: 56.25em){
   h1{ font-size: 2rem; }
    .dishes{ font-size: 1rem}
    .prijs{ font-size: 1rem;}
  
}

/** Tablet (portrait) : 420px (26.25em) - 767px (48em)**/
@media (min-width: 26.25em) and (max-width: 48em){
   h1{ font-size: 1.5rem; }
    .dishes{ font-size: 1rem}
    .prijs{ font-size: 1rem;}
  
}