html, body{
    height:100%;
    margin:0;
    font-family:Arial;
  }

  #top{
    height:50%;
    position:relative;
    border-bottom:0px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0AA;
  }

  #dropArea{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  #gif
  {
    width:100px;
    height:100px;
    object-fit:contain;
    image-rendering: pixelated;    
  }

  #controls
  {
    position:absolute;
    right:10px;
    top:10px;
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .ctrlBtn
  {
    width:30px;
    height:30px;
    border-radius: 10px;
    border:0px solid black;
    background:#eee;
    cursor:pointer;
    font-weight:bold;
  }

  #bottom{
    height:50%;
    display:flex;
/*    align-items:center;*/
    justify-content:center;
  }

  table
  {
    height: 250px;
    position: relative;
    width: 100%;
    top: 0px; 
    border-collapse:collapse;
  }

  .vaherida {
    height:40px;
    text-align:center;
    width:50%;
  }
  .frame {
    height:40px;
    text-align:center;
    width:25%;
    background:#E8DAB2;
  }

  .vasak, .parem {
    border:0px solid black;
    width:50%;
    height:40px;
    text-align:center;
  }

  .vasak{
    background:#FF9900;
  }
  .parem{
    background: #E8DAB2;
  }