#kardaschow {
  bottom: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
}
#kardaschow .current-fragment ~ .fragment,
#kardaschow .visible {
  height: 60px;
}
#kardaschow .current-fragment ~ .fragment h1,
#kardaschow .visible h1 {
  font-size: 1em;
}
#kardaschow .current-fragment {
  height: 609px !important;
}
#kardaschow .current-fragment h1 {
  font-size: 2em;
}
#kardaschow .current-fragment .expand {
  display: initial !important;
}
#kardaschow div {
  overflow: hidden;
}
#kardaschow div h1 {
  transition: all .2s ease;
}
#kardaschow div .expand {
  display: none !important;
}
#kardaschow div:not(.visible) {
  height: 243px;
  opacity: 1;
  visibility: visible;
}
#kardaschow div:not(.visible) h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#kardaschow #type-1 {
  background-color: #fc6769;
}
#kardaschow #type-2 {
  background-color: #63c9ce;
}
#kardaschow #type-3 {
  background-color: #f4e623;
  /*img {
      animation: rotate 300s infinite linear;

      // easter egg
      &:hover {
        animation: rotate 1s infinite linear;
      }
    }*/
}
.expand img {
  margin: inherit !important;
  background: inherit !important;
  border: inherit !important;
  box-shadow: inherit !important;
  max-height: unset;
  max-width: unset;
  max-width: 95%;
  max-height: 60%;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}