* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--main-offset: 12px;
	--main-height: calc(100vh - var(--main-offset));
	--main-radius: 5px;
}

body {
	font: 14px BlinkMacSystemFont;
}

body::before {
	position: fixed;
	top: 0;
	right: calc(50% - var(--main-offset) - 0.5px);
	left: calc(50% - var(--main-offset) - 0.5px);
	z-index: 20;
	content: "";
	border-left: var(--main-offset) solid transparent;
	border-right: var(--main-offset) solid transparent;
	border-bottom: var(--main-offset) solid white;
}

main {
	position: absolute;
	top: var(--main-offset);
	right: 0;
	left: 0;
	width: 100vw;
	height: var(--main-height);
	background-color: white;
	border-top-right-radius: var(--main-radius);
	border-top-left-radius: var(--main-radius);
	overflow: hidden;
}

footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 10;
	width: 100%;
	background-color: black;
	opacity: 0.8;
}

.attribution {
	width: 71.42px;
	height: 25px;
}

.attribution > img {
	height: 100%;
}

.settings {
	width: 20px;
	height: 20px;
	margin: 0 2.5px;
	padding: 0;
	background: transparent url(../assets/settings.svg) center/contain no-repeat;
	border: none;
	outline: none;
}

.string-copy-container {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
}

.copy {
	background-image: url(../assets/copy.svg);
}

.open {
	background-image: url(../assets/open.svg);
}

.search {
	position: fixed;
	top: var(--main-offset);
	z-index: 10;
	width: 100vw;
	padding: 0.25em 0.5em 0.3em;
	font-size: inherit;
	background-color: white;
	border: none;
	border-top-right-radius: var(--main-radius);
	border-top-left-radius: var(--main-radius);
	box-shadow: 0 2px 2px      hsla(0, 0%, 0%, 0.15),
	            0 3px 1px -2px hsla(0, 0%, 0%, 0.2),
	            0 1px 5px      hsla(0, 0%, 0%, 0.1);
	outline: none;
	opacity: 0.9;
}

.preview-container {
	position: relative;
	min-height: var(--main-height);
	border-top-right-radius: var(--main-radius);
	border-top-left-radius: var(--main-radius);
	overflow-x: hidden;
	overflow-y: scroll;
}

.preview-container.empty::before {
	position: absolute;
	top: 24px;
	right: 0;
	left: 0;
	margin-top: calc(50% - 100px + 2em);
	padding-top: calc(100px + 1em);
	font-family: Consolas;
	text-align: center;
	content: "No Results";
	background: url("../assets/no-results.gif") center/contain no-repeat;
}

.preview {
	position: absolute;
	width: 150px;
	overflow: hidden;
}

.preview.right {
	right: 0;
}

.preview.left {
	left: 0;
}

.preview > img {
	width: 100%;
	transition: filter 400ms;
}

.preview:hover > img {
	filter: blur(2px);
}

.preview > .options {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0.5px;
	left: 0;
	padding: 0 15%;
	background-color: hsla(0, 0%, 0%, 0.5);
	opacity: 0;
	transition: opacity 400ms;
}

.preview:hover > .options {
	opacity: 1;
}

.preview > .options > a {
	width: 30px;
	height: 30px;
}
