*{
    box-sizing: border-box;
  }

  .swoon {
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 20px;
    display: grid;
    margin: 60px;
  }
  .s{
    width: 150px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
  }

  .w{
    width: 250px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    grid-column-start: 5;
  }
  .o{
    width: 150px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    grid-column-start: 11;
  }
  .oo{
    width: 150px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    grid-column-start: 15;
  }

  .n{
    width: 200px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
    grid-column-start: 19;
  }
  .block{
    background-color: rgb(160, 219, 255);
    filter: drop-shadow(5px 5px pink);
    animation: changebg 5s infinite;
    mix-blend-mode: multiply;
    border-radius: 20%;
    
  }

  .block:hover {
    background-color: plum;
    border: 5px dotted greenyellow;
  }


  .text-shadow {
    position:fixed;
    top:0;
    color: white;
    font-size: 100px;
    font-weight: bold;
    -webkit-text-stroke: 5px;

  }

  @keyframes changebg{
    0%{
      background-color: rgb(255, 255, 100);
      border: 5px dotted pink;
    }
    100%{
      background-color:lightskyblue;
      transform: rotate(360deg);
      border: 5px dotted pink;
    }
  }