@media (min-width:0px) and (max-width:399px) {     
    #cssdebug{ background-color: lightblue;}

}    
/* lightblue */





@media (min-width:400px) and (max-width:450px) {     
    #cssdebug{ background-color: blue;}

}  
/* blue */








@media (min-width:451px) and (max-width:600px) {          
    #cssdebug{ background-color: lightgreen;}

} 
/* lightgreen */









@media (min-width:601px) and (max-width:768px) {          
    #cssdebug{ background-color: green;}
  
} 
/* green */









@media (min-width:769px) and (max-width:900px) {       
    #cssdebug{ background-color: gray;}

} 
/* gray */






@media (min-width:900px) and (max-width:991px) {       
    #cssdebug{ background-color: lightgoldenrodyellow;}
 
} 
/* lightgoldenrodyellow */



@media (min-width:992px) and (max-width:1023px) {       
    #cssdebug{ background-color: lightgray;}
  
} 
/* lightgray */


















@media (min-width:1024px) and (max-width:1199px) {          
    #cssdebug{ background-color: brown;}
 
} 
/*   brown */






@media (min-width:1200px) and (max-width:1350px) {          
    #cssdebug{ background-color: white;}
 
} 
/*   white */






@media (min-width:1351px) and (max-width:1500px) {          
    #cssdebug{ background-color: orange;}

} 
/*   orange */







@media (min-width:1501px) and (max-width:1750px) {          
    #cssdebug{ background-color:  red;}

} 
/*   red */




@media (min-width:1751px) and (max-width:5000px) {      
    #cssdebug{ background-color: black;}

} 


/* black */

body{
    overflow-y: scroll;
}

          .hatloader{
            position:fixed; top:0px; left:0px; height: 100%; width: 100%; 
            background-color: #fff; z-index: 9999999; 
            display: flex; justify-content: center; align-items: center;
          }
          
          .hatloaderin{
               position:fixed; top:50%; left:48%; transform: translate(-50%, -50%);
              width:150px; height: 150px; border-radius: 150px;
              display: flex; justify-content: center; align-items: center;
              border: 0px dashed #666;
          }
          
          .load-harf {
              position: absolute; color:#3bb8da;
          }
          
          .load-harf-0{ top:60px; left:3px;}
          .load-harf-1{ top:36px; left:7px;}
          .load-harf-2{ top:15px; left:17px;}
          .load-harf-3{ top:-2px; left:33px;}
          .load-harf-4{ top:-10px; left:55px;}
          .load-harf-5{ top:-15px; left:79px;}
          .load-harf-6{ top:-10px; left:101px;}
          .load-harf-7{ top:-2px; left:119px;}
          .load-harf-8{ top:15px; left:135px;}
          .load-harf-9{ top:36px; left:145px;}
          .load-harf-10{ top:60px; left:150px;}
          .load-harf-11{ top:84px; left:145px;}
          .load-harf-12{ top:103px; left:135px;}
          .load-harf-13{ top:118px; left:119px;}
          .load-harf-14{ top:129px; left:101px;}
          .load-harf-15{ top:134px; left:79px;}
          .load-harf-16{ top:129px; left:55px;}
          .load-harf-17{ top:118px; left:33px;}
          .load-harf-18{ top:103px; left:17px;}
          .load-harf-19{ top:81px; left:7px;}