#kardaschow {
  bottom: 0px;
  //min-height: 50vh;
  position: fixed;
  top: 0px;
  width: 100%;

  // everything after the current visible and *every visible*
  .current-fragment ~ .fragment,
  .visible {
    //height: 8%;
    height: 60px;

    h1 {
      font-size: 1em;
    }
  }

  // but not the current (important)
  .current-fragment {
    //height: 74% !important;
    height: 609px !important;

    h1 {
      font-size: 2em;
    }

    .expand {
      display: initial !important;
    }
  }

  div {
    overflow: hidden;

    // only the movement and size change is animated
    h1 {
      transition: all .2s ease;
    }

    .expand {
      display: none !important;
    }

    // per default: 28% high
    &:not(.visible) {
      //height: 30%;
      height: 243px; // also shows when translating

      // explot fragments initial hidden state
      opacity: 1;
      visibility: visible;

      h1 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  #type-1 {
    background-color: #fc6769;
  }

  #type-2 {
    background-color: #63c9ce;
  }

  #type-3 {
    background-color: #f4e623;

    // slow rotation of galaxy
    /*img {
      animation: rotate 300s infinite linear;

      // easter egg
      &:hover {
        animation: rotate 1s infinite linear;
      }
    }*/
  }
}

.expand {
  img {
    // remove upstream styles
    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);
  }
}