Some Youtube CSS edits

/*
    YT design changer CSS

    Works with YT's dark theme
*/


/*
    Adds soft background to channel videos and makes them smaller on channel page
*/
ytd-item-section-renderer{
    margin-top: 2em;
    padding: 2em;
    background: var(--yt-spec-general-background-a);
}

/*
    Adds soft background to featured channels on channel page
*/
ytd-browse-secondary-contents-renderer{
    margin: 2em;
    background: var(--yt-spec-general-background-a);
}

/*
    Makes sidebar smaller and adds background to all of youtube
*/
ytd-app{
   --app-drawer-width: 250px;
    background: var(--yt-spec-general-background-b);
}

/*
    Makes content in sidebar smaller
*/
ytd-guide-renderer.ytd-app {
    width: 240px;
}

/*
    Changes all size of all text
*/
html{
    font-size: 9px!important;
}

/*
    Adjusts space reserved for upper sidebar (everything above the subscribed channels list)
*/
ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
    margin-left: 280px;
}

/*
    Searchbar stays on top on channel page
*/
div #masthead-container.ytd-app {
    z-index: 3000 !important;
}

/*
    Adds background around upload / playlist sorter buttons on channel page
*/
ytd-channel-sub-menu-renderer{
    padding: 1em;
    background: var(--yt-spec-general-background-a);
}

/*
    Adds space around videos on channel uploads page
*/
ytd-grid-video-renderer{
    margin: 2em;
}

/*
    Adds space around playlists on channel playlist page
*/
ytd-grid-playlist-renderer{
    margin: 2em;
}

/*
    Adds soft background to recommended section on homepage
*/
ytd-rich-grid-renderer{
    background: var(--yt-spec-general-background-a);
}

/*
    Makes homepage thumbnails smaller
*/
ytd-rich-grid-video-renderer{
   padding: 0.5em;
}

/*
    Adds soft background to other homepage sections
*/
ytd-rich-section-renderer{
    padding: 2em;
    background: var(--yt-spec-general-background-a);
}

/*
    Controls position of Picture in Picture Button
*/
videocontrols{
    width: 100%;
}

/*
    Controls width of text and description next to thumbnail on channel main page
*/
#grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer{
    width: 50%;
}


/*
    The height of theater mode videos
    Change the 30 to anything in between 16 and 30
    YT default: 16
*/
ytd-watch-flexy[theater]:not([fullscreen]) #player-theater-container{
    height: calc((9/30) * 100vw) !important;
}

/*
    The width of theater mode videos to get black bars on the left and right side
    Change width to anything between 0% and 100%
    Low % may make video too small to view
    Above 50% makes controls bigger than the video (video controls go into black space on both sides)
    YT default: 100%
*/
ytd-watch-flexy[theater]:not([fullscreen]) #player-theater-container #player-container{
    width: 60% !important;
    margin:auto !important;
}

/*
    Adds soft background to video title & likes + shares etc. section
*/
#info-contents{
    padding: 1em;
    background: var(--yt-spec-general-background-a);
}

/*
    Adds soft background to video description section
*/
#meta-contents{
    padding: 1em;
    background: var(--yt-spec-general-background-a);
}

/*
    Adds soft background to the "next videos" section
*/
.ytd-watch-next-secondary-results-renderer{
    padding: 1em;
    background: var(--yt-spec-general-background-a);
}