@charset "UTF-8";
html {
	min-height: 100%;
	height: fit-content;
}
body.imdb {
	margin: 0;
	height: auto;
	background-color: #000f;
	background: radial-gradient(circle at 128px 128px in hsl shorter hue,  #112e 0, #112e 25%, #001e 100%);
/*
	background: linear-gradient(180deg in hsl shorter hue, #112d 0, #112f 100%);
*/
	background-repeat: no-repeat;
	padding-block: 2em 2em;
}

.imdb .container {
	max-width: 920px;
	margin-block: 0;
	margin-inline: auto;
}
.imdb form {
	margin-block-end: 8px;
}

.imdb h1 {
	background: linear-gradient(135deg, #f7c701ee 0%, #f7c701c7 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	margin-block: 0 auto;
	width: max-content;
	height: max-content;
	font-weight: 400;
	font-size: 2em;
	border-block-end: solid 2px #fff3;
}
.imdb h1::after {
	display: none;
}
.imdb h1 + .version-label {
	margin: 4px auto 24px;
	width: max-content;
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.75;
	font-family: "Ubuntu Sans Mono", monospace;
	opacity: .55;
}
.imdb h1 + .version-label::before {
	content: "ver."
}

.imdb h2 {
	margin-block: 24px 8px;
	font-weight: 400;
	font-size: 1.75em;
}

.imdb h3 {
	margin-block: 24px 8px;
	font-weight: 400;
	font-size: 1.25em;
}
form#imdbForm {
	margin-block-end: 32px;
}

.imdb input[type="url"] {
	width: 100%;
	height: calc(1lh + 8px * 2);
	padding: 8px;
	color: #000c;
	background: #fffd;
	font-size: 15px;
	line-height: 1.35;
	border-radius: 8px;
}
.imdb input[type="url"]::placeholder {
	color: #1115;
}

.imdb button {
	padding: 8px 16px 10px;
	min-height: 24px;
	height: calc(100% + 2px * 2);
	color: #fffc;
	background: #36c6;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border-radius: 8px;
	border: solid 1px;
	border-color: #fff3 #3333 #3333 #fff3;
	cursor: pointer;
	transition: all .25s ease-in-out;
}
.imdb button:hover, .imdb button:active {
	filter: brightness(115%) contrast(105%);
	box-shadow: 0 0 1px 1px #000d, 0 0 16px -4px #000e;
}

.imdb .row {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 128px;
	align-items: center;
}

.imdb textarea {
	resize: vertical;
	padding: 8px 12px;
	width: 100%;
	min-height: 5lh;
	height: calc(6lh + 8px * 2);
	color: #000e;
	background: #fffd;
	font-size: 15px;
	line-height: 1.35;
	border-radius: 8px;
}

.imdb .preview {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.imdb .preview .card:first-child {
	flex: 1;
	margin-inline-start: -12px;
	width: calc(100% + 12px);
}

.imdb .card {
	padding: 12px;
	background: #0003;
	border-color: #ccc1 #0005 #0003 #ccc1;
	border: solid 2px;
	border-color: #bbb1 #0003 #0003 #bbb1;
	border-radius: 12px;
	box-shadow: 0 0 2px #0003, 0 0 32px -12px #0009;
}

#out + div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	margin-block-start: 8px;
}
#out + div a {
	align-self: flex-end;
	padding-inline-start: 4px;
}

.imdb .muted {
	margin-block-start: 4px;
	margin-inline-start: 4px;
	line-height: 1;
	opacity: .8;
}
.imdb .muted em {
	font-weight: 500;
}

.imdb img {
	max-width: 300px;
	height: auto;
	border-radius: .5rem;
}
.imdb .preview a {
	transition: all .25s ease-in-out;
	filter: brightness(95%) contrast(95%) opacity(90%);
}
.imdb .preview a:hover, .imdb .preview a:active {
	filter: brightness(105%) contrast(105%) opacity(100%);
}

.imdb pre {
	margin-block-end: 32px;
	padding: .75em 1.25em;
	width: 100%;
	min-height: calc(8lh + .75em * 2);
	max-height: calc(16lh + .75em * 2);
	color: #eeee;
	background: #0005;
	font-size: 13px;
	line-height: 1.6;
	font-family: "Ubuntu Sans Mono", monospace;
	overflow: scroll;
	border: solid 2px;
	border-color: #ccc1 #0003 #0003 #ccc1;
	border-radius: 12px;
	box-shadow: 0 0 2px #0003, 0 0 32px -12px #0009;
	scroll-behavior: smooth;
	scrollbar-gutter: stable both-edges;
	scrollbar-color: #cdf6 #bbb1;
}

.imdb address {
	display: block;
	width: max-content;
	margin-block-start: 4em;
	margin-inline: auto;
	font-size: 14px;
	line-height: 1;
	font-family: "Ubuntu Sans", sans-serif;
	opacity: .7;
	text-shadow: 0 0 2px #001e;
}