body {
	color: #fff;
	background-color: #181818;
	margin: 0;
	padding: 0;
	font-family: Open Sans, sans-serif
}

header {
	z-index: 1000;
	background-color: #202020;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	display: flex
}

@media (width<=600px) {
	header {
		position: fixed
	}

	.spacer {
		height: 125px
	}
}

.spacer {
	height: 0
}

@media (width<=600px) {
	header {
		position: fixed
	}

	.spacer {
		height: 125px
	}
}

.logo {
	align-items: center;
	display: flex
}

.logo h1 {
	margin: 0;
	font-size: 24px
}

main {
	padding: 20px
}

#videoGrid {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	display: grid
}

@media (width<=600px) {
	#videoGrid {
		grid-template-columns: repeat(1, 1fr)
	}
}

@media (width>=601px) and (width<=960px) {
	#videoGrid {
		grid-template-columns: repeat(2, 1fr)
	}
}

#searchResults {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	display: grid
}

@media (width<=600px) {
	#searchResults {
		grid-template-columns: repeat(1, 1fr)
	}
}

@media (width>=601px) and (width<=960px) {
	#searchResults {
		grid-template-columns: repeat(2, 1fr)
	}
}

.videoItem {
	text-align: center;
	cursor: pointer;
	background-color: #202020;
	border-radius: 4px;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	transition: transform .3s;
	display: flex;
	box-shadow: 0 2px 4px #0000001a
}

.videoItem:hover {
	transform: translateY(-5px)
}

.thumbnail {
	width: 100%;
	max-width: 100%;
	height: 0;
	padding-bottom: 150%;
	position: relative;
	overflow: hidden
}

.thumbnail img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

.cam {
	background-color: #00000080;
	border-radius: 3px;
	align-items: center;
	padding: 2px 5px;
	display: flex;
	position: absolute;
	top: 5px;
	right: 5px
}

.cam a {
	color: #fff;
	font-size: 12px
}

.tor {
	background-color: #00000080;
	border-radius: 3px;
	align-items: center;
	padding: 2px 5px;
	display: flex;
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translate(-50%)
}

.tor a {
	color: #fff;
	font-size: 12px
}

.torright {
	background-color: #00000080;
	border-radius: 3px;
	align-items: center;
	padding: 2px 5px;
	display: flex;
	position: absolute;
	top: 5px;
	right: 5px
}

.torright a {
	color: #fff;
	font-size: 12px
}

.dateOverlay {
	color: #fff;
	background-color: #00000080;
	border-radius: 3px;
	padding: 2px 5px;
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	left: 5px
}

.trailerOverlay {
	color: #fff;
	background-color: #00000080;
	border-radius: 3px;
	padding: 2px 5px;
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	right: 5px
}

.ratingOverlay {
	color: #fff;
	background-color: #00000080;
	border-radius: 3px;
	padding: 2px 5px;
	font-size: 12px;
	position: absolute;
	top: 5px;
	left: 5px
}

h3 {
	margin-top: 10px;
	font-size: 16px
}

p {
	color: #999;
	margin-top: 5px;
	font-size: 14px
}

.playIcon {
	opacity: 0;
	background-color: #0009;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	transition: opacity .3s;
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.videoItem:hover .playIcon {
	opacity: 1
}

a {
	color: #fff;
	text-decoration: none
}

a:hover {
	color: #fff
}

#more {
	color: #fff;
	text-align: center;
	cursor: pointer;
	background-color: #202020;
	border-radius: 4px;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 15px;
	font-weight: 700;
	transition: transform .3s;
	display: flex;
	box-shadow: 0 2px 4px #0000001a
}

.horizontal-modal,
.vertical-modal {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	display: flex
}

.horizontal-modal {
	flex-wrap: wrap
}

.vertical-modal {
	flex-flow: column wrap
}

.modal-backdrop {
	z-index: 1000;
	backdrop-filter: blur(8px);
	background: #000000a6;
	position: fixed;
	inset: 0
}

@keyframes modalFadeIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -48%)scale(.95)
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%)scale(1)
	}
}

.modal {
	color: #fff;
	z-index: 1001;
	background-color: #202020;
	border-radius: 12px;
	flex-direction: column;
	width: 640px;
	max-width: 90vw;
	padding: 30px 20px 20px;
	animation: .3s modalFadeIn;
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 16px #0008
}

@media (width<=600px) {
	.modal {
		width: 300px;
		height: 312px;
		background-color: #1f2f42
	}
	iframe {
		width: 300px;
		height: 168px
	}
}

@media (width>=601px) and (width<=960px) {
	.modal {
		width: 450px;
		height: 370px;
		background-color: #1f2f42
	}
	iframe {
		width: 450px;
		height: 250px
	}
}

#close-button {
	color: #aaa;
	cursor: pointer;
	background: 0 0;
	border: none;
	padding: 5px;
	font-size: 24px;
	font-weight: 700;
	transition: color .3s;
	position: absolute;
	top: 10px;
	right: 15px
}

#close-button:hover {
	color: #fff
}

select {
	appearance: none;
	color: #fff;
	background-color: #373737;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 12px;
	border: 1px solid #555;
	border-radius: 8px;
	width: 100%;
	max-width: 250px;
	margin-bottom: 20px;
	padding: 10px 12px;
	font-size: 14px
}

select:focus {
	border-color: #888;
	outline: none
}

.vaplayer {
	width: 640px;
	height: 360px
}

@media (width<=600px) {
	.vaplayer {
		width: 390px
	}
}

img.emoji {
	vertical-align: -.1em;
	width: 1em;
	height: 1em;
	margin: 0 .05em 0 .1em
}

#search-container {
	gap: .2rem;
	margin-top: .2rem;
	display: flex
}

#search-input-container>input {
	color: #fffc;
	background-color: #373737;
	border: none;
	font-size: 1rem
}

#search-container>button {
	cursor: pointer;
	border-radius: .2rem;
	width: 3.5rem
}

#search-container>#image-button {
	border-bottom-right-radius: .5rem
}

#search-input-container {
	background-color: #373737;
	border-radius: .2rem .2rem .2rem .5rem;
	flex-grow: 1;
	align-items: center;
	gap: .75rem;
	padding-left: 1rem;
	display: flex
}

#search-input-container>img {
	height: 1.5rem
}

#search-input-container>input {
	background-color: #0000;
	width: 100%;
	height: 1.25rem;
	padding: 1rem 1rem 1rem 0
}