.global{
  background: linear-gradient(-45deg, yellow, green);
  color:black;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.showdown{
  background: linear-gradient(-45deg, yellow, rgb(255, 167, 5),rgb(255, 167, 5));
  color:black;
}
.tour{
  background: linear-gradient(-42deg, yellow, purple);
  color:rgb(59, 5, 255);
}
.feud{
  background: linear-gradient(-75deg, yellow, rgb(255, 2, 2));
  color:black;
}
.boss{
  background: linear-gradient(-42deg, yellow, yellow, rgb(23, 0, 233));
  color:black;
}
.blitz{
  background: linear-gradient(-42deg, yellow, rgb(143, 204, 255));
  color:black;
}
.grid-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* Расстояние между элементами */
}

.grid-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.selected {
  border: 1px solid blue; /* Выделение выбранных элементов */
}

body.scroll-lock {
  overflow: hidden;
}

dialog {
  padding: 0;

  border: 1px solid #b64646;

  font-family: Arial, Helvetica, sans-serif;
}

dialog h1 {
  margin: 0;
  padding: 1rem;

  font-size: 1.2rem;

  background-color: #b64646;

  color: #fff;

  text-align: center;
}

.dialog-content {
  padding: 1rem;

  text-align: center;
}

dialog[open]::backdrop {
  backdrop-filter: blur(2px);
}

dialog[open] {
  animation: show 0.5s;
}

dialog.hide {
  animation: hide 0.5s;
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hide {
  to {
    opacity: 0;
  }
}
.all-but{
  padding: 25px 30px;
  background-color: #050801;
  color: #03e9f4;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}

.all-but:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.boss-but{
  padding: 25px 30px;
  background-color: #050801;
  color:rgb(23, 0, 233);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.boss-but:hover{
  background:linear-gradient(-42deg, yellow, yellow, rgb(23, 0, 233));
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px yellow,
              0 0 50px rgb(23, 0, 233),
              0 0 200px rgb(23, 0, 233);
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.blitz-but{
  padding: 25px 30px;
  background-color: #050801;
  color:rgb(143, 204, 255);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.blitz-but:hover{
 background: linear-gradient(-42deg, yellow, rgb(143, 204, 255));
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px yellow,
              0 0 50px rgb(143, 204, 255),
              0 0 200px rgb(143, 204, 255);
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.showdown-but{
  padding: 25px 30px;
  background-color: #050801;
  color:rgb(255, 167, 5);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.showdown-but:hover{
  background:linear-gradient(-45deg, yellow, rgb(255, 167, 5),rgb(255, 167, 5));
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px rgb(255, 167, 5),
              0 0 50px rgb(255, 167, 5),
              0 0 200px rgb(255, 167, 5);
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.tour-but{
  padding: 25px 30px;
  background-color: #050801;
  color:purple;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.tour-but:hover{
  background: linear-gradient(-75deg, yellow, purple);
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px yellow,
              0 0 50px purple,
              0 0 200px purple;
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.global-but{
  padding: 25px 30px;
  background-color: #050801;
  color:green;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.global-but:hover{
  background: linear-gradient(-75deg, yellow, green);
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px yellow,
              0 0 50px green,
              0 0 200px green;
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.feud-but{
  padding: 25px 30px;
  background-color: #050801;
  color:rgb(255, 2, 2) ;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.feud-but:hover{
  background: linear-gradient(-75deg, yellow, rgb(255, 2, 2));
  color: #050801;
  box-shadow: 0 0 5px yellow,
              0 0 25px yellow,
              0 0 50px rgb(255, 2, 2),
              0 0 200px rgb(255, 2, 2);
   -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.tooltip-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Стили для изображения */
.sub_icon{
max-width:100px;
max-height: 100px;
}

/* Стили для текста подсказки */
.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  background: rgba(205, 214, 219, 0.3);
  color: black;
  font-weight: bolder;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s;
}

/* Стили для отображения подсказки при наведении */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.btn-up {
  /* фиксированное позиционирование */
  position: fixed;
  /* цвет фона */
  background-color: #673ab7;
  /* расстояние от правого края окна браузера */
  right: 20px;
  /* расстояние от нижнего края окна браузера */
  bottom: 0;
  /* скругление верхнего левого угла */
  border-top-left-radius: 8px;
  /* скругление верхнего правого угла */
  border-top-right-radius: 8px;
  /* вид курсора */
  cursor: pointer;
  /* отображение элемента как flex */
  display: flex;
  /* выравниваем элементы внутри элемента по центру вдоль поперечной оси */
  align-items: center;
  /* выравниваем элементы внутри элемента по центру вдоль главной оси */
  justify-content: center;
  /* ширина элемента */
  width: 60px;
  /* высота элемента */
  height: 50px;
}

.btn-up::before {
  content: "";
  width: 40px;
  height: 40px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}

.btn-up_hide {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-up:hover {
    background-color: #512da8; /* цвет заднего фона при наведении */
  }
}
#myInput {
  background-image: url('../css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 80%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 80%;
  border: 5px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;

}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
body{
  background: linear-gradient(to right, #6e316b,  #000000 );
    position:center;
}
body h1{
  color:white;
}
table{
  color:black;
  border-collapse: separate;
  border-spacing: 20px;
  border: 1px solid black;
  width:70vh;
}
th {
  font-size: 13px;
  font-weight: normal;
  border-right: 1px solid #9baff1;
  border-left: 1px solid #9baff1;
  padding: 8px;
}
td {
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 8px;
}
p{
  color: azure;
}
a{
  text-decoration: none;
    color: #dc9b3d;

  }
 /* #navbar{
  overflow: hidden;
  top:10;
  width:100%;
  border-bottom-color:grey; 
border-bottom-style:solid;
border-bottom-width:2px;
  } */

  #navbar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Меню видно и горизонтально на компьютерах */
    flex-direction: row;
}

#navbar nav ul li {
    margin-right: 50px; /* Отступы между элементами меню */
    padding: 10px;
}

#menu-toggle {
    display: none; /* Скрыть на компьютерах */
}
.menu-toggle2 {
  display: none; /* По умолчанию скрыта */
  /* Прочие стили кнопки */
}
  #navbar a{
    text-decoration: none;
    color: azure;
  }
 /* #navbar li{
      position:block;
      float:left;
      display:block;
      text-align:center;
      padding:14px 16px;
      font-size:17px;
      color:white;
  }
  */
  .pictures img{
    width:200px;
    height:200px;
  }
  #sub_picture{
width:5%;
height:5%;
border:  1px solid #000;
  }
  #sub_icon{
    width:100px;
    height:100px;
  }
  #medal_pictures{
    width:15%;
    height:15%;
  }/*.pictures-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 1%;
}
*/
.grid-table { 
  display: grid; 
  grid-template-columns: 1fr; /* Одна колонка на всю ширину */ 
  gap: 10px; 
  color: azure; 
} 
.grid-item { 
  display: flex; 
  align-items: center; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-bottom: 5px; 
}
@media (max-width: 1024px) { 
  html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Предоставляет полную высоту для содержимого */
    width: 100%; /* Предоставляет полную ширину для содержимого */
    overflow-x: hidden; /* Предотвращает горизонтальный скролл */
  }

  .grid-item img {
    width: 100%; /* Растягиваем изображение на 100% ширины его контейнера */
    height: auto; /* Высота автоматически адаптируется, чтобы сохранить пропорции */
    margin-right: 0; /* Убираем оставшиеся отступы */
  }
  .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    background: grey;
    color: rgb(0, 0, 0);
    font-weight: 900;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s, visibility 0.3s;
  }
  .grid-item { 
    flex:1;
    flex-direction: column; /* Элементы будут расположены вертикально */
    align-items: center; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-bottom: 10px; 
  }
  .grid-item .tooltip-container:first-child img {
    width: 800px;
    height: 800px;
    object-fit: cover; /* Для сохранения пропорций изображения */
  }
  .sub_icon{
    max-width:180px;
    max-height:180px;
    
    }
  div{
    font-size:50px;
  }
 table{
  width:100%;
 }
  #menu-toggle {
    display: block; /* Показать кнопку только на мобильных устройствах */
    width: 100%; /* Растягиваем кнопку на всю ширину */
        font-size: 50px; /* Задаем размер текста внутри кнопки */
        border: none; /* Убираем границу кнопки */
        background-color: azure;
        cursor: pointer; /* Курсор в форме указателя для лучшей интерактивности */
        padding: 10px 0; /* Добавляем немного отступа сверху и снизу для лучшего вида */
        text-align: center; /* Центрируем текст внутри кнопки */
}

#navbar nav ul {
    display: none; /* Меню скрыто на мобильных устройствах */
    flex-direction: column; /* Меню в колонку на мобильных устройствах */
}

#navbar nav ul.show {
    display: flex; /* Показать меню после нажатия на кнопку */
}

#navbar nav ul li {
    margin-right: 0; /* Убираем горизонтальный отступ на мобильных */
    margin-bottom: 50px; /* Добавляем вертикальный отступ */
}
 /* #navbar{
    overflow: hidden;
    top:10;
    width:100%;
    border-bottom-color:grey; 
  border-bottom-style:solid;
  border-bottom-width:2px;
    }
    #navbar a{
      text-decoration: none;
      color: azure;
      font-size:50px;
    }
    #navbar li{
        float:left;
        text-align:center;
        padding:14px 16px;
        color:white;
    }
  */
  .butt_cont  {
    display: none;
    font-size:50px;
    margin-bottom: 50px;
    text-align: center;
  }
    .butt_cont button {
      font-size:50px;
      margin-bottom: 50px;
    }
    .menu-toggle2 {
      width: 100%; /* Растягиваем кнопку на всю ширину */
      display: block; /* Блочное отображение гарантирует, что элемент займет всю ширину */
      box-sizing: border-box; /* Гарантируем, что границы и padding включены в ширину 100% */
      white-space: nowrap; 
      font-size: 50px; /* Задаем размер текста внутри кнопки */
      border: none; /* Убираем границу кнопки */
}
}
.grid-item img {
  width: 400px; /* Задаем ширину изображения */
  height: 400px; /* Задаем высоту изображения */
  margin-right: 10px; /* Отступ между изображением и описанием */
}
.divider {
  width: 1px;
  background-color:  black; /* Цвет линии */
  height: 100%;
  margin: 0 10px; /* Регулируем отступы по бокам линии */
}

.cell {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

.hidden {
  display: none;
}