body {
  background: 
    repeating-linear-gradient(
      rgba(145, 30, 66, 0.05) 0px, 
      rgba(145,30, 66, 0.05) 1px, 
      transparent 6px, 
      transparent 6px
    ),
    radial-gradient( #700038, #0a0005);
  
  min-height: 100vh;
  margin: 0;
  justify-content: center; 
  align-items: center;    
  display:flex;
}




.container{
  display: flex;       
  flex-direction: row;
  align-items: center; 
 
}

.box{
  border: dotted 4px;
  border-color:black;
  width:700px;
  height:600px;
  display: flex;
  background-image:linear-gradient(#242424, #0a0a0a);

  max-height:80vh;
 }
  
  
  

  
  
.box1{
  border:solid 2px;
    display: flex;
  background-image:linear-gradient(#242424, #0a0a0a);

  max-height:80vh;
  width:200px;
  
  }
.menu {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 100%;
}

/* Сами блоки-кнопки */
.menu-item {
  text-decoration: none;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  border: solid 2px;
  background:black;
  transition: all 0.3s ease; /* Плавная анимация всего (цвета, тени, размера) */
  text-transform: uppercase;
  letter-spacing: 2px;
}

.menu-item:hover {
  background:#ff0059;
  border-color: #000000; /* Яркий розовый из иконки */
  transform: scale(1.05); /* Блок чуть-чуть увеличивается */
  
  /* Магическое свечение под цвет иконки */
  box-shadow: 0 0 20px white; 
  text-shadow: 0 0 5px white; /* Подсветка текста */
}












#sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 15px 0;
  z-index: 1000;
  border-bottom: 5px double #242424;
  transition: transform 0.4s ease, opacity 0.4s ease; /* Плавное появление */
}


.hidden {
  transform: translateY(-100%);
  opacity: 0;
}


.visible {
  transform: translateY(0);
  opacity: 1;
}

#sticky-nav a {
  color: white;
  text-decoration: none;
  font-family: 'твой_шрифт', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}