*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body{
    /*background-color: #bdbaba;*/
    font-family: "Roboto", "Arial", sans-serif;
}
.mdi {
    font-size: 18px;
}
    :root{
        --number-of-item: 3;
        --side-bar-width: 336px;
    }
/*Start Header css*/
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        background-color: white;
    }
    .header .header-logo{
        width: 250px;
        flex-grow: 0;
        display: flex;
        height: 60px;
        align-items: center;
        padding-left: 20px;
    }
    .header-menu-button{
        padding: 12px 13px;
        margin-right: 5px;
        text-align: center;
    }
    .header-menu-button:hover{
        cursor: pointer;
        background-color: #ccc6c6;
        border-radius: 50%;
    }
    .youtube-logo{
        width: 40px;
    }
/*Start header-search css        */
    .header-search{
        width: calc(100% - 270px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        padding: 25px 0 20px 0;
        left:270px;
        top: 0;
    }
    .search-bar{
        margin: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    #search {
        display: inline-block;
        border-radius: 14px 0 0 14px;
    }
    .search-btn{
        border: none;
        /*background: none;*/
        padding: 4px;
        border-radius: 0 14px 14px 0;
    }
    .search-bar .mdi-microphone {
        margin-left: 16px;
        background-color: #f0f0f0;
        border-radius: 50%;
        padding: 6px;
        width: 40px;
        text-align: center;
    }
    .search-bar input{
        font-size: 16px;
        height: 28px;
        width: 300px
    }
    .mdi-account, .mdi-bell-outline{
        /*width: 75px;*/
        margin: 0 20px;
        padding: 6px;
        text-align: center;
        background-color: #f0f0f0;
        border-radius: 50%;
    }
    .create{
        display: flex;
        align-items: center;
        font-size: 16px;
        background: #f0f0f0;
        padding: 6px;
        border-radius: 28.9px;
    }
    .mdi-plus{
        margin-right: 5px;
    }
    .create:hover,
    .mdi-bell-outline:hover,
    .mdi-account:hover,
    .mdi-microphone:hover{
        background-color: #ccc6c6;
    }

    .mdi-bell-outline, .mdi-account, .create{
        flex-grow: 0;
    }
/*End header-search css        */
/*End Header css*/
/**/
/*Start main-body css*/
    .main-body{
        display: flex;
        width: 100vw;
    }
/*Start main-body-sidebar css*/
    .main-body-sidebar{
        width: 250px;
        height: calc(100vh - 65px);
        overflow-y: scroll;
        scrollbar-width: none;
        color: black;
        /*display: none;*/
        flex-direction: column;
        background-color: white;
        padding-left: 20px;
        flex-grow: 0;
        flex-shrink: 0;
        position: sticky;
        top: 78px;

    }
    .main-body-sidebar hr{
        margin: 10px 0;
    }
    .sidebar-title-category{
        list-style: none;

    }
    .sidebar-title-category>a{
        display: flex;
        align-items: center;
    }
    .sidebar-title-category>a>span {
        padding: 6px 12px;
        font-size: 16px;
    }
    .sidebar-title-category>span{
        padding: 12px 12px;
        font-size: 16px;
    }


    .sidebar-title-category .mdi{
        font-size: 24px;
    }
    .sidebar-title-category:hover{
        background-color: lightgray;
        cursor: pointer;
        border-radius: 5px;
    }

    a{
        text-decoration: none;
        color: black;
    }
    .main-body-sidebar-small{
        /*background-color: #e25e74;*/
        display: none;
    }
    .main-body-sidebar-small>ul{
        position: relative;
    }
    .main-body-sidebar-small>ul>li{
        list-style: none;
        width: 100px;
        text-align: left;

    }
    .main-body-sidebar-small>ul>li>a{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    /*toggle*/
    #toggle:checked ~ .main-body-sidebar{
        display: none;
    }
    #toggle:checked ~ .main-body-sidebar-small{
        display: block;
        position: fixed;

    }
    #toggle:checked ~ .main-body-tag-content{
        margin-left: 100px;
    }
    #toggle:checked ~ .main-body-tag-content .main-body-content-video{
        flex-basis: calc((100vw - 170px) / var(--number-of-item));
    }

/*End main-body-sidebar css*/
/**/
/**/
/*start main-body-tag-content css*/
/**/
/*start main-body-tag css*/
.main-body-tag{
    display: flex;
    background: white;
    gap: 6px;
    position: sticky;
    top: 77px;
    /*overflow: hidden;*/
    /*flex-wrap: nowrap;*/
    /*overflow-x: auto;*/
    /*scrollbar-width: none;*/

}
.main-body-tag-category {
    background-color: #f0f0f0;
    margin: 6px 0px;
    border-radius: 6px;
    padding: 3px 6px;
    /*white-space: nowrap;*/
}
.main-body-tag-category:hover{
    background-color: #ccc6c6;
}
/*end main-body-tag css*/
/*start main-body-content*/
    .main-body-content{
        display: flex;
        flex-wrap: wrap;
        column-gap: 12px;
        margin-left: 12px;
        margin-top: 12px;

    }
    .main-body-content-video{
        flex-basis: calc((100vw - var(--side-bar-width)) / var(--number-of-item));
    }

    .main-body-content-video img{
        border-radius: 6px;
        width: 100%;
    }
    .video-information{
        height: 100px;
        display: flex;
        /*width: 100%;*/
    }
    .video-information-avatar{
        width: 20%;


    }
    .video-information-avatar img{
        width: 36px;
        border-radius: 50%;

    }
    .video-information-title{
        width: 80%;

    }
    .video-information-title div:first-child{
        height: 38px;
        overflow: hidden;

    }
    .video-information-title div:nth-child(2),
    .video-information-title div:nth-child(3) {
        height: 20px;
        color: #606060;
        font-size: 14px;
    }

/*end main-body-content*/
/*end main-body css*/

@media screen and (max-width: 992px){
    :root{
        --number-of-item: 2;
        --side-bar-width: 170px;
    }

    .main-body-sidebar{
        display: none;
    }
    .main-body-sidebar-small{
        display: block;
    }
}

@media screen and (max-width: 576px){
    :root{
        --number-of-item: 1;
    }
}