body {
background:url("kirpich.jpg");
}
body  #menu ul li ul {
 display: none;
} 
#menu {
 width: 100%;
 font-size: 12pt;
 padding: 0 0 0 30px;

}
#menu ul {
 margin: 0px;
 padding: 0px;
}
#menu li {
 position: relative;
 width: 120px;
 float: left; 
 list-style-type: none; /
}
#menu ul li ul {
 margin: 0px;
 position: absolute;
 left: -1px;
 width: 10em;
}
#menu ul li ul li {
 width: 100%;
}

#menu ul li:hover ul  {
 display: block;
}
#menu ul li ul:hover  {
 display: block;
}
#menu {
margin-left:10%;
margin-right:10%;

}
#maket {
font-size:15pt;
}
:root {
  
  --glass-bg: rgba(10, 10, 10, 0.6);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --text-color: #f0f0f0;
}

.glass-nav {
  padding: 8px;
  background: var(--glass-bg);
 
  backdrop-filter: blur(20px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(110%);
  
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px var(--glass-highlight); 
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: 12px 24px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}


.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}


.nav-link::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.nav-link:hover::after {
  opacity: 1;
}
#ecspirement {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;
}
#play {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;	
}
#messenger {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;
}
#telegram {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;
}
#discord {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;
}
#main1 {
background-color:#ffffff;
margin-left:10%;
margin-right:10%;
padding:1%;
font-size:15pt;
}
h3 {
color:#7B1113;
}
h2 {
color:#7B1113;
}
}
h4 {
color:#7B1113;
}
#footer
{
height:10%;
background-color:#ffffff;
}
html {
  scroll-behavior: smooth;
}
.scroll-up {
    position: fixed; /* Фиксируем на экране */
    bottom: 20px;    /* Отступ снизу */
    right: 20px;     /* Отступ справа */
    background-color: #333; /* Цвет фона */
    color: white;    /* Цвет стрелки */
    padding: 10px 15px;
    border-radius: 50%; /* Круглая кнопка */
    text-decoration: none;
    display: none; /* Скрыта по умолчанию, покажем через JS */
    z-index: 1000; /* Поверх всех элементов */
}
.scroll-up:hover {
    background-color: #555;
}

}
.beauty-rotate {
  width: 600px;
  height: 300px;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
} 
.beauty-rotate:hover {
  border-radius: 50%;
}
.grey-image {
    filter: grayscale(1);
    transition: 1s;
}
.grey-image:hover {
    filter: grayscale(0);
}