/* По умолчанию */

body {
	
	display: 0;           /* Включаем режим гибких блоков */
    justify-content: center; /* Центрируем по горизонтали (слева-направо) */
    align-items: center;     /* Центрируем по вертикали (сверху-вниз) */
	
	font-family: "arial", sans-serif;
	
	min-height: 100vh;
    margin: 0;
	
	background-image: url('data/texture/background/background-1.png'); /* Используйте повторяющийся паттерн */
	background-size: cover;
    background-color: #ffffff;
	background-position: center;
	background-attachment: fixed;
    background-repeat: no-repeat;


    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Стандартный синтаксис */

    transition: transform 0.2s ease-in-out; /* Плавное изменение масштаба */
    overflow-x: hidden; /* Чтобы не появлялась горизонтальная прокрутка при увеличении */

}


@font-face {
	
    font-family: 'arial'; /* Придумай любое имя */
    src: url('data/font/arialmt.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
	
}

.block {
	
    width: 200px;         /* Ширина */
    height: 200px;        /* Высота */
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ffffff00;
	backdrop-filter: blur(0px);
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff1a;
    border-radius: 25px;
    padding: 25px;
    margin: 10px;
    box-shadow: 0 15px 35px #00000080;
	
}

div {

    background-size: cover;

}

p {

    color: #ffffff;
    font-weight: bold;
    font-size: 25px;
    margin: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: 2px 2px 4px #000000

}

li {

    color: #ffffff;
    font-weight: bold;
    font-size: 25px;
    margin: 10px;
    text-align: center;
    text-shadow: 2px 2px 4px #000000

}

img {
	
    text-align: center;
    display: block;
    margin: 0 auto; /* Центрирование, если родитель не flex */
    width: 200px;  /* Ширина 400 пикселей */
    height: auto;  /* Высота подстроится сама, чтобы не растягивать картинку */
	border-radius: 25px; 
    pointer-events: none;
	
}

button {

	width: 75px;
    height: 75px;
	background-color: #00000000;
	color: #ffffff;
    background-size: 100% 100%;
	backdrop-filter: blur(0px);
	
	border-width: 1px;
	border-style: solid;
	border-color: #ffffff1a;
	border-radius: 25px;
	padding: 0;
	margin: 10px;
	transition: all 0.3s ease;
    text-align: center;
	
	display: inline-flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0 15px 35px #00000080;
	
}

button:hover {
	
	transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;
	
}

.notdown {

    display: flex;
    gap: 20px;
    flex-wrap: wrap;

}

.fas {
  font-size: 100px;
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}

/* Важные Настройки */

.logo{

    transform: translate(-100px, -150px);
    margin: 0 auto;
    width: 600px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 1));

}

.main-page {

    position: fixed;
    width: 100%;
    height: 175px;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #ffffff;
    background-color: #00000000;
	backdrop-filter: blur(10px);
    border-width: 1px;
    border-style:inset;
    border-color: #ffffff1a;
    box-shadow: 0 15px 35px #00000080;
    
}

.main-text {

    color: #ff0000;
    
}

.red-text{

    color: #ff0000;

}

.green-text{

    color: #00ff00;
    
}

.page {

    position: absolute;
    justify-content: center;
    align-items: center;
    overflow: auto;
    display: none;
    position: fixed;
    color: #ffffff;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;

}

.background-move {
    
    position: absolute;
    justify-content: center;
    align-items: center;
    overflow: auto;
    display: none;
    position: fixed;
    color: #ffffff;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    
    background-image: url('data/texture/background-move.png'); /* Используйте повторяющийся паттерн */
    background-size:contain;
    background-repeat: repeat; /* Повторяем по горизонтали */
    animation: scroll-bg 20s linear infinite; /* Анимация */
    }

    @keyframes scroll-bg {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1000px 500px; /* Сдвигаем на 1000 px влево */
    }
}

.margin {

    margin-top: 200px;

}

.page-text {

    text-align: center;
    position: absolute;
    display: block;
    color: #ffffff;
    margin: 50px;
    margin-top: 65px;
    font-size: 40px;
    font-weight: 1000;
    text-shadow: 2px 2px 4px #000000

}

.butter-position-absolute-right{

    position: relative;
    text-align: justify;

}

.butter-position-absolute-left{

    width: 100%;
    height: 100%;
    display: inline-flex;
    position: absolute;
    text-align: end;
    justify-content: end;
    align-items: baseline;

}

.index-div {

    transform: translateY(25px);
    justify-content: center;
    align-items: center;
    text-align: center;

    flex-direction: row;
    display: 0;
    justify-content: flex-center;
    margin-inline: 25px;

}

.index-div-1 {

    transform: translateY(25px);
    justify-content: center;
    align-items: center;
    text-align: center;

    flex-direction: row;
    display: 0;
    justify-content: flex-center;
    margin-inline: 25px;

}

.div-margin {

    flex-direction: row;
    display: inline-flex;

}

.butter-fas{

    box-shadow: inset 5px 5px 5px #ffffff, inset -1px -1px 5px #ffffff, 0 15px 35px #00000080;
    background-color: #ffffff00;
    background-size: contain;
    backdrop-filter: blur(0px);
    
    width: 150px;
    height: 150px;
    display: inline-flex;
    flex-direction: row;
    margin: 10px;
    color: #ffffff;
    font-size: 75px;
    border-width: 0px;

}

.butter-fas:hover {

    transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;

}

.close {

    box-shadow: inset 5px 5px 5px #ffffff, inset -1px -1px 5px #ffffff, 0 15px 35px #00000080;
    background-color: #ff0000;
    background-size: contain;

    text-align: end;
    position: relative;
    width: 150px;
    height: 150px;
    display: 0;
    flex-direction: row;
    margin: 10px;
    color: #ffffff;
    font-size: 75px;
    border-width: 0px;

}

.close:hover {

    transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;

}

.open {

    box-shadow: inset 5px 5px 5px #ffffff, inset -1px -1px 5px #ffffff, 0 15px 35px #00000080;
    background-color: #00ff00;
    background-size: contain;

    position: relative;
    width: 150px;
    height: 150px;
    display: 0;
    flex-direction: row;
    margin: 10px;
    color: #ffffff;
    font-size: 75px;
    border-width: 0px;
    text-align: end;

}

.open:hover {

    transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;

}

/* Настройки */

.notification-text{

    color: #ffffff;
    font-weight: bold;
    font-size: 25px;
    margin: 10px;
    text-align: center;
    text-shadow: 2px 2px 4px #000000

}

.notification-data{

    color: #757575;
    font-weight: bold;
    font-size: 20px;
    margin: 10px;
    text-align: center;
    text-shadow: 2px 2px 4px #000000

}

.butter-video {

    background-size: 100% 100%;
    width: 225px;
    height: 125px;
    display: inline-flex;
    margin: 10px;
    flex-direction: column;
    font-weight: bold;
    border-width: 0px;

    color: #ffffff00; 
    text-shadow: 2px 2px 4px #00000000; 
    font-size: 15px;

}

.butter-video:hover {

    transform: scale(0.95);
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000; 
    box-shadow: inset 10px 10px 25px #000000;

}

.butter-video-img {

    width: 200px;
    height: 450px;
    margin: 10px;
    display: inline-flex;
    transition: all 0.3s ease;
    box-shadow: inset 5px 5px 10px #ffffff;
    border-radius: 25px;

}

.butter-video-img:hover {

    width: 200px;
    height: auto;
    transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;

}

.butter-go-channal {

    width: 200px;
    height: 75px;
    margin: 10px;

}

.butter-go-channal:hover {

    transform: scale(0.95);
    color: #000000;
    box-shadow: inset 10px 10px 25px #000000;

}

.butter-video-text {

    font-size: 15px;
    margin-bottom: 25px;

}

.video-text{

    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 25px;

}

.commercial-at {

    text-align: center;
    font-size: 25px;
    margin-left: 75px;
    margin-right: 75px;
    user-select:all;

}

.imglink {

    border-style: solid;
    box-shadow: inset 1px 1px 5px #ffffff75;
    background-size: contain;

    width: 75px;
    height: 75px;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: row;
    margin: 20px;
    border-width: 0px;

}

.imglink:hover {

    transform: scale(1.1);
    box-shadow: inset 1px 1px 5px #ffffff75;

}

.imglink-1 {

    border-style: solid;
    box-shadow: inset 1px 1px 5px #ffffff75;
    background-color: #ffffff00;
    background-size: contain;

    width: 75px;
    height: 75px;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: row;
    margin: 50px;
    border-width: 0px;

}

.imglink-1:hover {

    transform: scale(1.1);
    box-shadow: inset 1px 1px 5px #ffffff75;

}

.imglink-2{

    margin: 0 auto;
    width: 75px;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    margin-top: 25px;

}

.imglink-2:hover{

    transform: scale(1.1);

}

.themes-butter {

    justify-content: left;
    align-items: end;
    text-align: justify;

}

.themes {

    height: 150px;
    width: 250px;
    flex-direction: row;
    flex-wrap: wrap;
    display: 0;
    background-size: 100% 100%;
    margin: 10px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff3b;
    box-shadow: inset 1px 1px 5px #ffffff75;

}

.themes:hover {

    height: 250px;
    width: 550px;

}

.themes-vegasprogram {

    background-image: url("data/texture/screen-saver-1.png");
    height: 125px;
    width: 225px;
    flex-direction: row;
    flex-wrap: wrap;
    display: 0;
    background-size: 100% 100%;
    margin: 10px;

    border-width: 1px;
    border-style: solid;
    border-color: #ffffff3b;
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-vegasprogram:hover {

    border-radius: 10px;
    background-image: url("data/texture/screen-1.png");
    transform: scale(1.75);
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-vegasprogram:active {

    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("data/texture/screen-1.png");

}

.themes-vegasprogram-themes {

    background-image: url("data/texture/screen-saver-2.png");
    height: 125px;
    width: 225px;
    flex-direction: row;
    flex-wrap: wrap;
    display: 0;
    background-size: 100% 100%;
    margin: 10px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff3b;
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-vegasprogram-themes:hover {

    border-radius: 10px;
    background-image: url("data/texture/screen-2.png");
    transform: scale(1.75);
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-vegasprogram-themes:active {

    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("data/texture/screen-2.png");

}

.themes-cap-rytp {

    background-image: url("data/texture/screen-saver-3.png");
    height: 125px;
    width: 225px;
    flex-direction: row;
    flex-wrap: wrap;
    display: 0;
    background-size: 100% 100%;
    margin: 10px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff3b;
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-cap-rytp:hover {

    border-radius: 10px;
    background-image: url("data/texture/screen-3.png");
    transform: scale(1.75);
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-cap-rytp:active {

    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("data/texture/screen-3.png");

}

.themes-boosty{

    background-image: url("data/texture/boostybanner.png");
    height: 125px;
    width: 500px;
    flex-direction: row;
    flex-wrap: wrap;
    display: 0;
    background-size: 100% 100%;
    margin: 10px;
    border-radius: 25px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff3b;
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;
    
}

.themes-boosty:hover {

    background-image: url("data/texture/screen-4.png");
    height: 250px;
    width: 450px;
    box-shadow: 5px 5px 25px #000000, inset 1px 1px 5px #ffffff75;

}

.themes-boosty:active {

    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("data/texture/screen-4.png");

}

.themes-visibility {

    display: block;
    height: 100%;
    width: 100%;
    margin: 10px;
    transition: all 0.3s ease;

}

.themes-visibility:hover {

    display: none;

}

.themes-div {

    margin: 125px;

}

.themes-boosty-div{

    text-align: end;

}

.themesimg {

    margin: 0 auto;
    width: 150px;

}

.themesimg-ad {

    margin: 0 auto;
    width: 100%;
    height: 100%;

}

.recommend-video-div {

    position: relative;
    width: 575px; /* Ширина карточки */
    height: 300px;
    margin: 10px auto;
    perspective: 1000px; /* Добавляет глубину */
    display: block;

    gap: 20px;                /* Расстояние между карточками */
    overflow-x:inherit;         /* Включаем горизонтальную прокрутку */
    scroll-behavior: smooth;  /* Плавная прокрутка */
    padding: 20px;
    max-width: 850px;         /* Чуть шире одной карточки, чтобы видеть края соседних */
    
    /* Эффект прилипания (Snap) */
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; /* Для плавной прокрутки на iOS */

}

.recommend-video {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    text-align: justify;
    
    cursor: grab;
    user-select: none;
    touch-action: none;
    
    /* Плавное возвращение на место, если не дотянули */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;

    border-width: 10px;
    border-style: solid;
    border-color: #000000;
    box-shadow: 5px 5px 25px #000000;
    
    position: absolute;
    margin: 50px auto;
    perspective: 1000px; /* Добавляет глубину */
    flex: 0 0 auto;           /* Запрещаем картинкам сжиматься */


    object-fit: cover;        /* Чтобы картинки не искажались */
    border-radius: 25px;
    
    /* Каждая карточка должна «прилипать» по центру */
    scroll-snap-align: center;

}

.recommend-img {

    width: 100%;
    height: 100%;
    border-radius: 15px;
    position: absolute;

}

/* Эффект "Папки/Стопки" */

/* 1-я карта (верхняя) */
.recommend-video:nth-last-child(1) {
    z-index: 3;
    transform: translate(0, 0) scale(1);
}

/* 2-я карта (чуть ниже и меньше) */
.recommend-video:nth-last-child(2) {
    z-index: 2;
    transform: translate(0, 25px) scale(0.95);
    opacity: 0.9;
}

/* 3-я карта (еще ниже) */
.recommend-video:nth-last-child(3) {
    z-index: 1;
    transform: translate(0, 50px) scale(0.9);
    opacity: 0.7;
}

/* Все остальные карты прячем за третьей */
.recommend-video:nth-last-child(n+4) {
    z-index: 0;
    transform: translate(0, 50px) scale(0.9);
    opacity: 0;
}

.window{

    height: 500px;
    width: 1000px;
    position: relative;
    overflow: hidden;

}

.stretch {

    top: 0;
    left: 0;
    width: 99vw;
    height: 55vw;

}

.black-block {

    background-color: #000000;
    width: 100%;
    height: 400px;

}

.one {

    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Окно */

/* Модальное окно (скрыто по умолчанию) */
.modal1 {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Полупрозрачный фон */
}

/* Содержимое окна */
.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    max-width: 500px;
    position: relative;
    animation: fadeIn 0.3s;
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {

    display: flex;
    justify-content: center; /* по горизонтали */
    align-items: center;    /* по вертикали */
    flex-direction: column;

}

.container1 {

    display: grid;
    place-items: center; /* центрирует по обеим осям */
    height: 100px;

}