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

body {

  background: url("assets/screen1.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: 4vh;
  padding-left: 1.2vw;
  padding-right: 1.2vw;
  padding-bottom: 7vh;
}

#menu {

  display: grid;

  /* COLUMN WIDTHS */
  grid-template-columns: 0.9fr 0.9fr 0.8fr 0.95fr;

  /* IMPORTANT */
  column-gap: 0;

  width: 100%;
  height: 100%;
}

/* COMMON COLUMN */
.column {

  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* GAP BETWEEN COLUMN 1 → 2 */
.column:nth-child(1) {

  padding-right: 0.2vw;

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

/* GAP BETWEEN COLUMN 2 → 3 */
.column:nth-child(2) {

  padding-right: 0.2vw;

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

/* GAP BETWEEN COLUMN 3 → 4 */
.column:nth-child(3) {

  padding-right: 0.2vw;

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

/* LAST COLUMN */
.column:nth-child(4) {

  padding-right: 0;

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

.category {

  margin-bottom: 0.8vh;
}

.category-title {

  color: #d46d1f;

  font-size: 2.8vh;

  font-weight: 900;

  margin-bottom: 0.3vh;

  text-transform: uppercase;

  letter-spacing: 0.5px;
}

.menu-item {

  display: grid;

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

  align-items: center;

  margin-bottom: 0.35vh;

  color: #111;

  font-size: 2.5vh;

  font-weight: 700;
}

.left {

  display: flex;

  align-items: center;

  gap: 0.35vw;

  min-width: 0;
}

.left span {

  line-height: 1;
}

.price {

  font-weight: 900;

  white-space: nowrap;

  font-size: 2.5vh;

  text-align: right;
}

.na {

  color: red;
}

.dot {

  width: 1.1vh;
  height: 1.1vh;

  border-radius: 50%;

  flex-shrink: 0;
}

.veg {

  background: green;
}

.nonveg {

  background: red;
}

.egg {

  background: #f5b800;
}