:root {
        /* --------------------------------------------------------------------------------------- */
    /* This code keeps the width of the  div at a constant size, unless the vw is below 800px. */
    /* If you want to do this, please just copy this code, its not worth the hell of           */
    /* trying to do it yourself.                                                               */
    /* --------------------------------------------------------------------------------------- */
    /* CSS math is literal madness    */
    /* ((1920*(1-bs/2))/1920-800)*(vw-800) */
    /*    (A/B)                 D     */
    /*      C  *  D                   */
    --a: calc(1920 * 0.25); /* THIS MUST BE UNITLESS */
    --b: calc(1920 - 800); /* SO MUST THIS          */
    --c: calc(var(--a) / var(--b));
    --d: calc(100vw - 800px);
    --e: calc(var(--c) * var(--d));
    --body_margin: max(var(--e), 0px);
}

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	font-family: 'Times New Roman', 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
	background: url('wallpaper.png');
	height: 100%;
	font-size: 12pt;
}

#body-container {
	margin: 0 calc(var(--body_margin) - 12px - 10px);
	padding: 2% 12px 0%;
	border-color: black;
	border-style: solid;
	border-width: 0 5px 0 5px;
	background: white;
	min-height: 100%;
	height: max-content;

	border-image: url('border.png') 5;
}

input {
	font-family: inherit;
}

button {
	font-family: inherit;
}

ul {
	list-style-type: none;
}

ul li ul li { /* Nested list styling */
	margin-left: 2ch;
}

ul li ul li:last-child {
	margin-bottom: 1ch;
}

ul li:last-child ul li:last-child {
	margin-bottom: 0ch;
}

summary {
	cursor: pointer;
}

form {
	display: inline-block;
}

/* Search bar and button div */
#searchbar {
	text-align: center;
}

#searchbar input[type="text"] {
	border: 1px solid #aaa;
	padding: 2px 2px;
}

#searchbar input[type="text"]:focus {
	outline: none;
	border-color: #ddd;
}

#searchbar button {
	border: 2px outset #ccc;
	background: #ddd;
	padding: 1px 2px;
}

#searchbar button:hover {
	border: 2px outset #ddd;
	background: #eee;
}

#searchbar button:focus {
	border: 2px inset #bbb;
	background: #ccc;
}

/* Logo for home and search */
#logo {
	width: 80%;
	margin: auto;
	margin-bottom: 1ch;
	display: block;
	overflow: visible;
}

/*--s Search Page Formatting --*/
#results-container {
	display: grid;
  	grid-template-columns: 300px 1fr;
  	gap: 4px;
  	padding-bottom: 3%;
}

#results-pane {
	background: url('results_background.png');
	display: grid;
	border: 5px solid;
	border-image: url('border.png') 5;
	grid-template-columns: repeat(auto-fill, 146px);
	justify-content: space-between;
	height: fit-content;
}

.result-thumbnail {
	display: inline-block;
	vertical-align:top;
	border: 5px solid;
	border-image: url('border.png') 5;
	margin: 4px;
	cursor: pointer;
}

.result-low-res {
	border-image: url('border_lowres.png') 5;
}

.result-thumbnail img {
	width: 128px;
	height: 128px;
	display: block;
}

#image-preview {
	border: 5px solid;
	border-image: url('border.png') 5;
}

#info-pane {
	height: min-content;
	position: sticky;
	top: 0%;
}

#info-pane-text {
	max-width: calc(256px + 10px);
}