*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			background: linear-gradient(65deg, #f1c40f 50%, #333 50.1%);
		}
		.container{
			/* background: #fff; */
			/* height: 450px; */
			/* width: 950px; */
			/* display: flex; */
			box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
		}
		.container .video-list{
			/* width: 20%; */
			padding: 10px;
			/* background: red; */
			margin: auto;
		}
		.container .video-list button{
			width: 100%;
			/* height: 105px; */
			padding: 10px;
			margin: 2px 0px;
			cursor: pointer;
			animation: slideIn 0.8s;
			border:none;
			/* background: #fff; */
		}
		.container .video-list button.active,
		.container .video-list button:hover{
			box-shadow: 0 0 0 1px #333 inset;
		}
		@keyframes slideIn {
		  0% {
		    transform: translateY(+100%);
		    opacity: 0;
		  }
		  100% {
		    transform: translateY(0);
		    opacity: 1;
		  }
		}
		.container .main-video{
			/* width: 80%; */
			background: #000;
			margin: auto;
		}
		.container .main-video video{
			width: 100%;
			height: 100%;
			outline: none;
			object-fit: fill;
		}
		@media(max-width: 768px){
			.container{
				/* width: 100%; */
				/* flex-direction: column; */
			}
			.container .main-video{
				/* width: 100%; */
			}
			.container .video-list{
				/* width: 100%; */
			}
		}