.spinner {
    position: fixed;
    height: 100px;
    width: 100px;
    animation: spin 2s ease infinite;
    display: flex;
    flex-wrap: wrap;
    bottom: 50%;
    
  }
  
  .spinner div {
    height: 33.33%;
    width: 33.33%;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 10%;
  }
  
  /* Rubik's cube colors */
  .spinner div:nth-child(1) { background: #f44336; } /* red */
  .spinner div:nth-child(2) { background: #ffeb3b; } /* yellow */
  .spinner div:nth-child(3) { background: #4caf50; } /* green */
  .spinner div:nth-child(4) { background: #2196f3; } /* blue */
  .spinner div:nth-child(5) { background: #ffffff; } /* white */
  .spinner div:nth-child(6) { background: #ff9800; } /* orange */
  .spinner div:nth-child(7) { background: #f44336; } /* red */
  .spinner div:nth-child(8) { background: #ffeb3b; } /* yellow */
  .spinner div:nth-child(9) { background: #4caf50; } /* green */
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }