html {
    font-size: 20px;
}
body {
    height: 100vh;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #fff;
    position: relative;
}

/* Базовый вид ссылки */
a {
  color: #fff;          /* цвет текста */
  text-decoration: underline;    /* убираем подчеркивание */
  text-decoration-thickness: 2px;
  transition: color 0.2s, text-decoration 0.2s;  /*плавный переход при hover */
}

/* Состояние при наведении */
a:hover {
  color: #DC1E3C;           /* темнее при hover */
}

/* Активная ссылка (когда кликнут) */
a:active {
  color: #DC1E3C;
}

/* Доступность: фокус для клавиатуры */
a:focus {
  color: #DC1E3C;
}


h1{
    font-size: 3.5rem;
    font-weight: 300;
    text-transform: uppercase;
}

h1.right {
    text-align: right;
}

a.place {
    font-family: Merriweather, sans-serif;
    font-size: 1.7rem;
}

div.main {
    height: 100%;
    width: 100%;
    padding-left: 10%;
    padding-top: 15%;
}

div.bg{
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    background-image: url('bg.jpg'); /* путь к картинке */
    background-size: cover;   /* ширина авто, высота 100% блока */
    background-repeat: no-repeat; /* чтобы изображение не повторялось */
    background-position: right top; /* приклеиваем к правому краю сверху */
    z-index: -1000;
}

/*div.bg-frame {
  
}*/

div.bg-frame img {
    width: 100%;
    height: auto;
}

div.hero {
  width: 90%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-right: 10%;
}

div.title {
  width: 50%;
  display: flex;
  align-items: rights;
  flex-direction: column;
  gap: 0.5rem;
}

div.lang-btn {
  display: flex;
  gap: 1rem;

}
div.place {
  display: inline-block;
  align-self: flex-end;
}

div.popup {
  position: absolute;
  width: 85%;
  height: 85%;
  top: 50%;      /* сдвигаем блок на 50% высоты родителя */
  left: 50%;     /* сдвигаем блок на 50% ширины родителя */
  transform: translate(-50%, 100%); /* компенсируем смещение по центру */
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 1.5rem;
  z-index: 1000;
  transition: transform 0.4s ease;
}

div.popup.active {
  transform: translate(-50%, -50%);
}

div.nav-btn {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

article.art-more {
  height: 100%;
  overflow-y: auto;
}
article.art-more p {
  margin-top: 1rem;
  line-height: 140%;
  margin-right: 0.5rem;
}

a.btn-lang {
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}

a.btn-lang:hover {
  color: #DC1E3C;
  transition: color 0.2s;
}

a.btn-lang.active {
  cursor:inherit;
  color: #DC1E3C;
}

button.btn-more {
  background-color: #DC1E3C;
  font-weight: 500;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
button.btn-more:hover {
  background-color: #fff;
  color: #DC1E3C;
}

button.btn-nav {
  cursor: pointer;
  transition: color 0.2s;
}

button.btn-nav:hover {
  color: #DC1E3C;
}

a.btn-nav {
  cursor: pointer;
  transition: color 0.2s;
}

a.btn-nav:hover {
  color: #DC1E3C;
}

/* Весь скроллбар */
::-webkit-scrollbar {
  width: 0.3rem;          /* ширина вертикального скролла */
  height: 0.3rem;         /* высота горизонтального скролла */
}

/* Полоса прокрутки (фон) */
::-webkit-scrollbar-track {
  background: none;  /* цвет дорожки */
}

/* “Бегунок” скролла */
::-webkit-scrollbar-thumb {
  background-color: #DC1E3C; /* цвет бегунка */
  border-radius: 6px;        /* скругление */
  border: none; /* отступ от дорожки */
  transition: background-color 0.2s
}

::-webkit-scrollbar-thumb:hover {
  background-color: #941326; /* цвет бегунка */
  border-radius: 6px;        /* скругление */
  border: none; /* отступ от дорожки */
}

/* общий цвет и ширина скролла */
.scrollable {
  scrollbar-width: none;                 /* thin / auto / none */
}

@media(max-width: 950px) {

  html{
    font-size: 16px;
  }

}

@media(max-width: 700px){
  div.hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  div.title {
    width: 100%;
    gap: 1rem;
  }
}

@media(max-width: 500px) {
  div.popup{
    flex-direction: column-reverse;
  }

  div.nav-btn{
    flex-direction: row;
  }

  article.art-more p:first-child {
    margin-top: 0;
  }

}