<link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">


  <div class="background">

    <div>

      <div class="red">
        <div class="orange">
          <div class="yellow">
            <div class="green">
              <div class="blue">
                <div class="darkblue">
                  <div class="purple">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="click" id="el1">
        C<br />
        L<br />
        I<br />
        C<br />
        K
      </div>
      <div class="me" id="el2">
        M<br />
        E
      </div>

    </div>

  </div>

  <script>
    let el1 = document.getElementById('el1');
    let el2 = document.getElementById('el2');
    el1.addEventListener('click',( event )=>{
      el1.classList.add('clicked');
    });
    el2.addEventListener('click',( event )=>{
      el2.classList.add('clicked');
    });
  </script>

body {
    background-color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }


  .background{
    background-color:black;
    position: relative;
    width: 900px;
    height: 700px;
  }

  .click {
    background-color: black;
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: white;
    font-family: 'Lilita One', cursive;
    font-size: 30pt;
    top: -100px;
    height: 350px;
    width: 900px;
    right: 0;
    transition: right 1s ease;
  }
  .click.clicked {
    right: 900px;
  }

  .me {
    background-color: white;
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: black;
    font-family: 'Lilita One', cursive;
    font-size: 30pt;
    top: -100px;
    left: 0%;
    height: 350px;
    width: 900px;
    transition: left 1s ease;
  }
  .me.clicked {
    left: 900px;
  }




  .red {
    background-color: red;
    position: relative;
    top: 0%;
    height:100px;
    width:900px;
  }

  .red:hover {
    background: linear-gradient(0deg, rgba(253,123,45,1) 0%, rgba(195,34,34,1) 100%);
  }

  .orange {
    background-color: orange;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .orange:hover {
    background: linear-gradient(0deg, rgba(253,204,45,1) 0%, rgba(253,123,45,1) 100%);
  }


  .yellow {
    background-color: yellow;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .yellow:hover {
    background: linear-gradient(0deg, rgba(41,255,0,1) 0%, rgba(253,204,45,1) 100%);
  }

  .green {
    background-color: green;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .green:hover {
    background: linear-gradient(0deg, rgba(0,239,255,1) 0%, rgba(41,255,0,1) 100%);
  }

  .blue {
    background-color: blue;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .blue:hover {
    background: linear-gradient(0deg, rgba(18,0,203,1) 0%, rgba(0,239,255,1) 100%);
  }

  .darkblue {
    background-color:darkblue;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .darkblue:hover {
    background: linear-gradient(0deg, rgba(185,0,254,1) 0%, rgba(18,0,203,1) 100%);
  }

  .purple {
    background-color: purple;
    position: relative;
    top: 100px;
    height:100px;
    width:900px;
  }

  .purple:hover{
    background: linear-gradient(0deg, rgba(24,0,28,1) 0%, rgba(185,0,254,1) 100%);
  }