/* *{
    border: solid red;
} */


body{
    background-color: rgb(181, 181, 255);
    background-image: url('1.png');
    /* overflow: hidden; */
}

.div1{
    width: 90%;
    margin: 0 auto;
    /* display: block; */
}

.files{
    position: absolute;
    top: 0%;
    left: 0%;
    margin: 0px, 0px, 0px, 0px;
    width: 25%;
    z-index: -1;
}

.ny{
    text-align: center;
    font-family: t1;
    color: rgb(204, 15, 8);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-size: 4vw;
}

.d1{
    font-size: 3.5vw;
    color: rgb(177, 115, 0);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-family: t1;
    text-align: center;
    width: 23%;
    height: 24%;
    margin-left: 2%;
    margin-bottom: 1%;
    float: left;
    border-radius: 5px;
}

.d2{
    background-color: rgb(199, 199, 255);
    color: green;
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-size: 9vw;
    font-family: t1;
    text-align: center;
    width: 23%;
    height: 24%;
    margin-left: 2%;
    float: left;
    box-shadow: 20px 20px 40px 5px rgba(0, 0, 0, 0.9);
    border-radius: 5px;
}

.nh{
    margin-bottom: -25%;
    margin-right: -30%;
    margin-left: 5%;
    width: 30%;
    transform: rotate(25deg);
}

/* .sp{
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 70px;
    cursor: pointer;
    position: fixed;
    transition: 1s;
} */

/* .sp:hover~.fio{
    opacity: 1;
}

.fio{
    position: absolute;
    background: url('tp.png');
    background-size: 100%;
    bottom: 50px;
    left: 2%;
    width:200px;
    height: 150px;
    z-index: 10;
    opacity: 0;
    transition: 1s;

    position: fixed;
}

.fio:hover{
    opacity: 1;
}

.fio1{
    position: absolute;
    top: 8%;
    left: 15%;
    text-align: center;
    color: #4b169e;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    z-index: 10;


} */
/* песни */
.reptxt3{
    position: absolute;
    font-family: t1;
    color: rgb(204, 15, 8);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-size: 2.5vw;
    top: -15%;
    left: 5%;
}






.blokmp3 {
    position: absolute;
    top: 150%;
    right: 13%;   
    width: 80%;
    height: 120%;



    overflow-y: scroll;    
    /* overflow-x: hidden;
    direction: rtl;    
    text-align: left;
    padding: 10px;    
    border: 1px solid #ccc;
    box-sizing: border-box; */

    /* margin-top: 500px;  */
    /* height: 700px;  */
    font-family: t1;

    font-size: 1.5vw;
    /* bottom: -65%; */

    color: rgb(177, 115, 0);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    /* font-family: t1; */
    /* text-align: center; */

    /* margin-left: 10%; */
    /* margin-bottom: 1%; */
    float: left;

    box-shadow: 20px 20px 40px 5px rgba(0, 0, 0, 0.9);
    border-radius: 5px;

}


/* Стилизация полосы прокрутки (только для WebKit-браузеров, таких как Chrome, Edge, Safari) */






.blokmp3::-webkit-scrollbar {    
    width: 36px; /* Увеличение ширины полосы */
}
.blokmp3::-webkit-scrollbar-thumb {    
    background-color: #888; /* Цвет ползунка */
    border-radius: 8px; /* Закругление углов ползунка */    
    border: 4px solid transparent; /* Пространство вокруг ползунка */
    background-clip: content-box; /* Прозрачность вокруг ползунка */
}
.blokmp3::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Цвет фона дорожки */    
    border-radius: 8px;
}

ul {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding: 0;       /* Убираем отступы */
    margin: 0;        /* Убираем внешние отступы */
}

li {
    margin-bottom: 10px; /* Добавляем отступ между пунктами списка (по желанию) */
}

input[type="checkbox"] {
    transform: scale(1.5); /* Увеличиваем масштаб чекбоксов */
    -webkit-transform: scale(1.5); /* Для поддержки в Safari */
    margin-right: 2%; /* Добавляем отступ справа (по желанию) */
    margin-left: 2%;
}


.custom-btn {
    background-color: #4CAF50; /* Основной цвет кнопки (зелёный) */
    color: white;              /* Цвет текста */
    border: none;              /* Без границы */
    padding: 10px 20px;        /* Внутренние отступы для удобного нажатия */
    text-align: center;        /* Центрирование текста */
    text-decoration: none;     /* Без подчеркивания */
    display: inline-block;     /* Инлайн-блок для корректного размещения */
    font-size: 16px;           /* Размер шрифта */
    margin: 10px 5px;          /* Отступы вокруг кнопок */
    cursor: pointer;           /* Курсор-указатель при наведении */
    border-radius: 5px;        /* Скруглённые углы */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавные эффекты */
}

.custom-btn:hover {
    background-color: #45a049; /* Изменение цвета при наведении */
    transform: scale(1.05);    /* Увеличение кнопки при наведении */
}

.custom-btn:active {
    background-color: #39843a; /* Цвет при нажатии */
    transform: scale(0.98);    /* Уменьшение кнопки при нажатии */
}

.custom-btn:focus {
    outline: none; /* Убираем контур фокуса */
}


@font-face{
    font-family: 't1';
    src: url('1.ttf');
}


/* Распространите это в мире */
.reptxt{
    position: absolute;
    font-family: t1;
    color: rgb(204, 15, 8);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-size: 2.5vw;
    bottom: -195%;
    right: 13%;
    animation-name: animt3;
    animation-duration: 3s;
  }
  
  @keyframes animt3{
      0%{
        right: 100%;
        opacity: 0;
      }
    
      100%{
        right: 13%;
        opacity: 1;
      }
  }
  
.oki{
    position: absolute;
    bottom: -190%;
    right: 1%;
    width: 5%;
    z-index: 2;
    animation-name: animodn ;
    animation-duration: 14s; /* Продолжительность анимации: 2 секунды */
    animation-timing-function: ease-in-out; /* Функция времени для плавности анимации */
    animation-iteration-count: infinite; /* Количество повторений (бесконечное) */
    animation-direction: alternate;
}
@keyframes animodn{
    0%{
        transform: rotate(0deg)
    }
    25%{
        transform: rotate(37deg);
    }
    75%{
        transform: rotate(-37deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.vki{
    position: absolute;
    bottom: -190%;
    right: 7%;
    width: 5%;
    z-index: 2;
    animation-name: animvk ;
    animation-duration: 15s; /* Продолжительность анимации: 2 секунды */
    animation-timing-function: ease-in-out; /* Функция времени для плавности анимации */
    animation-iteration-count: infinite; /* Количество повторений (бесконечное) */
    animation-direction: alternate;
}
@keyframes animvk{
    0%{
        transform: rotate(0deg)
    }
    25%{
        transform: rotate(-45deg);
    }
    75%{
        transform: rotate(45deg);
    }
    100%{
        transform: rotate(0deg);
    }
}


/* Администратор */
.admin-link {
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;                /* Фиксируем элемент на экране */
    bottom: 0px;                   /* Отступ от нижней части экрана */
    left: 0px;                     /* Отступ от левой части экрана */
    
    background-color:  hsl(0, 0%, 83%); 
    color: black;                   /* Черный текст */
    padding: 2px 30px;             /* Внутренние отступы для увеличения области ссылки */
    
    border-top: 1px solid #000;     /* Черная рамка сверху */
    border-right: 1px solid #000;   /* Черная рамка справа */
    border-radius: 0 5px 0 0; 

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Тень для фона */
    text-decoration: none;          /* Убираем подчеркивание ссылки */
    font-size: 16px;                
}

.admin-link:hover {
    background-color: white;       
    color: black;                  
}


/* карусель  */

/* Отправить открытку другу */
.reptxt2{
    position: absolute;
    font-family: t1;
    color: rgb(204, 15, 8);
    text-shadow: -2.5px -3px 2px rgb(255, 255, 255);
    font-size: 2.5vw;
    top: 15%;
    left: 10%;
    z-index: 5;
    animation-name: animt31;
    animation-duration: 3s;
  }
    @keyframes animt31{
      0%{
        left: 0%;
        opacity: 0;
      }
    
      100%{
        left: 10%;
        opacity: 1;
      }
  }

#blok222 {
    position: absolute;
    /* height: 500px;  */
    width: 90%;
    height: 24%;
    top: 65%;

}
#carousel  {
    touch-action: none;
    display: flex;
    height: 300px;
    perspective: 10000px;
    transform-style: preserve-3d;



    position: absolute;
    left: 0;
    top: 90%;


}
#drag-container,
#spin-container {
    position: relative;
    display: flex;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(0deg); /*  поворот */
}
#drag-container a {
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.1);
    border: 8px solid #BFE2FF;
}
#drag-container img {
    width: 100%;
    height: 100%;
    filter: grayscale(50%) contrast(0.8);
    transition: filter 0.3s;
}     
#drag-container a:hover img{
    filter: grayscale(0) contrast(1);
}          
#drag-container p {
    line-height: 1;
    font-size: 50px;
    font-weight: bold;
    text-align: center;      
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg);
    color: #337AB7;
    font-family: Verdana, sans-serif; 
}
#ground {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg);
}
@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
@keyframes spinRevert {
    from {
        transform: rotateY(360deg);
    }
    to {
        transform: rotateY(0deg);
    }
}     





@media (max-width: 767px) {

    .reptxt2{
        top: -10%;
        font-size: 5.5vw;
    }

    #blok222 {
        top: 20%;
        /* height: 150px;  */
    }


    /* .sp{
        width: 40px;
    } */

    #carousel  {
        top: 40%;
      
    }


    
      .reptxt3{
        font-size: 5.5vw;
        top: -7%;
        left: 5%;
    }
    .blokmp3 {
        top: 90%;
        right: 5%;   
        width: 90%;
        height: 130%;
        font-size: 3.5vw;
    }  


    .reptxt{
        bottom: -130%;
        font-size: 3.5vw;
      }

    .oki{
        bottom: -135%;
        width: 15%;
    }
    .vki{
        bottom: -135%;
        right: 17%;
        width: 15%;
    }

}