body {
        display: flex;
        text-align: center;
        justify-content: center;
        width: 100%;
        cursor: none;
        font-family: Georgia, monospace;
        font-size: 100px;
        background-color: #f1ebcf;
        
}
.custom-cursor {
        width: 80px;
        height: 80px;
        background-color: transparent;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 88;
        
        display: flex;
        pointer-events: none;
        transition: 5ms;
        
}




.pointer1 {
        display: none;
        cursor:url('pointer1.png') 4 4, default;
        width: 20px;
        height: 20px;
        }
.pointer2 {
        display: none;
        cursor:url('pointer2.png') 4 4, default;
        width: 20px;
        height: 20px;
        }


/*STRUCTURE*/

        
 
     p {
        position: absolute;
        
        font-family: Georgia, monospace; 
        font-size: 30px;
        margin-top: 25%;
     }

     h1 {
        position: absolute;
        
        font-family: Georgia, monospace; 
        font-size: 300px;
        top: -10%;
        margin-top: 13%;
        

        
        

        background: linear-gradient(to bottom, #772A00 20%, #a16210 80%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent ;
        align-items: center;
        text-align: center;
        justify-content: center;

    }
  
     h1:hover {
        
        transform: scale(1.2);
        filter: brightness(0px 0px 15px rgba (161, 98, 16, 0.5));
        transition: 0.5s;
        
    }
   

    .backbuttonimg {
        position: absolute;
        top: -70px;
        height: 350px;
        width: 350px;
        left: 10px;
    }
    .backbuttonimg:hover {
     transform: scale(1.1);
    filter: brightness(112%);
    }
    

















      #puzzle-board 

    
               .board-container {
                
               
    width: 900px;
    height: 900px;
border:5px solid #a16210;
     margin-top: 500px;
                
                flex-wrap: wrap;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

               width: 900px;
               height: 900px;

               display: grid;
 
               grid-template-columns: repeat(3, 1fr);
               grid-template-rows: repeat(3, 1fr);
               }





              #slot1 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot2 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot3 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot4 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot5 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot6 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot7 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                 display: flex;
             }
              #slot8 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }
              #slot9 {
                 width: 300px;
                 height: 300px;
                 
                 border: 0px solid #772A00;
                display: flex;
             }




             





    #out-container-byID  {
            justify-content: left;
            position: absolute;
            
            

            }
            
                .out-container {

                
                align-items:center;
                left: 10%;
                transform: translateX(-50%);
                
                position: absolute;
                border: 4px solid #b66904; 
                background-color: #c2a58d; 

                height: 800px;
                width: 320px;
                display: grid;
               
                padding: 5px;
                
                top: 58%;
                
                 flex-wrap: wrap;
                display: flex;


    }         


             


                 .draggable-piece {
                   
                   top: 0;
                   width: 300px;
                   height: 300px;
                   box-sizing: border-box;
                   
                   flex-wrap: wrap;


                display: flex;
                 margin-left: 1px;
                padding: 0;
                 border: 3px solid #a16210;

                 cursor: grab;
                  }

                  .slot .draggable-piece {
                        width: 100%;
                        height: 100%;
                  }

                  .out-container .draggable-piece {
                        width: 150px;
                        height: 150px;
                  }

                .draggable-piece:active {
                        cursor: grabbing;
                }