@font-face {
    font-family: FallIsComing;
    src: url(FallIsComingRegular-Mx9B.ttf);
}

html {
    box-sizing: border-box;
    background: #ffc600;
    font-family: FallIsComing;
    font-size: 20px;
    font-weight: 200;
}

body{
    margin: 0;
}

.panels{
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}


.panel {
    background: #6B0F9C;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
    color: white;
    text-align: center;
    align-items: center;
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */
    transition:
      font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
      flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
      background 0.2s;
    font-size: 20px;
    background-size: cover;
    background-position: center;
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .panel1 { background-image:url(https://images.unsplash.com/photo-1590698933947-a202b069a861?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1035&q=80); }
  .panel2 { background-image:url(https://images.unsplash.com/photo-1558021212-51b6ecfa0db9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2366&q=80); }
  .panel3 { background-image:url(https://images.unsplash.com/photo-1543627633-0643fe92d06f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1404&q=80); }
  .panel4 { background-image:url(https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2340&q=80); }
  .panel5 { background-image:url(https://images.unsplash.com/photo-1551730459-92db2a308d6a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80); }

      /* Flex Items */
      .panel > * {
        margin: 0;
        width: 100%;
        transition: transform 0.5s;
        flex: 1 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      .panel > *:first-child { transform: translateY(-100%); }
      .panel.open-active > *:first-child { transform: translateY(0); }
      .panel > *:last-child { transform: translateY(100%); }
      .panel.open-active > *:last-child { transform: translateY(0); }
  
      .panel p {
        /* text-transform: uppercase; */
        font-family: FallIsComing;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
        font-size: 2em;
      }
      
      .panel p:nth-child(2) {
        font-size: 3em;
      }
  
      .panel.open {
        flex: 5;
        font-size: 40px;
      }
      
      @media only screen and (max-width: 600px) {
        .panel p {
          font-size: 1em;
        }
      }