@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
	box-sizing: border-box;
}

body * {
	font-family: Roboto, Arial, sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
}

header {
	height: 70px;
	width: 100vw;
	top: 0;
	background-color: white;
	position: fixed;
	left: 0;
}

a {
	text-decoration: none;
}

#navbar {
	display: flex;	
	justify-content: space-between;
	margin-top: 1em;
	margin-right: 2em;
	margin-left: 2em;
}

#brand-name {
	font-size: 1.2em;
}

.fa-youtube {
	color: red;
	padding: 0.1em;
}

#icons-right i {
	padding: 0 0.5em;
}

.avatar {
	font-size: 2em;
}

#avatar {
	font-size: 2em;
}

.fa-bars {
	margin-right: 1em;
}

i {
	color: #A0A0A0;
	font-size: 1.2em;
}

#search {
	width: 30rem;
}

#main {
	display: flex;
	padding: 50px 0 50px 3em;
	margin-top: 3em;
}

#main-left {
  display: flex;
  flex-direction: column;
  width: 60%;
}

#main-content {
	height: 50vh;
}

#video-section {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-bottom: 1em;
}

iframe {
	width: 100%;
}

#video-info {
	display: flex;
	justify-content: space-between;
}

#description {
	width: 50%;
}

#video-title {
	font-size: 1.2rem;
}

#social-icons {
	align-self: flex-end;
	margin-right: 0.5em;
}

#social-icons a {
	color: #A0A0A0;
	padding: 0 1em 0 0;
}

hr {
	color: rgb(238, 238, 238);
}

#views {
	color: #606060;
}


#channel-info {
	display: flex;
	margin-top: 1em;
}

#channel-title {
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 0;
}

#published {
	font-size: 0.8rem;
	color: #606060;
}

#left {
	width: 10em;
}

#right {
	display: flex;
	flex-direction: column;
}

#title-sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#title-subtitle {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#channel-brand img {
	border-radius: 50%;
	height: 50px;
	width: 50px;
}

#subscription-box button{ 
	background: #EEEEEE;
	color: #696969;
	margin-right: 1em;
}

 #subscription-box i {
	margin-right: 0.5em;
}

 #comments {
	 margin-top: 1em;
 }

 #comment-count-sort {
 	display: flex;
}

 #comment-count {
 	margin-right: 3em;
}

.comment {
	display: flex;
	margin-bottom: 1.5em;
}

#comment-input {
	margin-top: 1.2em; 
	align-items: center;
}

#all-comments {
	margin: 1.2em 0;
}

.comment-info {
	margin-left: 1.2em;
}

#comment-box {
	width: 100%;
}

.comment-info input {
	height: 40px;
	width: 100%;
}

.reaction a {
	margin-right: 1em;
	color: #A0A0A0;
}

.reaction {
	margin-bottom: 1em;
}

.view-replies {
	color: #0A0A0A;
	
}

#video-feeds {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 30%;
	margin-left: 1.5em;
}

#autoplay-section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#autoplay {
	color: #606060;
}

#recommendations {
	display: flex;
	flex-direction: column;
	margin-top: 1em;
}

.thumbnail {
	width: 168px;
	height: 94px;
}

.thumbnail-info {
	display: flex;
	flex-direction: column;
	margin-left: 1em;
}

.thumbnail-info span {
	margin-bottom: 0.2em;
}

.thumb-title {
	margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.1rem;
}

.thumb-username, .thumb-views{
	color: #606060;
	line-height: 1.2rem;
    font-size: 0.9rem;
    font-weight: 400;
}

.thumb-box {
	display: flex;
	margin-bottom: 1em;
}