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%);
  }