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

/* HEADER */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:tomato;
  padding:10px;
  font-weight:bold;
  font-family:sans-serif;
}

.nav-item{
  flex:1;
  text-align:center;
}

.logo{
  flex:1;
  text-align:left;
}

/* BODY */
body{
  background-color:#222222;
}

/* GRID */
main{
  padding:25px;
  display:grid;
  gap:25px;
  grid-template-columns:1fr 1fr 1fr 1fr;
}

/* GRID ITEMS */
.hotdog{
  padding:20px;
  background-color:rgba(255,100,100,0.5);
}

/* IMAGE */
img{
  width:100%;
  display:block;
}

/* ========================= */
/* MEDIA QUERY */
/* ========================= */

@media screen and (max-width:1000px){

  /* hide nav items */
  .buns,
  .cond,
  .meat,
  .cart{
    display:none;
  }

  /* center everything in header */
  header{
    justify-content:center;
  }

  /* FIX LOGO */
  .logo{
    flex:none;          
    margin:0 auto;
    text-align:center;
  }

}

  /* hide nav */
  .buns,
  .cond,
  .meat,
  .cart{
    display:none;
  }

  /* center logo */
  header{
    justify-content:center;
  }

  .logo{
    margin:0 auto;
  }

  /* background change */
  main{
    background-color:#501000;
    background-image:url("hotdog.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* 1 column */
  main{
    grid-template-columns:1fr;
  }

  /* bigger text */
  body{
    font-size:24px;
    font-family:sans-serif;
  }