@media (min-width: 600px){
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.shakes {
  animation: tilt-shaking 0.5s infinite;
}
.muisti {
  position: absolute;
  z-index: 9;
  background-color: yellow;
  
}
textarea{
  color: black;
  background-color: yellow;
  border: yellow;
  width: 100%;
  height: 150px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 16px;
  min-height: 15px;
  min-width: 150px;
;
}
input{
  width: 100%;
  height: 100%;
  background-color:  #CCCC00;
  color: #fff;
  text-align: center;
  border:none;
}

.muistilappu{
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color:  #CCCC00;
  color: #fff;
  text-align: center;
}
body{
  background-image: url(https://img.freepik.com/premium-photo/directly-shot-table_1048944-7546952.jpg?semt=ais_hybrid&w=740&q=80);
  overflow: hidden;
}




#roskis{
  background-image:url(://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconfinder.com%2Ficons%2F2323617%2Fbasket_can_cartoon_garbage_mesh_rubbish_trash_icon&psig=AOvVaw1sa5KfiejmIudaIvCugx63&ust=1762936396836000&source=images&cd=vfe&opi=89978449&ved=0CBUQjRxqFwoTCJCFqv_X6ZADFQAAAAAdAAAAABAK)
}
.dot-x {
  font-family: 'DotGothic16', sans-serif;
  font-size: 250px;
  background: none;
  border: dotted;
  cursor: pointer;
  color:red;
  opacity: 0;
  position: absolute; 
  height: 100%;
  right: 0%;
  z-index: 999;


}