.container
  input(type="radio" name="tabs" id="tab3")  
  label(for="tab3" id="label3") <span></span><span></span><span></span><span></span><span></span><span></span>
  input(type="radio" name="tabs" id="tab1" checked/)
  label(for="tab1" id="label1") <span></span><span></span><span></span><span></span><span></span><span></span>
  input(type="radio" name="tabs" id="tab2")  
  label(for="tab2" id="label2") <span></span><span></span><span></span><span></span><span></span><span></span>
  .full-screen

@import url('https://fonts.googleapis.com/css?family=Mukta+Mahee')

body
  height: 100vh
  width: 100vw
  font-family: 'Mukta Mahee', sans-serif
  
.full-screen
  position: absolute
  top: 0
  left: 0
  height: 100vh
  width: 100vw
  background: white
  
.container
  position: relative
  height: 100vh
  width: 100vw
  display: flex
  justify-content: space-around
  align-items: center
  flex-direction: row
  color: white
  font-size: 25px
  
.full-screen
  position: absolute
  top: 0
  left: 0
  background: #6A1B9A
  z-index: -5
 
span:after
  transition: .5s
  
// purple letter    
#label1 > span:nth-child(1):after
  content: 'p'
  
#label1 > span:nth-child(2):after
  content: 'u'

#label1 > span:nth-child(3):after
  content: 'r'
  
#label1 > span:nth-child(4):after
  content: 'p'
  
#label1 > span:nth-child(5):after
  content: 'l'

#label1 > span:nth-child(6):after
  content: 'e'
// purple animation
  
#tab1:checked ~ #label1 > span:nth-child(1):after
  animation: move 1s linear 1 forwards
  transition: .5s
  @keyframes move
    10%
      content: 'a'
      color: red
    20%
      content: 'R'
      color: blue
    30%
      content: '%'
      color: green
    40%
      content: 'p'
      color: white
      font-size: 30px
    100%
      content: 'p'
      color: white
      font-size: 30px
      transition: .5s

    
#tab1:checked ~ #label1 > span:nth-child(2):after
  animation: move2 1s linear 1 forwards
  @keyframes move2
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'u'
      color: white
      font-size: 30px
    100%
      content: 'u'
      color: white
      font-size: 30px

#tab1:checked ~ #label1 > span:nth-child(3):after
  animation: move3 1s linear 1 forwards
  @keyframes move3
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'Y'
      color: peachpuff
    60%
      content: 'r'
      color: white
      font-size: 30px
    100%
      content: 'r'
      color: white
      font-size: 30px
  
#tab1:checked ~ #label1 > span:nth-child(4):after
  animation: move4 1s linear 1 forwards
  @keyframes move4
    10%
      content: 'x'
      color: green
    20%
      content: '@'
      color: yellow
    30%
      content: 'x'
      color: red
    40%
      content: 'A'
      color: purple
    50%
      content: '+'
      color: orange
    60%
      content: '?'
      color: pink
    70%
      content: 'p'
      color: white
      font-size: 30px
    100%
      content: 'p'
      color: white
      font-size: 30px
    
#tab1:checked ~ #label1 > span:nth-child(5):after
  animation: move5 1s linear 1 forwards
  @keyframes move5
    10%
      content: '?'
      color: purple
    20%
      content: 'x'
      color: orange
    30%
      content: 'w'
      color: purple
    40%
      content: 'u'
      color: pink
    50%
      content: 'K'
      color: green
    60%
      content: 'v'
      color: yellow
    70%
      content: 'G'
      color: red
    80%
      content: 'l'
      color: white
      font-size: 30px
    100%
      content: 'l'
      color: white
      font-size: 30px
    
#tab1:checked ~ #label1 > span:nth-child(6):after
  animation: move6 1s linear 1 forwards
  @keyframes move6
    10%
      content: 'H'
      color: peachpuff
    20%
      content: '&'
      color: red
    30%
      content: '#'
      color: blue
    40%
      content: 'B'
      color: green
    50%
      content: 'o'
      color: yellow
    60%
      content: '7'
      color: orange
    70%
      content: 'Z'
      color: green
    80%
      content: 'Q'
      color: green
    90%
      content: 'e'
      color: white
      font-size: 30px
    100%
      content: 'e'
      color: white
      font-size: 30px
    
#tab1:checked ~ .full-screen
  background: #6A1B9A
  transition: .5s
  transition-delay: 1s
  
// tomato letter
#label2 > span:nth-child(1):after
  content: 't'
  
#label2 > span:nth-child(2):after
  content: 'o'

#label2 > span:nth-child(3):after
  content: 'm'
  
#label2 > span:nth-child(4):after
  content: 'a'
  
#label2 > span:nth-child(5):after
  content: 't'

#label2 > span:nth-child(6):after
  content: 'o'

  
//tomato animation
#tab2:checked ~ #label2 > span:nth-child(1):after
  animation: moveone 1s linear 1 forwards
  transition: .5s
  @keyframes moveone
    10%
      content: 'a'
      color: red
    20%
      content: 'R'
      color: blue
    30%
      content: '%'
      color: green
    40%
      content: 't'
      color: white
      font-size: 30px
    100%
      content: 't'
      color: white
      font-size: 30px
      transition: .5s

    
#tab2:checked ~ #label2 > span:nth-child(2):after
  animation: movetwo 1s linear 1 forwards
  @keyframes movetwo
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'o'
      color: white
      font-size: 30px
    100%
      content: 'o'
      color: white
      font-size: 30px

#tab2:checked ~ #label2 > span:nth-child(3):after
  animation: movethree 1s linear 1 forwards
  @keyframes movethree
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'Y'
      color: peachpuff
    60%
      content: 'm'
      color: white
      font-size: 30px
    100%
      content: 'm'
      color: white
      font-size: 30px
  
#tab2:checked ~ #label2 > span:nth-child(4):after
  animation: movefour 1s linear 1 forwards
  @keyframes movefour
    10%
      content: 'x'
      color: green
    20%
      content: '@'
      color: yellow
    30%
      content: 'x'
      color: red
    40%
      content: 'A'
      color: purple
    50%
      content: '+'
      color: orange
    60%
      content: '?'
      color: pink
    70%
      content: 'a'
      color: white
      font-size: 30px
    100%
      content: 'a'
      color: white
      font-size: 30px
    
#tab2:checked ~ #label2 > span:nth-child(5):after
  animation: movefive 1s linear 1 forwards
  @keyframes movefive
    10%
      content: '?'
      color: purple
    20%
      content: 'x'
      color: orange
    30%
      content: 'w'
      color: purple
    40%
      content: 'u'
      color: pink
    50%
      content: 'K'
      color: green
    60%
      content: 'v'
      color: yellow
    70%
      content: 'G'
      color: red
    80%
      content: 't'
      color: white
      font-size: 30px
    100%
      content: 't'
      color: white
      font-size: 30px
    
#tab2:checked ~ #label2 > span:nth-child(6):after
  animation: movesix 1s linear 1 forwards
  @keyframes movesix
    10%
      content: 'H'
      color: peachpuff
    20%
      content: '&'
      color: red
    30%
      content: '#'
      color: blue
    40%
      content: 'B'
      color: green
    50%
      content: 'o'
      color: yellow
    60%
      content: '7'
      color: orange
    70%
      content: 'Z'
      color: green
    80%
      content: 'Q'
      color: green
    90%
      content: 'o'
      color: white
      font-size: 30px
    100%
      content: 'o'
      color: white
      font-size: 30px
    
#tab2:checked ~ .full-screen
  background: tomato
  transition: .5s
  transition-delay: 1s
 
//yellow lettering
#label3 > span:nth-child(1):after
  content: 'y'
  
#label3 > span:nth-child(2):after
  content: 'e'

#label3 > span:nth-child(3):after
  content: 'l'
  
#label3 > span:nth-child(4):after
  content: 'l'
  
#label3 > span:nth-child(5):after
  content: 'o'

#label3 > span:nth-child(6):after
  content: 'w'
  

#tab3:checked ~ #label3 > span:nth-child(1):after
  animation: one 1s linear 1 forwards
  transition: .5s
  @keyframes one
    10%
      content: 'a'
      color: red
    20%
      content: 'R'
      color: blue
    30%
      content: '%'
      color: green
    40%
      content: 'y'
      color: white
      font-size: 30px
    100%
      content: 'y'
      color: white
      font-size: 30px
      transition: .5s

    
#tab3:checked ~ #label3 > span:nth-child(2):after
  animation: two 1s linear 1 forwards
  @keyframes two
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'e'
      color: white
      font-size: 30px
    100%
      content: 'e'
      color: white
      font-size: 30px

#tab3:checked ~ #label3 > span:nth-child(3):after
  animation: three 1s linear 1 forwards
  @keyframes three
    10%
      content: '!'
      color: yellow
    20%
      content: 'b'
      color: purple
    30%
      content: '3'
      color: orange
    40%
      content: 's'
      color: teal
    50%
      content: 'Y'
      color: peachpuff
    60%
      content: 'l'
      color: white
      font-size: 30px
    100%
      content: 'l'
      color: white
      font-size: 30px
  
#tab3:checked ~ #label3 > span:nth-child(4):after
  animation: four 1s linear 1 forwards
  @keyframes four
    10%
      content: 'x'
      color: green
    20%
      content: '@'
      color: yellow
    30%
      content: 'x'
      color: red
    40%
      content: 'A'
      color: purple
    50%
      content: '+'
      color: orange
    60%
      content: '?'
      color: pink
    70%
      content: 'l'
      color: white
      font-size: 30px
    100%
      content: 'l'
      color: white
      font-size: 30px
    
#tab3:checked ~ #label3 > span:nth-child(5):after
  animation: five 1s linear 1 forwards
  @keyframes five
    10%
      content: '?'
      color: purple
    20%
      content: 'x'
      color: orange
    30%
      content: 'w'
      color: purple
    40%
      content: 'u'
      color: pink
    50%
      content: 'K'
      color: green
    60%
      content: 'v'
      color: yellow
    70%
      content: 'G'
      color: red
    80%
      content: 'o'
      color: white
      font-size: 30px
    100%
      content: 'o'
      color: white
      font-size: 30px
    
#tab3:checked ~ #label3 > span:nth-child(6):after
  animation: six 1s linear 1 forwards
  @keyframes six
    10%
      content: 'H'
      color: peachpuff
    20%
      content: '&'
      color: red
    30%
      content: '#'
      color: blue
    40%
      content: 'B'
      color: green
    50%
      content: 'o'
      color: yellow
    60%
      content: '7'
      color: orange
    70%
      content: 'Z'
      color: green
    80%
      content: 'Q'
      color: green
    90%
      content: 'w'
      color: white
      font-size: 30px
    100%
      content: 'w'
      color: white
      font-size: 30px
    
#tab3:checked ~ .full-screen
  background: darken(#F8E666, 22%)
  transition: .5s
  transition-delay: 1s
  
input
  display: none
  
label
  border: 3px solid white
  width: 130px
  height: 40px
  display: flex
  justify-content: center
  align-items: center
  background: transparent
  cursor: pointer
  transition: .3s
  &:hover
    box-shadow: 0px 0px 15px 5px #fff
  
@media screen and (max-width: 500px)
  .container
    transition: .5s
    flex-direction: column