:root {

  /**
   * COLORS
   */

  --gold-crayola: hsl(38, 61%, 73%);
  --quick-silver: hsla(0, 0%, 65%, 1);
  --davys-grey: hsla(30, 3%, 34%, 1);
  --smoky-black-1: hsla(40, 12%, 5%, 1);
  --smoky-black-2: hsla(30, 8%, 5%, 1);
  --smoky-black-3: hsla(0, 3%, 7%, 1);
  --eerie-black-1: hsla(210, 4%, 9%, 1);
  --eerie-black-2: hsla(210, 4%, 11%, 1);
  --eerie-black-3: hsla(180, 2%, 8%, 1);
  --eerie-black-4: hsla(0, 0%, 13%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --white-alpha-10: hsla(0, 0%, 100%, 0.1);
  --black: hsla(0, 0%, 0%, 1);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  --black-alpha-15: hsla(0, 0%, 0%, 0.15);

  /**
   * GRADIENT COLOR
   */

  --loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--smoky-black-3) 33.33% 50%,  transparent 66.66% 75%);
  --gradient-1: linear-gradient(to top,hsla(0, 0%, 0%, 0.9),hsla(0, 0%, 0%, 0.7),transparent);

  /**
   * TYPOGRAPHY
   */

  /* font-family */
  --fontFamily-forum: 'Forum', cursive;
  --fontFamily-dm_sans: 'DM Sans', sans-serif;

  /* font-size */
  --fontSize-display-1: calc(1.3rem + 6.7vw);
  --fontSize-headline-1: calc(2rem + 2.5vw);
  --fontSize-headline-2: calc(1.3rem + 2.4vw);
  --fontSize-title-1: calc(1.6rem + 1.2vw);
  --fontSize-title-2: 2.2rem;
  --fontSize-title-3: 2.1rem;
  --fontSize-title-4: calc(1.6rem + 1.2vw);
  --fontSize-body-1: 2.4rem;
  --fontSize-body-2: 1.6rem;
  --fontSize-body-3: 1.8rem;
  --fontSize-body-4: 1.6rem;
  --fontSize-label-1: 1.4rem;
  --fontSize-label-2: 1.2rem;

  /* font-weight */
  --weight-regular: 400;
  --weight-bold: 700;

  /* line-height */
  --lineHeight-1: 1em;
  --lineHeight-2: 1.2em;
  --lineHeight-3: 1.5em;
  --lineHeight-4: 1.6em;
  --lineHeight-5: 1.85em;
  --lineHeight-6: 1.4em;

  /* letter-spacing */
  --letterSpacing-1: 0.15em;
  --letterSpacing-2: 0.4em;
  --letterSpacing-3: 0.2em;
  --letterSpacing-4: 0.3em;
  --letterSpacing-5: 3px;

  /**
   * SPACING
   */

  --section-space: 70px;

  /**
   * SHADOW
   */

  --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);

  /**
   * BORDER RADIUS
   */

  --radius-24: 24px;
  --radius-circle: 50%;

  /**
   * TRANSITION
   */

  --transition-1: 250ms ease;
  --transition-2: 500ms ease;
  --transition-3: 1000ms ease;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.menu{
    background-color: #161718;
}
.menu-container-top p{
    color: var(--gold-crayola);
}

.headline-1{
    text-align: center;
  color: var(--white);
  font-family: var(--fontFamily-forum);
  font-weight: var(--weight-regular);
  line-height: var(--lineHeight-2);
  margin-bottom: 1rem;
  font-size: var(--fontSize-body-1);
}



.section-subtitle {
  position: relative;
  color: var(--gold-crayola);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-2);
  margin-block-end: 12px;
  font-family: var(--fontFamily-forum);
  text-align: center;
  padding-top: 3rem;
}

.section-subtitle::after {
  content: url('../images/separator.svg');
  display: block;
  width: 100px;
  margin-inline: auto;
  margin-block-start: 5px;
}



.menu-container{
  padding: 3rem;
  height: max-content;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  border-radius: 20px;
  border: 2px solid var(--gold-crayola);
  width: 70%;
}
.menu-list{
  border: 2px solid var(--gold-crayola);
  border-radius: 20px;
  padding: 3rem;
  margin: 1rem;
  width: 45%;
}
.menu-item{
  display: flex;
}
.menu-block{
  display: flex;
  justify-content: space-between;
}
.menu-list h4{
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
  font-family: var(--fontFamily-forum);
  color: var(--white);
}

.menu-list p{
  font-family: var(--fontFamily-forum);
}

/* ================================== GALLERY ================================= */
.gallery-container{
    background-color: #161718;
}
.gallery-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dream{
  display: flex;
  flex-direction: column;
  width: 32.5%;
}
.dream img{
  width: 100%;
  padding: 15px;
  border-radius: 5px;
}

@media (max-width:900px) {
  .gallery-box{
  flex-direction: column;
  justify-content: space-between;
}
.dream{
  width: 100%;
}
.menu-list{
  width: 90%;
}
}
@media (max-width:1300px) {
.menu-container{
  align-items: center;
  width: 90%;
  flex-direction: column;
}
.menu-list{
  width: 90%;
}
}