@media print {
  body {
    foo: 'bar';
  }
}
@media print {
  body something {
    foo: 'bar';
  }
}
@media print {
  body something {
    foo: 'bar';
  }
}
@media print {
  body ul li something {
    foo: 'bar';
  }
}
body {
  one: 1;
  two: 2;
}
@media print {
  body ul li body {
    foo: 'bar';
  }
}
.nested {
  margin-left: 10px;
}
@media screen {
  .nested {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 900px) {
  .something {
    foo: bar;
    bar: baz;
  }
}
@media only screen {
  body .thing {
    background: #123456;
  }
  body .thing .child {
    more: stuff;
  }
}
@media stuff {
  complex {
    stuff: 1234;
  }
}
@media only awesome {
  complex {
    fizz: buzz;
  }
}
@media not awesome {
  complex {
    one: 1;
  }
  complex .child {
    two: 2;
  }
}
#logo {
  background-image: url("/images/logo.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-size: auto auto;
  }
}
#logo {
  background-image: url("/images/logo.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-size: 50px 100px;
  }
}
nav#sticky-nav .logo {
  background-image: url("../img/logo.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  nav#sticky-nav .logo {
    background-size: 56px 56px;
  }
}
@media (max-width: 640px), (max-height: 320px) {
  nav#sticky-nav .logo {
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background-image: url("../img/logo-dark.png");
  }
}
@media all and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-height: 320px) and (-webkit-min-device-pixel-ratio: 1.5) {
  nav#sticky-nav .logo {
    background-size: 42px 42px;
  }
}
