* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  background:
    url("assets/screen3.png")
    no-repeat
    center
    center
    fixed;

  background-size: cover;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  font-family: Arial, sans-serif;
}

.container {

  width: 100vw;
  height: 100vh;

  padding-top: 3vh;
  padding-left: 2.2vw;
  padding-right: 2.2vw;
  padding-bottom: 3vh;
}

/* =======================================================
   MAIN GRID
======================================================= */

#menu {

  display: grid;

  grid-template-columns:
    1.12fr
    0.92fr
    0.9fr;

  width: 100%;
  height: 100%;

  column-gap: 0;
}

/* =======================================================
   COMMON COLUMN
======================================================= */

.column {

  display: flex;
  flex-direction: column;

  min-width: 0;
}

/* =======================================================
   COLUMN 1
======================================================= */

.column:nth-child(1) {

  padding-right: 1vw;

  --item-width: 60%;
  --single-width: 20%;
  --family-width: 20%;
}

/* =======================================================
   COLUMN 2
======================================================= */

.column:nth-child(2) {

  padding-right: 1vw;

  --item-width: 68%;
  --price-width: 20%;
}

/* =======================================================
   COLUMN 3
======================================================= */

.column:nth-child(3) {

  padding-right: 0;

  --item-width: 71%;
  --price-width: 20%;
}

/* =======================================================
   CATEGORY
======================================================= */

.category {

  margin-bottom: 1.1vh;
}

.category-title {

  color: #d46d1f;

  font-size: 2.8vh;
  font-weight: 900;

  text-transform: uppercase;

  line-height: 1;
}

/* =======================================================
   DUAL HEADER
======================================================= */

.dual-title-row {

  display: grid;

  grid-template-columns:
    var(--item-width)
    var(--single-width)
    var(--family-width);

  align-items: end;

  margin-bottom: 0.35vh;
}

.dual-title-row .category-title {

  margin-bottom: 0;
}

.dual-title-row span {

  color: #d46d1f;

  font-size: 2.3vh;
  font-weight: 900;

  text-align: center;

  text-transform: uppercase;
}

/* =======================================================
   NORMAL ROW
======================================================= */

.menu-item {

  display: grid;

  grid-template-columns:
    var(--item-width)
    var(--price-width);

  align-items: center;

  margin-bottom: 0.22vh;

  font-size: 2.5vh;
  font-weight: 700;

  color: #111;
}

/* =======================================================
   DUAL ROW
======================================================= */

.dual-item {

  display: grid;

  grid-template-columns:
    var(--item-width)
    var(--single-width)
    var(--family-width);

  align-items: center;

  margin-bottom: 0.22vh;

  font-size: 2.5vh;

  font-weight: 700;

  color: #111;
}

/* ALIGN PRICES */

.dual-item .price {

  text-align: center;
}

/* =======================================================
   LEFT
======================================================= */

.left {

  display: flex;

  align-items: center;

  gap: 0.35vw;

  min-width: 0;
}

.left span {

  line-height: 1;

  white-space: nowrap;
}

/* =======================================================
   PRICE
======================================================= */

.price {

  text-align: right;

  white-space: nowrap;

  font-weight: 900;
}

/* =======================================================
   CHILD ITEMS
======================================================= */

.child-item {

  padding-left: 0.94vw;

  font-size: 2vh;

  margin-bottom: 0.12vh;
}

/* CHILD PRICE ALIGN */

.child-item .price {

  text-align: right;

  position: relative;

  padding-left: 1vw;
}

/* RED + SYMBOL */

.child-item .price::before {

  content: "+";

  color: red;

  position: absolute;

  left: -0.2vw;

  font-weight: 900;
}

/* =======================================================
   PARENT ITEMS
======================================================= */

.parent-item {

  margin-top: 0.25vh;

  font-weight: 900;
}

/* =======================================================
   DOTS
======================================================= */

.dot {

  width: 1.1vh;
  height: 1.1vh;

  border-radius: 50%;

  flex-shrink: 0;
}

.veg {

  background: green;
}

.nonveg {

  background: red;
}

.egg {

  background: #f5b800;
}

.black {

  background: #444;
}

/* =======================================================
   N/A
======================================================= */

.na {

  color: red;

}