style.css

@@ -1,131 +1,147 @@
 * {
 	margin: 0;
 	padding: 0;
-	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+			box-sizing: border-box;
 	text-transform: capitalize;
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	font-weight: normal;
-}
-
-body {
+  }
+  
+  body {
 	background: #fff;
 	overflow: hidden;
-}
-
-.heading {
+  }
+  
+  .heading {
 	color: dimgrey;
 	font-size: 40px;
 	padding: 10px;
-}
-
-.container {
+  }
+  
+  .container {
+	display: -ms-grid;
 	display: grid;
-	grid-template-columns: 2fr 1fr;
+	-ms-grid-columns: 2fr 1fr;
+		grid-template-columns: 2fr 1fr;
 	gap: 15px;
-	align-items: flex-start;
+	-webkit-box-align: start;
+		-ms-flex-align: start;
+			align-items: flex-start;
 	padding: 5px 5%;
-}
-
-.container .main-video {
+  }
+  
+  .container .main-video {
 	background: white;
 	border-radius: 5px;
 	padding: 10px;
-}
-
-.container .main-video video {
+  }
+  
+  .container .main-video video {
 	width: 100%;
 	border-radius: 5px;
-}
-
-.container .main-video video .title {
+  }
+  
+  .container .main-video video .title {
 	color: grey;
 	font-size: 23px;
 	padding-top: 15px;
 	padding-bottom: 15px;
-}
-
-.container .video-list {
+  }
+  
+  .container .video-list {
 	background: white;
 	border-radius: 5px;
 	height: 100vh;
 	overflow-y: scroll;
-}
-
-.container .video-list .vid video {
+  }
+  
+  .container .video-list .vid video {
 	width: 100%;
 	border-radius: 5px;
-}
-
-.container .main-video .title {
+  }
+  
+  .container .main-video .title {
 	color: grey;
 	font-size: 23px;
 	padding-top: 15px;
 	padding-bottom: 15px;
-}
-
-.container .video-list::-webkit-scrollbar {
+  }
+  
+  .container .video-list::-webkit-scrollbar {
 	width: 7px;
-}
-
-.container .video-list::-webkit-scrollbar-track {
+  }
+  
+  .container .video-list::-webkit-scrollbar-track {
 	background: white;
 	border-radius: 50px;
-}
-
-.container .video-list::-webkit-scrollbar-thumb {
+  }
+  
+  .container .video-list::-webkit-scrollbar-thumb {
 	background: #ccc;
 	border-radius: 50px;
-}
-
-.container .video-list .vid video {
+  }
+  
+  .container .video-list .vid video {
 	width: 100px;
 	border-radius: 5px;
-}
-
-.container .video-list .vid {
+  }
+  
+  .container .video-list .vid {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
 	gap: 15px;
 	background: white;
 	border-radius: 5px;
 	margin: 10px;
 	padding: 10px;
-	border: 1px solid rgba(0, 0, 0, .1);
+	border: 1px solid rgba(0, 0, 0, 0.1);
 	cursor: pointer;
-	flex-direction: column;
-}
-
-.container .video-list .vid:hover {
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+		-ms-flex-direction: column;
+			flex-direction: column;
+  }
+  
+  .container .video-list .vid:hover {
 	background: white;
-}
-
-.container .video-list .vid.active {
+  }
+  
+  .container .video-list .vid.active {
 	background: #ccc;
-}
-
-.container .video-list .vid.active.title {
+  }
+  
+  .container .video-list .vid.active.title {
 	color: white;
-}
-
-.container .video-list .vid .title {
+  }
+  
+  .container .video-list .vid .title {
 	color: grey;
 	font-size: 17px;
-}
-
-.container .video-list .vid video {
+  }
+  
+  .container .video-list .vid video {
 	width: 100%;
 	border-radius: 5px;
-}
-
-@media(max-width:994px) {
+  }
+  
+  @media (max-width: 994px) {
 	.container {
-		grid-template-columns: 1.5fr 1fr;
-		padding: 10px;
+	  -ms-grid-columns: 1.5fr 1fr;
+		  grid-template-columns: 1.5fr 1fr;
+	  padding: 10px;
 	}
-}
-
-@media(max-width:778px) {
+  }
+  
+  @media (max-width: 778px) {
 	.container {
-		grid-template-columns: 1fr;
-		padding: 10px;
+	  -ms-grid-columns: 1fr;
+		  grid-template-columns: 1fr;
+	  padding: 10px;
 	}
-}
+  }
+  /*# sourceMappingURL=style.css.map */
+  .vid img{
+	width: 100%;
+	}