@font-face {
    font-family: 'Alexandria';
    src: url('../fonts/Alexandria-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'RossoOne';
  src: url('../fonts/RussoOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    background-color: #0f0f0f;
}

/* НАВБАР */

.nav-top-panel {
    position: fixed;
    display: flex; /* Использование Flexbox */
    justify-content: flex-start;
    top: 0; /* Прижимаем панель к верхней части экрана */
    left: 0; /* Растягиваем панель по всей ширине слева направо */
    width: 100%; /* Ширина панели равна 100% ширины экрана */
    height: 64px;
    background-color: #1d1d1d; /* Цвет фона панели */
    color: white; /* Цвет текста на панели */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    z-index: 1000; /* Убедитесь, что панель находится поверх других элементов */
    /* Другие стили, например, тень, шрифт и т.д. */
    box-shadow: 0px 4px 12px 0px rgb(0, 0, 0); /* Добавляем тень */
    transition: top 0.5s ease;
    user-select: none;
}

.nav-top-panel-lower {
    position: fixed;
    top: -256px; /* Прижимаем панель к верхней части экрана */
    left: 0; /* Растягиваем панель по всей ширине слева направо */
    width: 100%; /* Ширина панели равна 100% ширины экрана */
    background-color: #1d1d1d; /* Цвет фона панели */
    color: white; /* Цвет текста на панели */
    padding: 10px 0; /* Внутренние отступы сверху и снизу */
    z-index: 999; /* Убедитесь, что панель находится поверх других элементов */
    /* Другие стили, например, тень, шрифт и т.д. */
    box-shadow: 0px 4px 12px 0px rgb(0, 0, 0); /* Добавляем тень */
    transition: top 0.5s ease;
    user-select: none;
    display: none;
}

.nav-top-panel-logo {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
}

.left-nav-buttons {
    position: absolute;
    left: 0px;
    top: 8px;
    display: flex;
    justify-content: flex-start;
}

.right-nav-buttons {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    justify-content: flex-start;
}

.nav-top-panel-btn-unreal {
    font-family: 'Alexandria', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.nav-top-panel-btn-unreal:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
}

.nav-top-panel-btn {
    font-family: 'Alexandria', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.nav-top-panel-btn:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
}

.nav-top-panel-play-btn {
    font-family: 'Alexandria', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: #742500;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

.nav-top-panel-play-btn:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
    background-color: #ff5100;
}

.nav-top-panel-mobile-btn {
    display: none;
    margin-top: 11px;
    margin-right: 8px;
    filter: brightness(50%);
    transition: filter 0.2s ease-in-out;
}

.nav-top-panel-mobile-btn:hover {
    filter: brightness(100%);
}

/* ДЛЯ МОБИЛОК */
@media (max-width: 1216px) {
    .on-pc {
        display: none;
    }

    .nav-top-panel-lower {
        display: block;
    }

    .nav-top-panel-mobile-btn {
        display: block;
    }
}
/* КОНЕЦ ДЛЯ МОБИЛОК */


/* КОНЕЦ НАВБАР */

/* ЛОГОТИП ПРОЕКТА */

.urp-logo-container {
    align-items: center;
    flex-wrap: wrap;
    pointer-events: none;
    user-select: none;
    margin: auto;
    text-align: center;
    margin-top: 72px;
}

.urp-logo-title {
    color: #e1e1e1; 
    font-family: 'Alexandria', sans-serif; 
    font-size: 6vw;
    font-weight: 600; 
    text-shadow: 0 0 20px #7f7f7f; 
    pointer-events: none;
}

.urp-logo-text {
    font-family: 'Roboto', sans-serif; 
    color: #e1e1e1; 
    font-weight: 600; 
    font-size: 1.5vw;
    pointer-events: none;
}

/* КОНЕЦ ЛОГОТИП ПРОЕКТА */

/* НАШИ ПРОЕКТЫ */

.main-projects-container {
    position: relative;
    width: 90%; /* Укажите желаемую ширину */
    height: 28vw;
    overflow: hidden;
    z-index: 1;
    margin: auto;
    border-radius: 15px;
    user-select: none;
    box-shadow: 0px 0px 12px 0px rgb(0, 0, 0); /* Добавляем тень */
}

.main-projects-stalblox {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: clip-path 0.5s ease;
    clip-path: polygon(0% 0%, 62.55% 0%, 37.55% 100%, 0% 100%);
    z-index: 1;
}

.main-projects-stalblox-bigsize {
    clip-path: polygon(0 0, 75.5% 0, 50.5% 100%, 0% 100%);
}

.main-projects-stalblox-smallsize {
    clip-path: polygon(0 0, 50.5% 0, 25.5% 100%, 0% 100%);
}


.main-projects-swrp {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: clip-path 0.5s ease;
    clip-path: polygon(62.5% 0%, 100% 0%, 100% 100%, 37.5% 100%);
    z-index: 1;
}

.main-projects-swrp-bigsize {
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 25% 100%);
} 

.main-projects-swrp-smallsize {
    clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.main-projects-text {
    background: none;
    border: none;
    font-family: 'RossoOne', sans-serif;
    font-size: 6vw;
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px #000000;
    position: absolute;
    text-align: center;
    width: 100%; /* Ширина панели */
    height: 100%; /* Высота панели */
    margin-top: 10vw;
    z-index: 3;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.main-projects-text-hidden {
    opacity: 0;
}

.main-projects-stalblox-text {
    z-index: 2;
    position: absolute;
    top: 0;
    padding: 0.8vw;
    height: 5vw;
    font-family: 'RossoOne', sans-serif;
    color: #ffffff;
    font-size: 1vw;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
}

.main-projects-swrp-text {
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 5vw;
    font-family: 'RossoOne', sans-serif;
    color: #ffffff;
    font-size: 1vw;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
    text-align: right; /* Выравнивание текста справа */
}

/* КОНЕЦ НАШИ ПРОЕКТЫ */

/* КНОПКА ИГРАТЬ */

.play-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 2vw;
    font-weight: 600;
    color: #6e6e6e;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.play-btn {
    width: 22vw;
    height: 3vw;
    font-family: 'Roboto', sans-serif;
    font-size: 2vw;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    margin-right: 1vw;
    margin-left: 1vw;
    background-color: #742500;
    border-radius: 0.5vw;
}

.play-btn:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
    background-color: #ff5100;
}

.play-btn-slider {
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

.play-btn-slider-active {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
}

/* КОНЕЦ КНОПКА ИГРАТЬ */

/* РАЗДЕЛИТЕЛЬ СТРАНИЦЫ */
.page-separator {
    margin-top: 0;
    margin-bottom: -1vw;
    padding: 0!important;
}

.page-separator img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}
/* КОНЕЦ РАЗДЕЛИТЕЛЬ СТРАНИЦЫ */

/* ЗАГОЛОВОК СТРАНИЦЫ СТАНДАРТНЫЙ */
.page-logo-container {
    align-items: center;
    flex-wrap: wrap;
    pointer-events: none;
    user-select: none;
    margin: auto;
    text-align: center;
    width: 60vw;
}

.page-title {
    color: #e1e1e1; 
    font-family: 'Alexandria', sans-serif;
    font-size: 6vw;
    font-weight: 900; 
    pointer-events: none;
    text-shadow: 0 0 20px #7f7f7f; 
}

.page-logo-text {
    font-family: 'Roboto', sans-serif; 
    color: #e1e1e1; 
    font-weight: 600; 
    font-size: 1.5vw;
    pointer-events: none;
}
/* КОНЕЦ ЗАГОЛОВОК СТРАНИЦЫ СТАНДАРТНЫЙ */

/* ЦЕНТРИРУЮЩИЙ БЛОК */
.centered-block {
    align-items: center;
    user-select: none;
    margin: auto;
    text-align: center;
}
/* КОНЕЦ ЦЕНТРИРУЮЩИЙ БЛОК */

/* START GAME */
.start-arrow-img {
    width: 6vw;
    height: 6vw;
    margin: auto;
    margin-top: -3vw;
    filter: brightness(50%);
    transition: filter 0.2s ease-in-out;
}

.start-arrow-img-active {
    filter: brightness(100%);
}

.start-game-text-title {
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 8vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.start-game-text-undertitle-w {
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.start-game-text-undertitle-o {
    color: #FF7A00;
    font-family: 'RossoOne', sans-serif;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.start-block {
    width: 88vw;
    height: 8vw;
    margin: auto;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    border-radius: 1vw;
    margin-top: 1vw;
}

.start-block-img {
    position: absolute;
    width: 6vw;
    height: 6vw;
    left: 7vw;
    margin-top: 1vw;
}

.start-block-img-text {
    position: absolute;
    width: 6vw;
    height: 6vw;
    left: 7vw;
    margin-top: 1vw;
    color: #E1924A;
    text-shadow: 0 0 1vw #E1924A; 
    font-family: 'RossoOne', sans-serif;
    font-size: 2vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    padding-top: 1.9vw;
}

.start-block-title {
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.6vw;
    text-align: left;
    height: 1.5vw;
    margin-left: 7vw;
}

.start-block-text {
    text-align: left;
    height: 1vw;
    margin-left: 7vw;
}

.block-text-container {
    margin-top: 4.25vw;
    text-align: left;
    left: 7vw;
}

.start-block-button {
    position: absolute;
    width: 14vw;
    height: 2vw;
    font-family: 'Russo One', sans-serif;
    font-size: 1vw;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: #742500;
    border-radius: 0.5vw;
    padding-top: 0.25vw;
    margin-top: -2vw;
    margin-left: 71vw;
    z-index: 2;
}

.start-block-button:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
    background-color: #ff5100;
}

.tech-block-title {
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 3vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tech-container {
    width: 88vw;
    margin: auto;
    margin-top: 3vw;
}

.tech-title {
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0.5vw;
}

.tech-spec-container {
    display: flex; /* Активирует Flexbox для этого контейнера */
    justify-content: center; /* Центрирует элементы по горизонтали */
    align-items: center; /* Центрирует элементы по вертикали */
    flex-wrap: wrap; /* Позволяет элементам переноситься на следующую строку */
    gap: 4vw; /* Устанавливает расстояние между элементами */
    width: 100%;
}

.tech-spec-block {
    width: 42vw;
    justify-content: left; /* Центрирует элементы по горизонтали */
    align-items: start; /* Центрирует элементы по вертикали */
    text-align: left;
}

.tech-spec-block-title {
    color: #E1924A;
    font-size: 2vw;
    font-family: 'RossoOne', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-shadow: 0 0 1vw #E1924A; 
}

.tech-spec-block-container {
    width: 100%;
    height: 20vw;
    background-color: rgb(0, 0, 0);
    border-radius: 1vw;
}

.problem-block-title {
    color: #E1924A;
    font-size: 2vw;
    font-family: 'RossoOne', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    text-shadow: 0 0 1vw #E1924A; 
    text-align: left;
}

.problem-block-container {
    width: 100%;
    height: 8vw;
    background-color: rgb(0, 0, 0);
    border-radius: 1vw;
    text-align: left;
}

.problem-block-alert-symbol {
    position: absolute;
    color: #E1924A;
    font-size: 6vw;
    font-family: 'RossoOne', sans-serif;
    font-weight: 400;
    text-shadow: 0 0 1vw #E1924A; 
    word-wrap: break-word;
    margin-top: -0.25vw;
    margin-left: 2vw;
}

.problem-block-text {
    position: absolute;
    width: 60vw;
    margin-left: 6vw;
    margin-top: 2.25vw;
    color: #FFF;
    font-family: 'RossoOne', sans-serif;
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.problem-block-link {
    color: #E19249;
    text-shadow: 0 0 1vw #E1924A;
}
/* КОНЕЦ START GAME */

/* СОЦИАЛЬНЫЕ СЕТИ */
.social-media-container {
    display: flex; /* Активирует Flexbox */
    align-items: center; /* Центрирует элементы по вертикали */
    justify-content: center; /* Центрирует элементы по горизонтали */
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    width: 100%;
}

.social-media-block {
    width: 18vw;
    height: 17vw;
    margin: 1vw;
    background-color: #0a0a0a;
    border-radius: 1vw;
    overflow: hidden;
}

.social-media-block-title {
    position: absolute;
    color: #e1e1e1; 
    font-family: 'Alexandria', sans-serif;
    font-size: 1.5vw;
    font-weight: 600; 
    pointer-events: none;
    text-align: center;
    text-shadow: 0 0 10px #7f7f7f;
    margin-top: 6.5vw;
    width: 18vw;
    z-index: 2;
    background-color: #000000bb;
    user-select: none;
}

.social-media-block-img {
    width: 18vw;
    height: 9vw;
    background-color: #ffffff;
    z-index: 1;
    user-select: none;
}

.social-media-block-info {
    width: 18vw;
    height: 1.6vw;
    border-bottom: 0.1vw solid #4d4d4d;
    font-family: 'RossoOne', sans-serif;
    color: #6e6e6e;
    font-size: 0.8vw;
    margin-top: 0.4vw;
}

.social-media-block-info-text-left {
    position: absolute;
    width: 18vw;
    text-align: left;
    margin-left: 0.2vw;
}

.social-media-block-button {
    width: 14vw;
    height: 2vw;
    font-family: 'Roboto', sans-serif;
    font-size: 1vw;
    font-weight: 600;
    color: #6e6e6e;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    margin-right: 2vw;
    margin-left: 2vw;
    margin-top: 1vw;
    background-color: #742500;
    border-radius: 1vw;
    padding-top: 0.25vw;
}

.social-media-block-button:hover {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
    background-color: #ff5100;
}
/* КОНЕЦ СОЦИАЛЬНЫЕ СЕТИ */

/* Стилизация скроллбара для WebKit-браузеров (Chrome, Safari) */
::-webkit-scrollbar {
    width: 8px; /* Ширина скроллбара */
    height: 8px;
    background-color: rgba(41, 41, 41, 255); 
}

::-webkit-scrollbar-thumb {
    background-color: #ffffff; /* Цвет скроллбара */
    border-radius: 10px; /* Круглые края */
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff; /* Цвет скроллбара при наведении */
}

/* Стилизация скроллбара для Firefox */
* {
    scrollbar-width: thin; /* Тонкий скроллбар */
    scrollbar-color: #888 transparent; /* Цвет скроллбара и прозрачный фон */
}

/* Удаление стрелок скроллбара (не поддерживается всеми браузерами) */
::-webkit-scrollbar-button {
    display: none;
}