/* rubik-maze-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik Maze';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/rubik-maze-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* iosevka-charon-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Iosevka Charon';
  font-style: italic;
  font-weight: 300;
  src: url('/assets/fonts/iosevka-charon-v1-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* iosevka-charon-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Iosevka Charon';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/iosevka-charon-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* iosevka-charon-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Iosevka Charon';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/iosevka-charon-v1-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* iosevka-charon-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Iosevka Charon';
  font-style: italic;
  font-weight: 500;
  src: url('/assets/fonts/iosevka-charon-v1-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* young-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/young-serif-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --c-white: hsl(0, 0%, 100%);
    --c-stone-100: hsl(30, 54%, 90%);
    --c-stone-150: hsl(30, 18%, 87%);
    --c-stone-400: hsl(30, 32%, 68%);
    --c-stone-600: hsl(30, 10%, 34%);
    --c-stone-900: hsl(24, 5%, 18%);
    --c-brown-800: hsl(14, 46%, 25%);
    --c-rose-800: hsl(332, 50%, 38%);
    --c-rose-50: hsl(330, 100%, 98%);
    --c-rose-329: hwb(329 15% 32%);
    --color-background: var(--c-white);
    --color-background-recipe:var(--c-stone-400);
    --color-websitename: var(--c-rose-329);
    --color-headline-secondary: var(--c-rose-800);
    --color-recipe-name: var(--c-brown-800);
  
}

*,
*::before, 
*::after {
box-sizing: border-box;
}

body {
    background-color: var(--color-background);
    margin: 0;
    font-family: 'Outfit', Arial, Helvetica, sans-serif;

}

h1, h2 {
    font-family: 'Young Serif', Georgia, 'Times New Roman', Times, serif;
    margin: 0;
  }

h1 {
  font-size: 2rem;
  margin-block-end: 20px;
  color: var(--color-headline-primary);

  @media (width >= 68.75rem) {
    font-size: 2.75rem;
    margin-block-end: 24px;
  }
}

h2 {
  font-size: 1.4rem;
  color: var(--color-headline-secondary);

  @media (width >= 68.75rem) {
  font-size: 1.6rem;  
  }
}

h3 {
  font-family: 'Iosevka Charon', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;

}

p, 
ul li, 
ol li,
th,
td {
  font-size: 1rem; 
  color: var(--color-text);

  @media (width >= 68.75rem) {
  font-size: 1.15rem;
  }
}

p {
  line-height: 1.3;
  margin-block-end: 20px;
  text-align: center;

  @media (width >= 68.75rem) {
  margin-block-end: 24px;
  }
}

ul,
ol {
  padding-inline-start: 16px;

  li {
    padding-inline-start: 20px;
    line-height: 2.5;
  }
}

img {
  display: block;
  margin: auto;  
  max-width: 100%;
    height: auto;
   
}

section {
  padding-block-end: 30px;
}

element {
  padding-top: 0px;
}

  .hero-image {
  background-image: url("/assets/images/silviagaudenzi-room-8125942_1920.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 20px;
  font-family: 'Rubik Maze', Georgia, 'Times New Roman', Times, serif;
  color: var(--color-websitename); 
  h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  h3 {
    font-weight: 400;
  }
}

.wrapper {
  display: grid;
  place-items: center;
  element {
  padding-top: 0px;
}
}

.recipe {
  background-color: var(--color-background-recipe);
    
  @media(width >= 68.75rem){ 
    max-width: 52rem;
    border-radius: 20px;
    padding: 36px;
  }
}

.recipe_image{
   @media(width >= 68.75rem){
    margin-block-end: 32px;
    border-radius: 12px;
  }
}

.recipe__text {
  @media(width < 68.75rem){
    padding: 30px 24px;
  }

  h1 {
  font-size: 2rem;
  margin-block-end: 20px;
  color: var(--color-recipe-name);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  }

  h2 {
    font-size:1.3rem;
    color:hsl(14, 46%, 25%);
  }
}