/* KEYFRAMES */

        @keyframes spin {
            from {
              transform: rotate(0);
            }
            to{
              transform: rotate(359deg);
            }
          }
          
          @keyframes spin3D {
            from {
              transform: rotate3d(.5,.5,.5, 360deg);
            }
            to{
              transform: rotate3d(0deg);
            }
          }
          
          @keyframes configure-clockwise {
            0% {
              transform: rotate(0);
            }
            25% {
              transform: rotate(90deg);
            }
            50% {
              transform: rotate(180deg);
            }
            75% {
              transform: rotate(270deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          
          @keyframes configure-xclockwise {
            0% {
              transform: rotate(45deg);
            }
            25% {
              transform: rotate(-45deg);
            }
            50% {
              transform: rotate(-135deg);
            }
            75% {
              transform: rotate(-225deg);
            }
            100% {
              transform: rotate(-315deg);
            }
          }

          
          /* GRID STYLING */

          #loader {
            z-index: 9999;
            width: 100%;
            height: 100vh;
            background: #fbfbfb;
            position: fixed;
          }
          
          .spinner-box {
            position: absolute;
            width: 250px;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
          
        
                /* X-ROTATING BOXES */
        
        .configure-border-1 {
            width: 190px;
            height: 190px;
            padding: 3px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: 6px solid #2756af;
            border-radius: 10px;
            animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
          }
          
          .configure-border-2 {
            width: 190px;
            height: 190px;
            padding: 3px;
            left: -115px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: 6px solid #5fb942;
            border-radius: 10px;
            transform: rotate(45deg);
            animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
          }
          
          .configure-core {
            width: 100%;
            height: 100%;
            background-color: transparent;
          }