*{
    box-sizing: border-box;
  }

  body{
    margin: 3vw 3vw;
    background-color: #c6cbce;
  }
  
  .letter{
    width: 14vw;
    height: 24.5vw;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 0.4vw;
  }

#container1{
    display: flex;
    grid-template-columns: 14vw 14vw 14vw 14vw 14vw 14vw 14vw;
    grid-template-rows: 24.5vw;
}

#container2{
    display: flex;
    grid-template-columns: 14vw 14vw 14vw 14vw 14vw 14vw;
    grid-template-rows: 24.5vw;
}

  .block{
    background: black;
    border-radius: 50% 50% 50% 50%;
    animation: changebg 1.8s infinite alternate;
  }


.block:hover{
    border: 0.24vw solid #02bdfd;
}
  

@keyframes changebg{
    0%{
        background-color:white ;
    }
    100%{
        background-color:#fcdcf1 ;
        border-radius: 0%;
    }
    }

  /*  border-radius: 50% 0 0 0;*/
  /*  transform: skew(10deg);*/
  /*  mix-blend-mode: multiply; */
  /*  filter: drop-shadow(15px 15px yellow);*/