* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
  position: relative; /* важно для позиционирования */
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.keyboard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  border-radius: 7px;
  background-color: rgba(48, 49, 49, 0.651);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  z-index: 10; /* чтобы всегда был поверх */
  box-shadow: 8px 8px 7px rgba(48, 49, 49, 1);
}

.key {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 95% 95%; /* размер иконки */
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(150, 150, 150, 0.466);
  /* background-color: transparent;  */
  /* animation: rainbow_shadow 10s linear infinite;  */
  box-shadow: 4px 4px 8px rgba(17, 15, 122, 0.5);
  transition: box-shadow 0.3s ease;
  transition: background-color 0.3s ease;
}

.key:hover{
    background-color: rgb(206, 206, 206) !important;
    box-shadow: 5px 8px 16px rgba(17, 15, 122, 0.9) !important;
}

.key a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: transparent;
}

/*keys*/

.k1{
  background-image: url('../img/home.png');
}

.k2{
  background-image: url('../img/mail.png');
}

.k3{
  background-image: url('../img/convert.png');
}

.k4{
  background-image: url('../img/planer.png');
}

.k5{
  background-image: url('../img/cs2.png');
}
/*  .  .  .  */


.k8{
  background-image: url('../img/pma.ico');
}

/*  .  .  .  */

.k24{
    
}

/* Анимация радуги */
/* @keyframes rainbow {
  0%   { background-color: hsla(0, 100%, 70%, 0.1)!important; }
  20%  { background-color: hsla(60, 100%, 70%, 0.1)!important; }
  40%  { background-color: hsla(120, 100%, 70%, 0.1)!important; }
  60%  { background-color: hsla(180, 100%, 70%, 0.1)!important; }
  80%  { background-color: hsla(240, 100%, 70%, 0.1)!important; }
  90%  { background-color: hsla(300, 100%, 70%, 0.1)!important; }
  100% { background-color: hsla(347, 100%, 70%, 0.1)!important; }
}
@keyframes rainbow_shadow {
  0%   { box-shadow: 0 4px 8px hsla(0, 100%, 70%, 0.01); }
  20%  { box-shadow: 0 4px 8px hsla(60, 100%, 70%, 0.01); }
  40%  { box-shadow: 0 4px 8px hsla(120, 100%, 70%, 0.01); }
  60%  { box-shadow: 0 4px 8px hsla(180, 100%, 70%, 0.01); }
  80%  { box-shadow: 0 4px 8px hsla(240, 100%, 70%, 0.01); }
  90%  { box-shadow: 0 4px 8px hsla(300, 100%, 70%, 0.01); }
  100% { box-shadow: 0 4px 8px hsla(347, 100%, 70%, 0.01); }
}

.key:not([style]):not(.custom-bg) {
  animation: rainbow 10s linear infinite !important;
  animation: rainbow_shadow 10s linear infinite !important; 
  
} */


.description-box {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  padding: 20px;
  background-color: rgba(48, 49, 49, 0.651); /* такой же цвет как у клавиатуры */
  border-radius: 7px;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Показываем описание */
.description-box.visible {
  opacity: 1;
}