body {


    margin: auto;
    padding: auto;
  }
  
  .cercev{
  box-sizing: border-box;
  border-radius: 0px ;
  border-style: hidden;
  border: 2px solid;
  border-color: rgb(225, 5, 5);
  width: 524px;
  height: 525px;
  top: 200px;
  left: 400px;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  
  
  
  }
  
  
  .pixel {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #56c52d;
    box-sizing: border-box;
    margin: 0px; 
     padding: 0px;
     gap: 0;
     display: flex;
     
  margin: 0;
  padding: 25px ;
  }
  
  .kutu56{ background-color: rgb(118, 118, 38);}
  
  .kutu66{ background-color: rgb(118, 118, 38);}
  
  
  .kutu76{ background-color: rgb(118, 118, 38);}
  
  
  
  .kutu47{ background-color: rgb(118, 118, 38);}
  
  .kutu38{ background-color:rgb(118, 118, 38);}
  
  
  
  .kutu45{ background-color: rgb(118, 118, 38);}
  
  .kutu34{ background-color: rgb(118, 118, 38);}
  
  .kutu25{ background-color: rgb(118, 118, 38);}
  
  .kutu27{ background-color: rgb(118, 118, 38);}
  
  .kutu16{ background-color: rgb(118, 118, 38);}
  
  
  
  
  
  .kutu46{ background-color: yellow;
    
  }
  
  .kutu46::after{
       content: "";
       box-shadow: 439px 10px 200px 60px  rgb(163, 109, 0) ;
       
       
      
  }
  
  
  
  
  
  .kutu36{ background-color: yellow;}
  .kutu35{ background-color: yellow;}
  .kutu37{ background-color: yellow;}
  .kutu26{ background-color: yellow;}
  
  @media only screen and (max-width: 700px){
  
  
  
    
  
  
  
   
  }
  
  
  @media only screen and (max-width: 700px){
  
    .kutu46{ background-color: #fff;}
  
    .kutu56{ background-color:#fff;}
  
    .kutu66{ background-color:#fff;}
    
    
    .kutu76{ background-color: #fff;}
    
    
    
    .kutu47{ background-color: #fff;}
    
    .kutu38{ background-color:#fff;}
    
    
    
    .kutu45{ background-color: #fff;}
    
    .kutu34{ background-color: #fff;}
    
    .kutu25{ background-color: #fff;}
    
    .kutu27{ background-color: #fff;}
    
    .kutu16{ background-color: #fff;}
  
  
  
  .kutu36{ background-color: #fff;}
  .kutu35{ background-color: #fff;}
  .kutu37{ background-color: #fff;}
  .kutu26{ background-color: #fff;}
  
  
  
  
  
  
  .kutu21{ background-color: black;}
  .kutu22{ background-color: black;}
  .kutu23{ background-color: black;}
  .kutu61{ background-color: black;}
  .kutu62{ background-color: black;}
  .kutu63{ background-color: black;}
  .kutu31{ background-color: black;}
  
  .kutu41{ background-color: black;}
  .kutu51{ background-color: black;}
  
  
  
  .kutu27{ background-color: black;}
  .kutu25{ background-color: black;}
  .kutu26{ background-color: black;}
  .kutu47{ background-color: black;}
  .kutu67{ background-color: black;}
  .kutu35{ background-color: black;}
  .kutu55{ background-color: black;}
  .kutu65{ background-color: black;}
  .kutu66{ background-color: black;}
  .kutu45{ background-color: black;}
  .kutu46{ background-color: black;}
  
  
  
  .kutu30{ background-color: black;
  
    position: relative;
    animation: dene8 2s infinite;
  
  }
  
  
  
  .kutu29{ background-color: black;
  
  
    position: relative;
    animation: dene7 3s infinite;
  
  }
  
  
  
  .kutu39{ background-color: black;
  
    position: relative;
    animation: dene6 5s infinite;
  
  }
  
  
  .kutu49{ background-color: black;
  
         position: relative;
         animation: dene5 4s infinite;
  
  }
  
  
  
  .kutu50{ background-color: black;
  
       position: relative;
       animation: dene4 2s infinite;
  
  }
  
  .kutu60{ background-color: black;
        position: relative;
        animation: dene3 5s infinite;
  }
  
  .kutu70{ background-color: black; 
        position: relative;
        animation: dene 4s infinite;}
  
  
  .kutu69{ background-color: black; 
         position: relative;
         animation: dene2 3s infinite;
  
  }
  
  }
  
  
  
  
  
  @keyframes dene{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: #fd0000;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  
  @keyframes dene2{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: yellow;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  
  @keyframes dene3{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: yellow;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  
  @keyframes dene4{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: #fd0000;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  
  @keyframes dene5{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: yellow;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  @keyframes dene6{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: #fd0000;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  
  @keyframes dene7{
  
  
    0%   {top: 0px;}
    25%  {top: 0px; background-color: yellow;}
    75%  {top: 0px}
    100% {top: 0px;}
  
  
  }
  
  @keyframes dene8{
  
  
    0%   {top: 100px;}
    25%  {top: 0px; background-color: #fd0000;}
    75%  {top: 60px}
    100% {top: 100px;}
  
  
  }