*{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .squarecontainer {
        
        display: flex;
        background-color: black;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .loader, .loader span {
        width: 10em;
        height: 10em;
        border: 0.2em solid white;
        font-size: 5px;
        border-radius: 1em;
        position: absolute;
        mix-blend-mode: screen;
      }
      .loader {
        background-color: gold;
        animation: rotating 2s linear infinite;
      }
      @keyframes rotating {
        to {
          transform: rotate(1turn);
        }
      }
      .loader span {
        animation: de-rotating 4s linear infinite;
      }
      @keyframes de-rotating {
        from, to{
          transform: rotate(0deg) scale(0.5);
        }
        50% {
          transform: rotate(-180deg) scale(1.2);
        }
      }
      .loader span:nth-child(1) {
        top: 4em;
        left: 4em;
        background-color: dodgerblue;
      }
      .loader span:nth-child(2) {
        top: -4em;
        left: 4em;
        background-color: hotpink;
      }
      .loader span:nth-child(3) {
        top: 4em;
        left: -4em;
        background-color: mediumpurple;
      }
      .loader span:nth-child(4) {
        top: -4em;
        left: -4em;
        background-color: limegreen;
      }




    @media (max-width: 499px) {
      .loader, .loader span {
        font-size: 4px;
      }
    }