body {position: relative; width: auto; height: auto; --s: 0.3dvw; --c:#eceaea 20% 30%; background: linear-gradient(135deg,skyblue 5%,var(--c),#0000 0), repeating-linear-gradient(45deg,var(--c),azure 0 70%); background-size: var(--s) var(--s);}
body{max-width: 120rem; width: 100%; box-shadow: 0.2dvw 0.1dvw 2dvw 2dvw skyblue; margin-inline: auto;}
h1:not(.text){font-size: 2dvw; color: darkblue; display: flex; justify-content: center; line-height: 1; max-width: 115rem; width: 100%;}
h2:not(.text){font-size: 1dvw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
.grid{display:grid; grid-template-columns: 1fr ; grid-auto-rows: minmax(2vh, auto); grid-gap:1dvw;}
.grid_A{display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(2vh, auto); grid-gap:1dvw;}
.grid_B{display:grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2vh, auto); grid-gap:1dvw;}
.grid_C{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(2vh, auto); grid-gap:1dvw;} 
h3{margin-left: 1dvw; font-weight: 700; color: brown;}
h4{ margin-left: 2dvw; }
hr{height: 0.25dvw;background:linear-gradient(45deg, lightgreen, burlywood, orange); max-width: 120rem; width: 100%;}
p{font-size: 1dvw; font-optical-sizing: auto; max-width: 110rem; width: 100%; margin-inline: auto; word-wrap: break-word; overflow-wrap: break-word;}
a{font-size: 1dvw; font-optical-sizing: auto; max-width: 110rem; width: 100%; margin-inline: auto; word-wrap: break-word; overflow-wrap: break-word}
.ex{margin-left: 2dvw; text-decoration: underline;}
.spec{margin-left:2dvw;}
.spec-2{margin-left:4dvw;}
.spec-3{margin-left: 7dvw;}
pre{font-family: Arial, Helvetica, sans-serif; font-size: 1vw; color: darkgreen;}
.pre-1{width: 30dvw;}
.pre-2{width: 40dvw;}
button{display: inline-block; margin-left: 4vw; background-color: lightgreen; color: black;width: auto; height: auto;}
em{ font-weight: 600; color: blue;}


/** Desktop (large) : maximum width - 1520px (95.5m) **/ 
@media (max-width: 95.5rem ) {
  .name img{ margin-inline: 35dvw; }
  aside p, aside span{font-size: 1dvw;}
    
} 

/** Desktop (medium) : 1280px (80em)– 1920px (120em)**/
@media (min-width: 80em) and (max-width: 120em){
   
}

/** Desktop (small) : 1024px (64em)- 1279px(80em) **/
 @media (min-width: 64em) and (max-width: 80em){
    
 }
/** Tablet (landscape : 900px (56.25em)- 1023px (63.93em) **/
 @media (min-width: 56.25em) and (max-width: 63.93em){   
   
 }

/** mobile large : 420px (26.25em)- 767px (48em)**/
 @media (min-width: 26.25em) and (max-width: 48em){
    #content{--s: .1dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,white 40% 70%, #0000 72%;  }
 }

 /** mobile large : 320px (20em)- 419px (26.25em)**/
 @media (min-width: 20em) and (max-width: 26.245em){
    #content{--s: .1dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,white 40% 70%, #0000 72%;  }
   .dishes{display: grid; grid-template-columns: 40% 25% 40%; grid-auto-rows: minmax(2vw, auto);max-width: 120rem; width: 100%; margin: 0 auto; font-size: 1dvw;}

 }