body:has(.loader){
    /* if the loader appears stop everything from being scrolled */
    position: fixed;
   }
   
    
        .loader{
            height: 100vh;;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
           
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            background: black;

            
        }
    
    .loading-container{
        height: 400px;
        width: 150px;
        position: relative;
    
    }
    
    .load-box, .correct-box{
        position: absolute;
        border-radius: 5px;
        background: rgb(72, 72, 72);
    }
    
    
    .load-box{
        height: 50px;
        width: 50px;
    
    
    }
    
    .load-box:after{
        content: "";
        position: absolute;
        height: 25px;
        width: 25px;
        background: rgb(72, 72, 72);;
        bottom: 0;
        right: 0;
        border-radius: 6px;
        animation:correct-item 2s infinite;
    }
    
    
    
    .correct-box{
        height: 50px;
        width: 50px;
        top: 100px;
        left: 90px;
        animation: correct 2s infinite;
        
    }
    
    /* project item */
    @keyframes correct-item{
    
        10%{
            transform: rotateZ(90deg);
            right: -25px;
            bottom: 0;
            background: rgb(72, 72, 72);
        } 20%{
            transform: rotateZ(180deg);
            right: -50px;
            bottom: 0;
            background: rgb(72, 72, 72);
        } 30%{
            transform: rotateZ(270deg);
            right: -75px;
            bottom: 0;
            background: rgb(72, 72, 72);
        } 50%{
            transform: rotateZ(270deg);
            right: -75px;
            bottom: 0;
            background: rgb(72, 72, 72);
    
        } 55%{
            background: var(--accent);
            transform: rotatez(280deg)
        }
        
        100%{
    
            right: -75px;
            bottom: -80px;
            transform: rotatez(360deg)
    
    
        }
        
    }
    
    @keyframes correct{
        80%{
            background: rgb(72, 72, 72);
        } 100%{
            background: var(--accent);
        }
    }
    
    
    
    @keyframes remove-loader{
       100%{
        opacity: 0;
        filter: grayscale(100%)e
       }
    }

    /* smoothly hide the loader*/
    .loader-is-hiding *{
        filter: grayscale(100%);
        opacity: 0.2;
        pointer-events: none;
        animation-play-state: paused!important;
    }