:root {
  --header-height: 64px;
}

.mdl-layout__header {
  transition: transform 0.3s;
}

.mdl-layout__content {
  transition: margin-top 0.3s;
}

body.header-hidden .mdl-layout__header {
  transform: translateY(calc(-0.8 * var(--header-height)));
}

body.header-hidden .mdl-layout__content {
  margin-top: 0;
}

body.header-visible .mdl-layout__header {
  transform: translateY(0);
}

body.mdl-layout__content {
  margin-top: 0;
}