.keyboard-container {
  position: absolute;
  top: 430px;
  left: calc( 50% - 500px);
  width: 1000px;
  display: flex;
  justify-content: space-between;
  padding: 5px 0 25px;
  flex-direction: column;
  height: 280px;
  margin: 0px auto;
  background-color: #000000;
  border: 3px solid rgb(44, 1, 16);
  border-radius: 6%;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
  z-index: 2;
}


.keyboard-row {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.key {
  /*border: 1px solid black;*/
  border-radius: 6px;
  min-width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 20px;
  background-color: black;
  color: white;
  border: 1px solid white;
  border-radius: 10px;
  box-shadow: 0px 6px 4px 0px rgba(34, 23, 210, 0.84); 
}

.key:hover {
 cursor: pointer;
 border: 1px solid rgba(34, 23, 210, 0.1);
}





.key-backspace {

}

.key-tab {
  padding: 10px 20px;
}

.key-capslk {
  padding: 10px 16px;
}

.key-enter {
  padding: 10px 32px;
}

.key-shift-left, .key-shift-right {
  padding: 10px 35px;
}

.key-top {
  
}

.key-ctrl {
  padding: 10px 20px;
}

.key-win {
  letter-spacing: -2px;
  line-height: 0.8;
  padding: 10.5px 10px;
}

.key-alt-left, .key-alt-right {
  
}

.key-nbsp {
  min-width: 10px;
  min-height: 10px;
  padding: 10px 240px;
}

.key-left {
  
}

.key-bottom {
  
}

.key-right {
  
}


.key-del {
  
}

.key-special {
  font-size: 14px;
}




.key-style-toupper {
text-transform: uppercase; /* Заглавные буквы */
}




.key-active {
  cursor: pointer;
  animation-duration: 0.1s;
  animation-name: slidein;
  box-shadow: 0px 1px 5px 1px rgba(34, 23, 210, 0.8), inset 0px 2px 20px 2px rgba(34, 23, 210, 0.84);
  
  position: relative;
  top: 4px;
 }

 @keyframes slidein {
  0% { 
    box-shadow: 0px 6px 4px 0px rgba(34, 23, 210, 0.84), inset 0px 0px 0px 0px rgba(34, 23, 210, 0.84);
    
    top: 0px; 
  }
  10% { 
    box-shadow: 0px 6px 5px 0px rgba(34, 23, 210, 0.7),  inset 0px 0px 5px 2px rgba(34, 23, 210, 0.84);;
    top: 1px; 
  }
  20% { 
    box-shadow: 0px 6px 6px 0px rgba(34, 23, 210, 0.7), inset 0px 0px 10px 4px rgba(34, 23, 210, 0.84);
    top: 1px; 
  }
  30% { 
    box-shadow: 0px 6px 7px 0px rgba(34, 23, 210, 0.7), inset 0px 0px 10px 6px rgba(34, 23, 210, 0.84);
    top: 2px; 
  }
  40% { 
    box-shadow: 0px 6px 8px 0px rgba(34, 23, 210, 0.6), inset 0px 0px 10px 8px rgba(34, 23, 210, 0.84);
    top: 2px; 
  }
  50% { 
    box-shadow: 0px 6px 9px 0px rgba(34, 23, 210, 0.6), inset 0px 0px 10px 12px rgba(34, 23, 210, 0.84);
    top: 3px;
  }
  60% { 
    box-shadow: 0px 6px 10px 0px rgba(34, 23, 210, 0.6), inset 0px 0px 10px 15px rgba(34, 23, 210, 0.84);
    top: 3px;
  }
  70% { 
    box-shadow: 0px 6px 11px 0px rgba(34, 23, 210, 0.6), inset 0px 0px 10px 18px rgba(34, 23, 210, 0.84);
    top: 4px;
  }
  80% { 
    box-shadow: 0px 6px 12px 0px rgba(34, 23, 210, 0.5),  inset 0px 0px 10px 20px rgba(34, 23, 210, 0.84);
    top: 4px;
  }
  90% { 
    box-shadow: 0px 6px 13px 0px rgba(34, 23, 210, 0.5), inset 0px 0px 10px 25px rgba(34, 23, 210, 0.84);
    top: 5px; 
  }
  100% { 
    box-shadow: 0px 6px 14px 0px rgba(34, 23, 210, 0.1), inset 0px 0px 10px 30px rgba(34, 23, 210, 0.84);
    top: 5px;
  }
    
  
}



.reference {
    position: absolute;
    top: 70px;
    left: calc( 50% - 145px);
    overflow: hidden;
    height: min-content;
    border: 1px solid black;
    border-radius: 5px;
    padding: 20px;
    background-color: white;
    z-index: 30;
}

.reference__text {
    width: 250px;
    white-space: pre-wrap;
}

.button_reference {
  position: absolute;
  top: 16px;
  left: calc(50% - 200px);
  width: 400px;
  height: min-content;
  margin: 10px;
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px blue;
  outline: none;
  padding: 4px 0;
  z-index: 1;
}

.button_reference:hover {
  cursor: pointer;
  box-shadow: 0 0 5px 5px red;
}


.none {
  display: none;
}