* {
  margin: 0;
  padding: 0;
}

body {
 
  background: #eee;
}

#keybord_container {
  margin: 0px auto;
  width: 100%;
  align-items: center;
  align-content: center;}

#write {
  width: 100%;
  min-height: 160px;
  max-height: 200px;
  font-size: 18px;
  background: buttonface;
  color: black;
  border: 1px solid #f9f9f9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  outline: none;
  cursor: pointer;
}

#keyboard {
  list-style: none;
  padding: 5px;
  font-size: 15px;
 
  width: 615px;
  background-color: #6f5193;
  color: #39004d;
  align-items: center;
}

#keyboard li {
  float: left;
  width: 33.5px;
  height: 41px;
  line-height: 35px;
  text-align: center;
  background: white;
  border: 2px solid #39004d;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#keyboard .delete {
  width: 100px;
}

.lastitem {
  margin-right: 0;
}

#keyboard .space {
  width: 229px;
}

#keyboard .clear {
  width: 72px;
}

#keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #e5e5e5;
  color: white;
  cursor: pointer;
  background-color: #6f5193;
}


.found {
  background-color: #6f5193;
  font-weight: bold;
  color: white;
}

@media only screen and  (max-width: 340px) {
  #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }

  #keyboard
  {width: 100%;}

  #keyboard li
  {
      width: 44px;
  }
 #keyboard .space {
  width: 231px;
}
  #keyboard .delete
  {
    width: 175px;
  }
  #keyboard .clear
  {
    width: 44px;
  }

}
@media only screen and (min-width: 341px) and (max-width: 375px) {
  #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
  #keyboard{
    width: 100%;
  }

  #keyboard li
  {
      width: 38.5px;
  }
 #keyboard .space {
  width: 231px;
}
  #keyboard .delete
  {
    width: 115px;
  }
  #keyboard .clear
  {
    width: 114px;
  }

}

@media only screen and (min-width: 376px) and (max-width: 450px) {

  #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
  #keyboard{
    width: 100%;
  }

  #keyboard li
  {
      width: 38.5px;
  }
 #keyboard .space {
  width: 271px;
}
  #keyboard .delete
  {
    width: 115px;
  }
  #keyboard .clear
  {
    width: 154px;
  }

}

@media only screen and (min-width: 451px) and (max-width: 575px) {

  #keybord_container #write #keyboard .found
  {
    height: auto;
    width: 100%;

  }

  #keyboard{
    width: 100%;
  }

  #keyboard li
  {
      width: 39.5px;
  }
 #keyboard .space {
  width: 318px;
}
  #keyboard .delete
  {
    width: 117px;
  }
  #keyboard .clear
  {
    width: 275px;
  }

}

@media only screen and (min-width: 576px) and (max-width: 800px) {

  #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
   #keyboard{
    width: 380px;
  }

  #keyboard li
  {
      width: 41px;
  }
 #keyboard .space {
  width: 372px;
}
  #keyboard .delete
  {
    width: 122px;
  }
  #keyboard .clear
  {
    width: 245px;
  }

}
@media only screen and  (min-width: 801px) and (max-width: 1100px)  {
 #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
  #keyboard
  {width: 390px;}

  #keyboard li
  {
      width: 41.5px;
  }
 #keyboard .space {
  width: 160px;
}
  #keyboard .delete
  {
    width: 125.5px;
  }
  #keyboard .clear
  {
    width: 91px;
  }

}
@media only screen and (min-width: 1101px) and (max-width: 1300px){
 #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
  #keyboard
  {
    width: 558px;
  }

  #keyboard li
  {
      width: 42px;
  }
 #keyboard .space {
  width: 419px;
}
  #keyboard .delete
  {
    width: 125px;
  }
  #keyboard .clear
  {
    width: 419px;
  }

}


@media only screen and (width: 1440px) {
 #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
  #keyboard
  {width: 665px;}

  #keyboard li
  {
      width: 46.5px;
  }
 #keyboard .space {
  width: 419px;
}
  #keyboard .delete
  {
    width: 139.5px;
  }
  #keyboard .clear
  {
    width: 91px;
  }

}
@media only screen and (min-width: 1920px) and (max-width: 2400px){
 #keybord_container #write .found
  {
    height: auto;
    width: 100%;

  }
 #keyboard
  {
    width: 988px;
  }
  #keyboard li
  {
      width: 48.6px;
  }
 #keyboard .space {
  width: 695px;
}
  #keyboard .delete
  {
    width: 98px;
  }
  #keyboard .clear
  {
    width: 83.9px;
  }

}

@media only screen and (min-width: 2560px) {
 #keybord_container #write  .found
  {
    height: auto;
    width: 100%;

  }
   #keyboard
  {width: 1500px;}

  #keyboard li
  {
      width: 87.5px;
  }
 #keyboard .space {
  width: 522px;
}
  #keyboard .delete
  {
    width: 172px;
  }
  #keyboard .clear
  {
    width: 91px;
  }

}