@font-face {
    font-family: "Hegarty";
    src: url(../assets/BBHSansHegarty-Regular.ttf);
 }
 
  @font-face {
    font-family: "Inter";
    src: url(../assets/Inter_28pt-Medium.ttf);
 }

  @font-face {
    font-family: "Organic";
    src: url(../assets/Organic\ Brand.ttf);
 }
 

.menu-box{
    background-color: rgb(214, 79, 0);
    font-family: "Inter";
    width: calc(1552px/2);
    height:calc(1820px/2);
    margin-left:auto;
    margin-top: 80px;
    margin-right:auto;
    position:relative;
}


.header{
  height:100px;
  width:778px;
  font-family: "Organic";
  font-size: 70px;
  color:rgb(245, 252, 255);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top:1px;
  display: inline-block;
  padding-bottom: 5px;
  padding-top: 80px;
}

.section-1{
  display:inline-block;
  width: 386px;
  height:auto;
  background-color: rgba(240, 248, 255, 0);
  text-align: left;
}

.section-2{
  display:inline-block;
  width: 386px;
  height:auto;
  background-color: rgba(240, 248, 255, 0);
  text-align: left;
  vertical-align: top;
}

.label-1{
  font-family: "Hegarty", sans-serif;
  padding-top: 10px;
  background-color: rgb(255, 255, 251);
  width:380px;
  height:auto;
  padding-left: 5px;
  color:rgb(214, 79, 0);
}

.label-2{
  font-family: "Hegarty", sans-serif;
  padding-top: 10px;
  background-color: rgb(255, 255, 251);
  width:380px;
  height:auto;
  padding-left: 5px;
  color:rgb(214, 79, 0);
}

.food-items{
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color:whitesmoke;
  width:335px;
  height: auto;
  display: inline-block;
  line-height:25px;
  padding-top: 5px;
  padding-left: 5px;
}

.prices-1{
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color:whitesmoke;
  width:31.5px;
  height: auto;
  display: inline-block;
  line-height:25px;
  padding-top: 5px;
  text-align: right;
}

.food-items2{
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color:whitesmoke;
  width:335px;
  height: auto;
  display: inline-block;
  line-height:25px;
  padding-top: 5px;
  padding-left: 5px;
}

.image-box{
  width: 300px;
  height:300px;
  box-sizing: border-box;
  display:inline-flex;
  vertical-align: top;
}



@media screen and (max-width:1080px) and (min-width:960px){
  .header{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 960px and narrower than 1080px.*/
} 
@media screen and (max-width:960px) and (min-width:720px){
  .section-1{
    background-color:rgba(255, 0, 0, 0);
    width:calc(50% - 2.6rem);
    background-color:rgba(0, 0, 0, 0);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 720px and narrower than 960px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .label-1{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .food-items{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
}

@media screen and (max-width:720px) and (min-width:480px){
  .food-items2{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .prices-1{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .section-2{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .label-2{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
} 

@media screen and (max-width:720px) and (min-width:480px){
  .image-box{
    background-color:rgba(255, 0, 0, 0);
    width:calc(100% - 2.6rem);
    height:26rem;
  }
/*These css rules that will only be activated when the page is viewed on a screen and when the browser window is wider than 480px and narrower than 720px.*/
}