* {
   box-sizing: border-box;
}

body {
   letter-spacing: 0.2px;
   margin: 0;
   padding: 0;
   font-family: "Inter", sans-serif;
   background-color: #111;
   color: #fff;
   overflow: hidden; /* Отключаем прокрутку при загрузке */
   font-weight: 500;
   /* cursor: url("./tg.svg"), auto; */
}

h1 {
   font-weight: 800;
   margin-bottom: 4px;
}

h1 .emoji {
   width: 40px;
   height: 40px;
   vertical-align: middle;
}

a {
   color: #f00;
   text-decoration: none;
}

#progress {
   font-size: 20vw;
}
/* 
small {
   font-size: 5vw;
} */

.emoji {
   width: 24px;
   height: 24px;
   vertical-align: middle;
}

.subtitle {
   font-size: 20px;
   font-weight: 700;
   line-height: normal;
   color: #6d6d6d;
   margin-bottom: 18px !important;
}

/* Loading Screen */
.loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: #111;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   z-index: 1000;
}

.loading-screen span {
   font-size: 70vw;
   font-weight: 900;
}

/* Layout */
.container {
   display: flex;
   flex-direction: row;
   height: 100vh;
   width: 100vw;
}

.photo {
   position: relative;
   flex: 1;
   background-size: cover;
   background-position: center;
   overflow: hidden;
}

.slider {
   position: absolute;
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   border-radius: 5px;
   font-size: 1.2rem;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
}

.slider img {
   width: 100%;
   height: fit-content;
}

.content {
   flex: 1;
   padding: 20px;
   padding-bottom: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
}

.content h1 {
   font-size: 2.5rem;
   font-weight: bold;
   margin: 0 0 10px 0;
}

.content p {
   margin-bottom: 8px;
   margin-top: 0;
}

.content .details {
   font-size: 1rem;
   margin-bottom: 20px;
   color: #6d6d6d;
}

/* Buttons */
.btn {
   display: flex;
   align-items: center;
   padding: 12px 12px;
   height: 52px;
   margin: 12px 0;
   border-radius: 14px;
}

.btn span {
   width: 100%;
   text-align: center;
   color: #fff;
   display: inline-block;
   font-size: 18px;
   font-weight: 600;
}

.btn-custom {
   background: #f00;
   color: #fff;
   font-weight: bold;
   border: 2px solid #f00;
}

.btn-custom:hover {
   background: #f00;
   color: #fff;
   font-weight: bold;
   border: 2px solid #f00;
}

.btn-outline {
   color: #f00;
}

.btn-outline {
   background: transparent;
   border: 2px solid #f00;
   font-weight: bold;
}

.btn-outline:hover {
   background: transparent;
   border: 2px solid #f00;
   color: #f00 !important;
   font-weight: bold;
}

.btn.btn-outline span {
   color: #f00;
}

/* Media Queries */
@media (max-width: 768px) {
   body {
      height: auto;
   }

   .container {
      flex-direction: column;
   }

   .photo {
      min-height: 50vh;
      width: 100%;
   }

   small {
      font-size: 5vw;
   }

   .content {
      padding: 22px 18px;
      font-size: 1rem;
   }

   .content h1 {
      font-size: 1.8rem;
      min-height: 28px;
      margin-bottom: 8px;
   }

   h1 .emoji {
      width: 28px;
      height: 28px;
      vertical-align: middle;
   }
}
span.Typewriter__cursor {
   font-weight: 300;
}

.badge-link {
   background: #202020;
   display: flex;
   gap: 10px;
   border-radius: 100px;
   margin-bottom: 20px;
   border: 1px solid rgb(69, 65, 65);
   padding: 10px 14px 6px;
   align-items: center;
}

.badge-link img {
   height: 28px;
   border-radius: 3px;
}

.badge-link__name {
   margin-bottom: 4px;
   font-size: 18px;
}

@keyframes heartbeat {
   0% {
      transform: scale(1);
   }
   30% {
      transform: scale(1.2);
   }
   50% {
      transform: scale(0.9);
   }
   100% {
      transform: scale(1);
   }
}

.heartbeat {
   animation: heartbeat 1.5s ease-in-out infinite;
}

#cursor {
   --size: 12px;
   position: fixed;
   top: 0;
   left: 0;
   height: var(--size);
   width: var(--size);
   background-color: red;
   border-radius: 0%;
   transform: translate3d(
      calc(100vw * var(--cursor-x) - var(--size) / 2),
      calc(100vh * var(--cursor-y) - var(--size) / 2),
      0
   );
   pointer-events: none;
}

/* Общие стили */
.photo {
   position: relative;
   flex: 1;
   background-size: cover; /* Сохраняем пропорции */
   background-position: center;
   background-repeat: no-repeat; /* Убираем повтор */
   overflow: hidden;
}

/* Если используем <img> для аватарки */
.slider img {
   width: 100%; /* Устанавливаем ширину на 100% контейнера */
   height: auto; /* Сохраняем пропорции */
   object-fit: cover; /* Центруем и обрезаем при необходимости */
   -webkit-object-fit: cover; /* Для Safari */
}

/* Фиксированный размер для аватарки */
.avatar {
   width: 100px; /* Фиксированная ширина */
   height: 100px; /* Фиксированная высота */
   object-fit: cover; /* Пропорции сохраняются */
   -webkit-object-fit: cover; /* Фикс для Safari */
   border-radius: 50%; /* Круглая аватарка */
   overflow: hidden; /* Убираем растяжение */
}