body{
            background-color:lightblue;
        }
    
        .canvas-stand{
         position:absolute;
         width:500px;
         height:500px;
         margin-top:3%;
         margin-left:30%;
         display:flex;
         justify-content: center;
        
        }
    
    
        .canvas{
          position:absolute;
          width:240px;
          height:300px;
          align-self: center;  
          box-shadow: 2px 1px 5px 1px #121212;
          background-size:cover;
          background-position:center; 
          display:none;
            
        }
        
        .next{
          animation: nextAnimate 1.5s linear;
        
        }
        
        
        .canvas-one{
           background-image:url(../img/1.jpg);
           
        }
        
         .canvas-two{
           background-image:url(../img/2.jpg);
           
        }
        
        .canvas-three{
           background-image:url(../img/3.jpg);
         
        }
        
        .canvas-four{
           background-image:url(../img/1.jpg);
           background-size:contain;
        

        }
        
        .canvas-five{
           background-image:url(../img/2.jpg);
          
      
        }
        
        .canvas-six{
           background-image:url(../img/3.jpg);
            
        }
        
        
         .canvas:before{
            content:"";
            position:absolute;
            width:4px;
            height:300px;
            margin-left:240px;
            background-color:rgba(0,0,0,0.3);
            transform:skewY(50deg);
        
        }
        
        .canvas:after{
            content:"";
            position:absolute;
            width:240px;
            height:3px;
            margin-top:-3px;
            margin-left:2px;
            background-color:rgba(0,0,0,0.2);
            transform: skewX(-50deg);
        
        }
        
        .upper-hold{
          position:absolute;
          width:150px;
          height:25px;
          margin-top:80px;
          box-shadow:0 2px 3px #696969,
           0 -1px 1px #696969   ;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          z-index:2;
         
        }
        
        .upper-hold:before{
            content:"";
            position:absolute;
            width:7px;
            height:7px;
            background-color:#262626;
            border-radius:50%;
            margin-top:10px;
            margin-left:72px;
            
        }
        
         .lower-hold{
          position:absolute;
          width:250px;
          height:20px;
          margin-top:385px;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          box-shadow:0 2px 3px #696969;
          z-index:2;
         
        }
        
         .lower-hold:before{
            content:"";
            position:absolute;
            width:23px;
            height:4px;
            margin-left:15px;
            margin-top:20px;
            background-color:rgba(0,0,0,0.2);
            transform:skewX(30deg);
        
        }
        
         .lower-hold:after{
            content:"";
            position:absolute;
            width:23px;
            height:4px;
            margin-left:215px;
            margin-top:20px;
            background-color:rgba(0,0,0,0.2);
            transform:skewX(-30deg);
        
        }
        
        .lower-hold-two{
          position:absolute;
          width:270px;
          height:18px;
          margin-top:470px;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          box-shadow:0 3px 2px #696969,
             2px 2px 2px #696969 ;
          z-index:-1;
         
        }
        
         .lower-hold-two:before{
            content:"";
            position:absolute;
            width:269px;
            height:4px;
            margin-left:1px;
            margin-top:17px;
            background-color:rgba(0,0,0,0.3);
            transform:skewX(50deg);
        
        }
        
         .lower-hold-two:after{
            content:"";
            position:absolute;
            width:165px;
            height:3px;
            margin-top:90px;
            margin-left:50px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.1);
            box-shadow:0 0 15px 0 rgba(0,0,0,0.5),
              5px 15px 15px 0 rgba(0,0,0,0.5),
              5px -15px 15px 0 rgba(0,0,0,0.5);
            border-radius:50%;
        
        }
        
        .vertical-holds{
          position:absolute;
          width:23px;
          height:550px;
          margin-top:5px;
          border-radius:20px 20px 0 0;
          box-shadow:1.5px 3px 4px #696969;
          background: repeating-linear-gradient(90deg , #cd853f, #daa520 5px,#cd853f 5px); 
          
         
        }
        
        .hold-one{
            height:580px;
            margin-left:-170px;
            margin-top:25px;
            transform:rotate(8deg);
            box-shadow:3px 2px 4px #696969;
        }
        
        .hold-one:before{
            content:"";
            position:absolute;
            width:4px;
            height:575px;
            margin-top:6px;
            margin-left:20px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.3);
            transform:skewY(5deg);
        
        }
        
        .hold-one:after{
            content:"";
            position:absolute;
            width:4px;
            height:145px;
            margin-top:475px;
            margin-left:70px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.1);
            box-shadow:0 0 15px 0 rgba(0,0,0,0.5);
            transform: rotate(60deg) skewY(5deg);
        
        }
        
          .hold-three{
            height:580px;
            margin-left:170px;
            margin-top:25px;
            box-shadow:-2px 2px 4px #696969;
            transform:rotate(-8deg);
        }
        
        .hold-three:before{
            content:"";
            position:absolute;
            width:4px;
            height:575px;
            margin-top:6px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.3);
            transform:skewY(5deg);
        
        }
        
        .hold-three:after{
            content:"";
            position:absolute;
            width:4px;
            height:145px;
            margin-top:475px;
            margin-left:-40px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.1);
            box-shadow:0 0 15px 0 rgba(0,0,0,0.5);
            transform: rotate(-60deg) skewY(-5deg);
        
        }
        
        .hold-two{
            z-index:-2;
        }
        
         .hold-two:before{
            content:"";
            position:absolute;
            width:23px;
            height:70px; 
            margin-top:480px;
            background-color:rgba(0,0,0,0.25);
        
        }
        
        img{
            position:absolute;
            width:220px;
            height:270px;
            margin-left:602px;
            margin-top:150px;
            background-blend-mode: lighten;
        }
        
        @keyframes nextAnimate{
            0%{
                margin-left:520px
            }
            
            100%{
                margin-left:0;
             }
        }


@media(max-width:576px){
  
  .canvas-stand{
        
         margin-top:3%;
         margin-left:5%;
         
        
        }
}