@font-face {
	font-family: 'Montserrat-Light';
	src: url('../fonts/Montserrat-Light.ttf');
}

:root {
	--pink_prime: rgb(220, 20, 120);
		--pink_dark_1: rgb(215, 15, 115);
		--pink_dark_2: rgb(210, 10, 110);
		--pink_dark_3: rgb(205, 5, 105);
		--pink_light_1: rgb(225, 25, 125);
		--pink_light_2: rgb(230, 30, 130);
		--pink_light_3: rgb(235, 35, 135);
        --background_prime: rgb(35, 30, 50); /* цвет основного фона */
            --background_dark_1: rgb(30, 25, 45);
            --background_dark_2: rgb(25, 20, 40);
            --background_dark_3: rgb(20, 15, 35);
            --background_dark_4: rgb(15, 10, 30);
            --background_dark_5: rgb(10, 5, 25);
            --background_light_1: rgb(40, 35, 55);
            --background_light_2: rgb(45, 40, 60);
            --background_light_3: rgb(50, 45, 65);
            --background_light_4: rgb(55, 50, 70);
            --background_light_5: rgb(60, 55, 75);
	--purple_prime: #7033ff;
		--purple_dark_1: #621fff;
		--purple_dark_2: #540cff;
		--purple_dark_3: #4a00f7;
		--purple_dark_4: #4400e4;
		--purple_dark_5: #3e00d0;
		--purple_light_1: #7e47ff;
		--purple_light_2: #8c5aff;
		--purple_light_3: #996eff;
		--purple_light_4: #a781ff;
		--purple_light_5: #b595ff;
}

body {
	background: var(--background_prime);
	color: #eee;
    font-family: 'Montserrat-Light', sans-serif;
}

input, textarea {
    font-family: 'Montserrat-Light', sans-serif;
}

.header {
    border: px solid;
}
    .header_ins {
        width: 85%;
        margin: 1rem auto 0 auto;
        border: px solid red;
        display: flex;
    }

        .header_logo {
            width: 22%;
            border: px solid;
            display: flex; align-items: center; justify-content: ;
            padding-left: 3.8rem;
        }
            .header_logo img {
                height: 2rem;
            }

        .header_search {
            width: auto;
            border: px solid;
        }
            .search_box {
                position: relative;
            }
                .search_field {
                    background: var(--background_dark_3);
                    width: 18rem;
                    border-radius: 4rem;
                    box-shadow: inset 0 0 0.5rem #000;
                    padding: 0.5rem 1.2rem;
                    display: flex; grid-gap: 0.7rem;
                }
                    .search_field > img { /* иконка поиска */
                        height: 1rem;
                        filter: invert(1) saturate(0);
                        opacity: 0.7;
                        transform: translateY(0.1rem);
                    }
                    .search_field > span {
                        color: #aaa;
                        font-size: 0.9rem;
                        flex: 1;
                    }
                /* результаты поиска */
                .search_results {
                    background: var(--background_light_2);
                    position: absolute; top: 2.5rem; left: 0; z-index: 15;
                    width: 100%;
                    border-radius: 1rem;
                    overflow: hidden;
                    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 1);
                    padding: 1rem 1rem 0 1rem;
                    transition: 0.1s;
                    visibility: hidden;
                    opacity: 0;
                }
                /* результаты поиска при активном поле поиска */
                .header_search_is_active .search_results {
                    visibility: visible;
                    opacity: 1;
                }
                    /* заглушка */
                    .search_results:before {
                        font-size: 0.9rem;
                        text-align: center;
                        color: #aaa;
                        margin-bottom: 1rem;
                        content: 'Начните писать для поиска';
                        display: block;
                    }
                    /* заглушка при найденных результатах */
                    .search_results_finded:before {
                        display: none;
                    }
                    .search_item {
                        display: flex; grid-gap: 0.7rem; align-items: center;
                        margin: 0 0 0.5rem 0;
                    }
                        .search_item_img {
                            width: 20%; min-width: 20%;
                            padding-bottom: 20%;
                            border-radius: 0.5rem;
                            background: #000;
                            overflow: hidden;
                            position: relative;
                        }
                            .search_item_img > img {
                                object-fit: cover;
                                width: 100%; height: 100%;
                                position: absolute; top: 0; left: 0;
                                transition: 0.3s;
                            }
                            .search_item:hover .search_item_img > img {
                                transform: scale(1.5);
                            }
                        .search_item_info {
                            color: #aaa;
                            font-size: 0.9rem;
                            width: 80%;
                            transition: 0.3s;
                        }
                        .search_item:hover .search_item_info {
                            color: #eee;
                        }
                        .search_item_tag .search_item_info {
                            color: rgb(82, 136, 223);
                        }

.main_content {
    margin: 2rem 0;
    border: px solid green;
}
    .main_content_ins {
        display: flex; grid-gap: 1.5rem;
        width: 85%;
        margin: 0 auto;
    }

        .left_sidebar {
            width: 25%;
        }
            .left_sidebar_ins {

            }
                .account_nav {
                    background: #111;
                    padding: 1rem 1.5rem;
                    border-radius: 1rem;
                    display: flex; flex-direction: column; grid-gap: 0.5rem;
                }
                    .account_nav_item {
                        display: flex; align-items: center;
                        color: #ddd;
                        padding: 0.3rem;
                        font-size: 1rem;
                        transition: 0.2s;
                    }
                    .account_nav_item:hover {
                        opacity: 0.8;
                    }
                        .account_nav_item img {
                            height: 1.5rem;
                            filter: brightness(1) invert(100%) saturate(0);
                            margin-right: 0.5rem;
                        }

        .content {
            width: 70%;
        }
            .content_ins {

            }

        .right_sidebar {
            width: 25%;
        }
            .right_sidebar_ins {

            }

/* заголовок страницы тега */
.tag_page_name {
    font-size: 1.5rem; font-weight: normal;
    text-align: center;
    margin: 0 0 1.5rem 0;
}
    .tag_page_name > span {
        color: var(--pink_prime);
    }

.similar_videos_title {
    text-align: center;
    color: #999;
    margin-bottom: 1rem;
}
.similar_videos {

}

.others_watching {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6);
    background: var(--background_light_2);
    border-radius: 1rem;
    padding: 1rem 1rem 0 1rem;
}
    .others_watching_title {
        text-align: center;
        margin-bottom: 1.4rem;
        color: #999;
    }
    .others_watching_videos {
        text-align: center;
        padding: 0 0 1rem 0;
    }

        .others_watching_video {
            margin: 0 0 1rem 0;
            border-radius: 0.3rem;
            overflow: hidden;
            display: block;
            transition: 0.2s;
        }
        .others_watching_video:hover {
            background: var(--background_light_4);
        }
            .others_watching_video_ins {
                display: flex;
            }
                .others_watching_video_poster {
                    width: 27%;
                    position: relative;
                }
                    .others_watching_video_poster > img {
                        width: 100%; height: 100%;
                        position: absolute; top: 0; left: 0;
                        border-radius: 0.7rem;
                    }
                    /*заглушка для постера, чтобы карточки не сжимались, пока постер грузится*/
                    .others_watching_video_poster:after {
                        content: '';
                        width: 100%; padding-bottom: 100%;
                        background: #111;
                        display: block;
                        border-radius: 0.7rem;
                    }
                .others_watching_video_info {
                    padding: 0.5rem 0.75rem;
                    width: 73%;
                }
                    .others_watching_video_name {
                        color: #ddd;
                        font-size: 0.83rem;
                        text-align: left;
                    }

.sidebar_video {
    margin: 0 0 1rem 0;
    border-radius: 0.7rem;
    overflow: hidden;
    display: block;
    transition: 0.2s;
    background: var(--background_light_2);
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
.sidebar_video:hover {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 1);
    background: var(--background_light_3);
}
    .sidebar_video_ins {
        display: flex;
    }
        .sidebar_video_poster {
            width: 30%;
            position: relative;
        }
            .sidebar_video_poster > img {
                width: 100%; height: 100%;
                position: absolute; top: 0; left: 0;
                display: ;
            }
            /*заглушка для постера, чтобы карточки не сжимались, пока постер грузится*/
            .sidebar_video_poster:after {
                content: '';
                width: 100%; padding-bottom: 100%;
                background: #111;
                display: block;
            }
        .sidebar_video_info {
            padding: 0.5rem 1rem;
            width: 70%;
        }
            .sidebar_video_name {
                color: #ddd;
                font-size: 0.88rem;
                /*ограничу высоту в 2 строки*/
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
                word-break: break-word;
            }

/*превью видео*/
.video_card {
    display: flex; flex-direction: column;
    border: px solid red;
    background: var(--background_light_2);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.4);
    overflow: hidden;
    margin: 0 0 1.7rem 0;
}
/*стиль для видеокарточки на странице с видео*/
.video_page_card {
    margin-bottom: 5rem;
}
.video_card[orientation='vertical'],
.video_card[orientation='semivertical'],
.video_card[orientation='square'] {
    flex-direction: row;
}

    /*Контейнер для плеера*/
    .video_player_container {
        background: #030303;
        border: px solid red;
    }
    .video_card[orientation='vertical'] .video_player_container,
    .video_card[orientation='semivertical'] .video_player_container,
    .video_card[orientation='square'] .video_player_container {
        width: 47%;
    }

        /* у плеера может быть 5 состояний: ".notActivated", "activated", ".playing", "onPause", "loading" (атрибут "status")
           для горизонтальных, вертикальных, квадратных видео высота настраивается прямо в html с помощью padding-bottom,
           чтобы при загрузке постера при слабом инете плеер не сжимался */
        .player {
            width: 100%;
            overflow: visible;
            border: px solid green;
            position: relative;
            text-align: center;
            cursor: pointer;
        }
            .player * {
                user-select: none;
            }

            .video_container {
                position: absolute; top: 0; left: 0;
                width: 100%; height: 100%;
            }

                /* Видео и постер >> */
                .player video, .player .player_poster {
                    position: absolute; top: 0; left: 50%; z-index: 2;
                    border: none;
                    outline: none;
                }
                /* растяну до полной ширины и высоты родителя все видео, кроме полугоризонтальных */
                .video_card[orientation='horizontal'] .player_poster,
                .video_card[orientation='vertical'] .player_poster,
                .video_card[orientation='semivertical'] .player_poster,
                .video_card[orientation='square'] .player_poster,
                .video_card[orientation='horizontal'] video,
                .video_card[orientation='vertical'] video,
                .video_card[orientation='semivertical'] video,
                .video_card[orientation='square'] video {
                    width: 100%; height: 100%;
                }
                /* вертик. видео ограничу высотой экрана */
                .video_card[orientation='vertical'] video,
                .video_card[orientation='vertical'] .player_poster {
                    max-height: calc(100vh - 2rem);
                }
                /* для полугориз. видео задам фиксированную высоту */
                .video_card[orientation='semihorizontal'] .player_poster,
                .video_card[orientation='semihorizontal'] video {
                    height: 20rem; max-height: 20rem;
                }
                .video_card[orientation='semihorizontal'] .player_poster,
                .video_card[orientation='horizontal'] .player_poster,
                .video_card[orientation='semihorizontal'] video,
                .video_card[orientation='horizontal'] video {
                    transform: translate(-50%, 0);
                }
                .video_card[orientation='vertical'] .player_poster,
                .video_card[orientation='semivertical'] .player_poster,
                .video_card[orientation='square'] .player_poster,
                .video_card[orientation='vertical'] video,
                .video_card[orientation='semivertical'] video,
                .video_card[orientation='square'] video {
                    top: 50%;
                    transform: translate(-50%, -50%);
                }

                /* Иконки проигрывания и паузы посередине видео >> */
                .player_center_playback_ico {
                    height: 2rem;
                    position: absolute; top: 50%; left: 50%; z-index: 5;
                    filter: invert(1) brightness(1.5);
                    visibility: hidden; opacity: 0;
                    transform: translate(-50%, -50%);
                    cursor: pointer;
                }
                /* У незапущенного плеера при наведении появляется иконка воспроизведения */
                .player[status='notActivated']:hover .player_center_play_ico {
                    opacity: 1; visibility: visible;
                }
                /* У играющего плеера скрываю иконку паузы */
                .player[status='playing'] .player_center_pause_ico {
                    visibility: hidden; opacity: 0;
                }
                /* У приостановленного плеера показываем иконку паузы */
                .player[status='onPause'] .player_center_pause_ico {
                    visibility: visible; opacity: 1;
                }
                    /* анимация появления и затухания иконки воспроизведения посередине */
                    .player_center_play_ico_active {
                        animation: animate_player_center_playback_ico 0.5s;
                    }
                    @keyframes animate_player_center_playback_ico {
                        0% { visibility: visible; opacity: 1; }
                        100% { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(1.5); }
                    }
                /* Иконки проигрывания и паузы посередине видео << */

                /* Кнопки управления >> */
                .player_control {
                    position: absolute; bottom: 0.5rem; z-index: 4;
                    opacity: 0; visibility: hidden;
                    padding: 0.8rem;
                    width: 100%;
                    border: px solid orange;
                    display: flex; justify-content: space-between; align-items: center;
                    transition: 0.1s;
                    font-size: 0.9rem;
                }
                .player:hover .player_control {
                    visibility: visible; opacity: 1;
                }
                    .player_control .duration {
                        font-weight: ;
                        margin: 0 auto 0 1rem;
                    }
                    .player_control > span {
                        color: #fff;
                        text-shadow: 0 0 0.2rem #050505;
                        border: px solid;
                    }
                    .player_control img {
                        height: 1.1rem;
                        filter: invert(1) brightness(1.5);
                    }

                    /*повтор*/
                    .player_control .repeat_ico {
                        cursor: pointer;
                        transform: translateY(-0.05rem);
                    }

                    /*звук >>*/
                    .player_control .volume { /*звук*/
                        border: px solid purple;
                        position: relative;
                    }
                        .volume_ico_box { /*иконка звука*/
                            border: px solid green;
                            display: inline-block;
                        }
                            .volume_ico {
                                cursor: pointer;
                                display: none;
                            }
                            /*максимальный звук по умолчанию*/
                            .volume_3_ico {
                                display: inline-block;
                            }

                        /* полоса громкости */
                        .volume_track_container {
                            padding: 0.5rem 0.4rem;
                            position: absolute; bottom: 1.5rem; left: 0;
                            visibility: hidden; opacity: 0;
                            transition: 0.2s;
                            border: px solid orange;
                            text-align: center;
                        }
                        .volume_track_container[is_pressed='1'] {
                            visibility: visible; opacity: 1;
                        }
                        .volume_ico_box:hover + .volume_track_container {
                            visibility: visible; opacity: 1;
                        }
                        .volume_track_container:hover {
                            visibility: visible; opacity: 1;
                        }
                            .volume_track {
                                width: 0.3rem; height: 5rem;
                                background: #ccc;
                                border-radius: 0.2rem;
                                display: flex; align-items: end;
                                position: relative;
                            }
                                /* заполненная полоса громкости */
                                .volume_fill {
                                    background: #007bff;
                                    border-radius: 0.2rem;
                                    width: 100%;
                                    height: 100%; /* Начальное значение громкости */
                                }
                                /* бегунок громкости */
                                .volume_thumb {
                                    width: 0.6rem; height: 0.6rem;
                                    background: #fff;
                                    border-radius: 50%;
                                    position: absolute; top: 0; left: 0;
                                    transform: translate(-25%, -50%);
                                    cursor: pointer;
                                    transition: background 0.2s ease;
                                }
                    /*звук <<*/
                /* Кнопки управления << */

                /* Полоса воспроизведения >> */

                /* все полосы и ползунок */
                .playbar_container {
                    position: absolute; z-index: 10; bottom: 0;
                    width: 100%; height: 0.05rem;
                    cursor: pointer;
                    overflow: visible;
                }
                /* толщина полос при наведении на плеер */
                .player:hover .playbar_container {
                    height: 0.3rem;
                }
                    .seekbar {
                        position: absolute; top: 50%; left: 0;
                        transform: translate(0, -50%);
                        width: 0.2rem; height: 100%;
                        border-radius: 50%;
                        background: white;
                        cursor: pointer;
                        background: #666;
                    }
                    .playbar {
                        position: absolute;
                        width: 0; height: 100%;
                        background: var(--pink_prime);
                    }
                    .bufferbar {
                        width: 0; height: 100%;
                        background: #aaa;
                    }
                /* Полоса воспроизведения << */

                /* Анимация ожидания в плеере (3 точки в ряд) */
                .player_waiting_animation {
                    position: absolute; top: 50%; left: 50%; z-index: 3;
                    visibility: hidden; opacity: 0;
                    transform: translate(-50%, -50%);
                    transition: 0.2s;
                    border: px solid red;
                    display: flex; grid-gap: 0.2rem;
                }
                .player[status='loading'] .player_waiting_animation {
                    visibility: visible; opacity: 1;
                }
                    /* точки */
                    .player_waiting_animation > span {
                        display: inline-block;
                        width: 0.8rem; height: 0.8rem;
                        background: var(--pink_light_1);
                        border-radius: 50%;
                        animation: animate_player_waiting infinite 0.7s;
                    }
                    .player_waiting_animation > span:nth-of-type(2) {
                        animation-delay: 0.1s;
                    }
                    .player_waiting_animation > span:nth-of-type(3) {
                        animation-delay: 0.2s;
                    }
                    @keyframes animate_player_waiting {
                        50% { opacity: 1; }
                        100% { opacity: 0; }
                    }

                /* Тени плеера >> */
                .player_shadow {
                    position: absolute; left: 0; z-index: 3;
                    width: 100%; height: 20%;
                }
                .player_shadow_bottom {
                    bottom: 0;
                    background: linear-gradient(transparent,rgba(0,0,0,0.5));
                    display: none;
                }
                .player_played .player_shadow_bottom {
                    bottom: -20%; opacity: 0;
                }
                .player_played:hover .player_shadow_bottom {
                    bottom: 0; opacity: 1;
                }
                /* Тени плеера << */

    /*Контейнер для информации видео*/
    .video_card_wrap_info {
        padding: 1rem;
    }
    .video_card[orientation='vertical'] .video_card_wrap_info,
    .video_card[orientation='semivertical'] .video_card_wrap_info,
    .video_card[orientation='square'] .video_card_wrap_info {
        width: 50%;
    }
        .video_card_name { /*название*/
            margin: 0 0 1.5rem 0;
            font-size: 1.3rem;
            border: px solid;
        }
        .video_page_card .video_card_name {
            font-size: 1.5rem; font-weight: normal;
            color: #ff008a;
        }
            .video_card_name .ico_pen {
                width: 0.8rem; height: 0.8rem;
                filter: grayscale(1);
                margin: 0 0 0 0.5rem;
                transform: translateY(-0.2rem);
            }
            .video_card_name a {
                word-break: break-word;
                transition: 0.2s;
                color: #eee;
            }
            .video_card_name a:hover {
                text-decoration: underline;
            }
            .video_page_card .video_card_name a:hover {
                text-decoration: none;
            }
        .video_card_descr { /*описание*/
            margin: 0 0 1.5rem 0;
            background: var(--background_light_5);
            color: #ccc;
            display: inline-block;
            padding: 0.8rem 1rem;
            border-radius: 0.3rem;
            align-self: flex-start;
            font-size: 0.95rem;
            position: relative;
        }
            .video_card_descr:before { /*стрелка коммента*/
                content: '';
                position: absolute; top: 0; left: 1rem;
                border: 0.6rem solid transparent;
                border-bottom-color: var(--background_light_5);
                transform: translateY(-100%);
            }
            .video_card[orientation='vertical'] .video_card_descr:before,
            .video_card[orientation='semivertical'] .video_card_descr:before,
            .video_card[orientation='square'] .video_card_descr:before {
                top: 1rem; left: 0;
                transform: translateX(-100%);
                border-bottom: none;
                border-right-color: var(--background_light_5);
            }
        .video_card_downloads {
            display: flex; align-items: center; justify-content: space-between;
            color: #aaa;
            margin: 0 0 1rem 0;
        }
            .video_card_downloads img {
                height: 1.1rem;
                margin: 0 0.4rem 0 0;
                filter: invert(1) brightness(0.7);
            }
            .video_card_downloads span {
                margin: auto auto auto 0.5rem;
            }
            .video_card_downloads a {
                color: #aaa;
                margin-left: 1rem;
                font-size: 0.9rem;
            }
            .video_card_downloads a:hover {
                text-decoration: underline;
            }
/*превью видео*/