/* normal */
body {
  background: #eee;
  color: #888; /* color is gray */
  border: 1px solid; /*no*/
  height: 20px; /* px */
  padding: 6px; /*px*/
  -webkit-animation: anim1 linear infinite;
}
.header, .footer span {
  width: 100%;
  height: 20px;
  margin: 10px;
  font-size: 28px; /*px*/
  animation: anim2 linear infinite;
}
.main {
  height: 400px;
}
.sidebar {
  margin: 0;
  height: 0px;
  line-height: 0px; /*px*/
  width: 40px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  /* decimal */
  padding: 24.5px 24px 0;
  /* Data URI contains `px` */
  background: 24px 12px url(data:image/png;base64,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);
}

@-webkit-keyframes anim1 {
  0%, 100% {
    -webkit-transform: none;
  }
  20%, 60% {
    -webkit-transform: rotate(-45deg);
  }
  40%, 80% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes anim2 {
  0% {
    height: 75px; /*px*/
    width: 75px;
    border: 1px solid #ddd; /*no*/
  }
  100% {
    height: 150px;
    width: 150px;
    border: 2px solid #ddd; /*no*/
  }
}

/* media query */
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
  /* normal */
  body {
    background: #eee;
    color: #888; /* color is gray */
    border: 1px solid; /*no*/
    height: 20px; /* px */
    padding: 6px; /*px*/
    -webkit-animation: anim3 linear infinite;
  }
  .header, .footer span {
    width: 100%;
    height: 20px;
    margin: 10px;
    font-size: 28px; /*px*/
    animation: anim4 linear infinite;
  }
  .main {
    height: 400px;
  }
  .sidebar {
    margin: 0;
    height: 0px;
    line-height: 0px; /*px*/
    width: 40px;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
    /* decimal */
    padding: 24.5px 24px 0;
    /* Data URI contains `px` */
    background: 24px 12px url(data:image/png;base64,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);
  }
  .footer {
    height: 100px; /*px*/
  }

  @-webkit-keyframes anim3 {
    0%, 100% {
      -webkit-transform: none;
    }
    20%, 60% {
      -webkit-transform: rotate(-45deg);
    }
    40%, 80% {
      -webkit-transform: rotate(45deg);
    }
  }
  @keyframes anim4 {
    0% {
      height: 75px;
      width: 75px;
      border: 1px solid #ddd; /*no*/
    }
    100% {
      height: 150px;
      width: 150px;
      border: 2px solid #ddd; /*no*/
    }
  }
}

.footer {
  height: 100px; /*px*/
}