@font-face
{
	font-family: "ui";
	src: url('/assets/webfont-1.eot?#iefix') format('embedded-opentype'),
		url('/assets/webfont-1.woff2') format('woff2'),
		url('/assets/webfont-1.woff') format('woff'),
		url('/assets/webfont-1.ttf') format('truetype'),
		url('/assets/webfont-1.otf') format('opentype');
	font-weight: medium;
}

@font-face
{
	font-family: "text";
	src: url('/assets/webfont-2.woff2') format('woff2'),
	url('/assets/webfont-2.woff') format('woff'),
	url('/assets/webfont-2.ttf') format('truetype');
}

@font-face
{
	font-family: "title";
	src: url('/assets/webfont-3-bold.eot?#iefix') format('embedded-opentype'),
	url('/assets/webfont-3-var.woff2') format('woff2-variations'),
	url('/assets/webfont-3-var.woff') format('woff-variations'),
	url('/assets/webfont-3-var.ttf') format('truetype-variations'),
	url('/assets/webfont-3-bold.woff2') format('woff2'),
	url('/assets/webfont-3-bold.woff') format('woff'),
	url('/assets/webfont-3-bold.ttf') format('truetype');
	font-style: normal;
	font-weight: bold;
}

@font-face
{
	font-family: "title";
	src: url('/assets/webfont-3-light.eot?#iefix') format('embedded-opentype'),
	url('/assets/webfont-3-var.woff2') format('woff2-variations'),
	url('/assets/webfont-3-var.woff') format('woff-variations'),
	url('/assets/webfont-3-var.ttf') format('truetype-variations'),
	url('/assets/webfont-3-light.woff2') format('woff2'),
	url('/assets/webfont-3-light.woff') format('woff'),
	url('/assets/webfont-3-light.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

:root
{
	--grey-00: #151515;
	--grey-10: #313131;
	--grey-20: #4b4b4b;
	--grey-30: #7f7f7f;
	--grey-40: #a0a0a0;
	--grey-50: #dfdfdf;

	--title: "title", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--text: "text", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--ui: "ui", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html
{
	background: var(--grey-00);
	color: var(--grey-50);
	font-family: var(--ui);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-rendering: optimizeLegibility; 
	-webkit-font-smoothing: antialiased;    
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings:"kern" 1;
	-ms-font-feature-settings:"kern" 1;
	-o-font-feature-settings:"kern" 1;
	-webkit-font-feature-settings:"kern" 1;
	font-feature-settings:"kern" 1;
	font-kerning: normal; 
}

body
{
	margin: 0;
}

.loading
{
	animation-name: pulse;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}

a
{
	color: inherit;
}

h1
{
	font-family: var(--title);
	color: var(--grey-50);
	opacity: 0.9; /* intensity slightly reduced */
	font-size: 3.6rem;
	font-weight: bold;
	font-variation-settings: 'wght' 600;
	margin: 0;
	line-height: 1.2em;
}

.h1.loading
{
	font-family: var(--title);
	color: transparent;
	font-size: 0px;
	line-height: 0px;
	font-weight: bold;
	font-variation-settings: 'wght' 600;
}

.h1.loading::before
{
	content: "";
	display: block;
	width: 80%;
	height: 28px;
	border-radius: 2px;
	margin-top: 8px;
	margin-bottom: 16px;
	background: var(--grey-50);
}

.h1.short.loading::before
{
	width: 40%;
}

h2
{
	font-family: var(--title);
	color: var(--grey-50);
	opacity: 0.85; /* intensity slightly reduced */
	font-size: 2.8rem;
	font-weight: normal;
	font-variation-settings: 'wght' 100;
	margin: 4px 0;
	line-height: 1.1em;
}

.h2.loading
{
	font-family: var(--title);
	color: transparent;
	font-size: 0px;
	line-height: 0px;
	font-weight: normal;
	font-variation-settings: 'wght' 100;
}

.h2.loading::before
{
	content: "";
	display: block;
	width: 60%;
	height: 18px;
	border-radius: 2px;
	margin-bottom: 45px;
	background: var(--grey-50);
}

.h2-list.loading::before
{
	width: 30%;
	margin-bottom: 10px;
	margin-top: 10px;
}

.notification
{
	line-height: 20px;
	background: var(--grey-50);
	position:  absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	color:  #000;
	text-align: center;
	font-family: var(--text);
	font-size: 1.3rem;
}

h2 a
{
	text-decoration: none;
	color: var(--grey-50);
}

h2 a:hover
{
	text-decoration: underline;
}

h6, label
{
	font-family: var(--ui);
	color: var(--grey-40);
	font-size: 1rem;
	margin: 0;
	line-height: 1.6em;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.06em;
}

h6 a
{
	text-decoration: none;
}

h6 a:hover
{
	text-decoration: underline;
}

p
{
	font-family: var(--text);
	color: var(--grey-50);
	font-size: 1.3rem;
	opacity: 0.85;
	margin: 30px 0;
	line-height: 1.9em;
}

.p.loading
{
	font-family: var(--text);
	color: transparent;
	font-size: 0px;
	line-height: 0px;
}

.p.loading::before, .p.loading span
{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	border-radius: 2px;
	margin-bottom: 15px;
	background: var(--grey-50);
}

.p.loading::after
{
	content: "";
	display: block;
	width: 60%;
	height: 10px;
	border-radius: 2px;
	background: var(--grey-50);
}

.logo-container
{
	float: left;
	padding: 8px 0 8px 30px;
	user-select: none;
}

.logo-container::after
{
	display: none;
}

.logo
{
	height: 1.2rem;
	transform: scale(4);
	opacity: 0.91;
}

.logo-text
{
	display: inline-block;
	margin-left: 40px;
}

nav
{
	text-align: right;
	width: 100%;
	box-sizing: border-box;
	padding: 30px 60px;
	z-index: 99;
	position: relative;
}

nav.profile-nav
{
	text-align: center;
	padding: 15px 30px;
	padding-bottom: 10px;
	max-width: max-content;
	margin: auto;

	border-top: 2px solid var(--grey-10);
	border-bottom: 2px solid var(--grey-10);
}

button.look-like-link
{
	background: none;
	outline: none;
	border: none;
	box-shadow: none;
	padding: 1rem 0;
	user-select: none;
}

nav a, button.look-like-link
{
	color: var(--grey-50);
	text-decoration: none;
	text-transform: uppercase;
	font-family: var(--ui);
	font-size: 1.2rem;
	margin-right: 30px;
	display: inline-block;
	width: max-content;
	user-select: none;
}

button.look-like-link:hover
{
	background: none;
	color: #fff;
	box-shadow: none;
}

nav.profile-nav a
{
	margin: 0px 15px;
}

nav a::after
{
	content: '';
	margin-top: 0.3rem;
	display: block;
	width: 0;
	height: 2px;
	background: var(--grey-50);
	transition: width 0.2s;
}

nav a:hover::after, nav a:focus::after, nav a.router-link-exact-active::after
{
	width: 100%;
}

.mobile-navigation
{
	display: none;
}

#mobile-menu 
{
	display: none;
	position: absolute;
	padding: 20px 0px 15px; /* renders to optically 30px on top and bottom */
	right: 30px;
	list-style: none;
	background: #000;
	transform: translateY(-10px);
	border-radius: 4px;
	box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.4), 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.15);
	text-align: left;
}

#mobile-menu.open
{
	display: block;
	animation-name: menu-roll-out;
	animation-timing-function: ease-out;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	overflow: hidden;
}

#mobile-menu li a
{
	padding: 1em 30px;
}

#mobile-menu.open li:nth-child(2)
{
	animation-delay: 0.08s;
}

#mobile-menu.open li:nth-child(3)
{
	animation-delay: 0.12s;
}

.cover
{
	background-color: var(--grey-20);
	width: 165px;
	height: 250px;
	border: 2px solid;
	border-color: var(--grey-20);
	font-size: 0px;
	color: transparent;
	display: block;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	user-select: none;
	box-sizing: border-box;
	transition: border-colour 0.1s ease;
}

.cover.large
{
	width: 330px;
	height: 500px;
}

.cover:hover
{
	border-color: var(--grey-30);
}

.profile
{
	font-size: 0px;
	color: transparent;
	width: 16px;
	height: 16px;
	display: inline-block;
	margin: 0;
	margin-left: 5px;
	border-radius: 100%;
}

h2 .profile
{
	margin: 0;
	margin-right: 1rem;
	line-height: 3.6rem;
	user-select: none;
}

button, .looks-like-button
{
	background: var(--grey-10);
	border-radius: 4px;
	padding: 12px 26px; /* works out to 16 and 30, with border */
	border: none;
	outline: none;
	cursor: pointer;
	color: var(--grey-50);
	font-family: var(--ui);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1em;
	border: 2px solid;
	border-color: var(--grey-10);
	transition: all 0.1s ease;
	user-select: none;
	text-decoration: none;
	font-size: 1.3rem;
}

nav a.looks-like-button::after
{
	display: none;
}

nav a.looks-like-button
{
	margin: 0;
}

button:hover, button:focus, .looks-like-button:hover, .looks-like-button:focus
{
	border-color: var(--grey-20);
	box-shadow: 0px 6px 12px 0px #000;
}

button:active, .looks-like-button:active
{
	background: var(--grey-50);
	border-color: var(--grey-50);
	color: var(--grey-00);
}

button.selected
{
	color: var(--grey-40);
}

button.disabled
{
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.4;
}

button.icon
{
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	padding: 0;
	width: 45px;
	height: 45px;
	border: none;
	display: inline-block;
	background-color: transparent;
	opacity: 0.23;
	color: transparent;
	font-size: 0;
	position: relative;
}

button.icon.disabled
{
	opacity: 0.1;
}

button.icon:hover, button.icon:focus
{
	box-shadow: none;
	opacity: 0.45;
}

button.icon.selected, button.icon:active
{
	opacity: 0.86;
	color: transparent;
}

[data-tooltip]::before
{
	content: attr(data-tooltip);
	display: block;
	position: absolute;
	top: -1.5rem;
	left: -15px;
	font-size: 1rem;
	line-height: 2rem;
	padding: 0 1ch;
	color: black;
	background: #fff;
	opacity: 0;
	z-index: 99;
	border-radius: 4px;
	pointer-events: none;
	width: max-content;
}

.search-result [data-tooltip]::before
{
	top: -2.5rem;
}

[data-tooltip]:hover::before
{
	opacity: 1;
}

button.heart
{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTExLjkyMyAyMEMxMS42IDIwLTIuNTUzIDE0LjQuNDA2IDQuMjU1aC4wMDZBNS45NDcgNS45NDcgMCAwIDEgNi4xMzMgMGMzLjIyNyAwIDQuNjkxIDEuNjU4IDUuODczIDMuOTE5QzEzLjE4MyAxLjY1OCAxNC42NDcgMCAxNy44NzQgMGE1Ljk0NyA1Ljk0NyAwIDAgMSA1LjcxNyA0LjI1NmguMDA2QzI2LjU1NiAxNC40IDEyLjI0NSAyMCAxMS45MjMgMjB6IiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+");
}

button.eye
{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTEzLjUwMSAyMC4wMDFhMTQuNDIzIDE0LjQyMyAwIDAgMS00LjYyLS43NTMgMTQuMDgyIDE0LjA4MiAwIDAgMS0zLjk2Ny0yLjA4OCAxMy42OTEgMTMuNjkxIDAgMCAxLTMuMDQ5LTMuMTY4IDEzLjEwNiAxMy4xMDYgMCAwIDEtMS44NjQtMy45OTFBMTMuMTA3IDEzLjEwNyAwIDAgMSAxLjg2NiA2LjAxYTEzLjY5MSAxMy42OTEgMCAwIDEgMy4wNDktMy4xNjhBMTQuMDc2IDE0LjA3NiAwIDAgMSA4Ljg4Mi43NTRhMTQuNDIzIDE0LjQyMyAwIDAgMSA0LjYxOS0uNzUzIDE0LjQyMyAxNC40MjMgMCAwIDEgNC42Mi43NTMgMTQuMDc5IDE0LjA3OSAwIDAgMSAzLjk2NyAyLjA4OCAxMy43IDEzLjcgMCAwIDEgMy4wNDkgMy4xNjggMTMuMTEzIDEzLjExMyAwIDAgMSAxLjg2NCAzLjk5MSAxMy4xMTEgMTMuMTExIDAgMCAxLTEuODY0IDMuOTkxIDEzLjcgMTMuNyAwIDAgMS0zLjA0OSAzLjE2OCAxNC4wODYgMTQuMDg2IDAgMCAxLTMuOTY3IDIuMDg4IDE0LjQyNCAxNC40MjQgMCAwIDEtNC42Mi43NTN6bS4wOTQtMTUuNDc4YTUuMDE4IDUuMDE4IDAgMCAwLTIuMDQyLjQzMUE1LjIxNSA1LjIxNSAwIDAgMCA5Ljg4NSA2LjEzIDUuNDg2IDUuNDg2IDAgMCAwIDguNzYgNy44NzRhNS42NjQgNS42NjQgMCAwIDAtLjQxMiAyLjEzNSA1LjY2NSA1LjY2NSAwIDAgMCAuNDEyIDIuMTM1IDUuNDkgNS40OSAwIDAgMCAxLjEyNSAxLjc0NCA1LjIyIDUuMjIgMCAwIDAgMS42NjggMS4xNzYgNS4wMiA1LjAyIDAgMCAwIDIuMDQyLjQzMSA1LjAyMSA1LjAyMSAwIDAgMCAyLjA0Mi0uNDMxIDUuMjIyIDUuMjIyIDAgMCAwIDEuNjY4LTEuMTc2IDUuNDg2IDUuNDg2IDAgMCAwIDEuMTI1LTEuNzQ0IDUuNjY1IDUuNjY1IDAgMCAwIC40MTItMi4xMzUgNS42NjUgNS42NjUgMCAwIDAtLjQxMi0yLjEzNSA1LjQ4MSA1LjQ4MSAwIDAgMC0xLjEyNS0xLjc0NCA1LjIxNiA1LjIxNiAwIDAgMC0xLjY2OC0xLjE3NiA1LjAxOSA1LjAxOSAwIDAgMC0yLjA0My0uNDMyeiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==");
}

button.add
{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNNzMsMTE0di04SDY1di00aDhWOTRoNHY4aDh2NEg3N3Y4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY1IC05NCkiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}

button.library
{
	transform: translateY(1px);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy45NTgiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyMy45NTggMzAiPjxwYXRoIGQ9Ik0xNi44NzUsMzBWMjUuODMzSDEyLjcwOFYyMi45MTdoNC4xNjdWMTguNzVoMi45MTd2NC4xNjdoNC4xNjd2Mi45MTdIMTkuNzkyVjMwWk05Ljc5MSwyNS44MzNINC4zNzVBNC4zNzIsNC4zNzIsMCwwLDEsMCwyMS40NThWNC4zNzVBNC4zNzIsNC4zNzIsMCwwLDEsNC4zNzUsMEgxOS43OTJWMi45MTdINS4xYTIuMTg3LDIuMTg3LDAsMCwwLDAsNC4zNzVIMTkuNzkydjguNTQySDEzLjk1OFYyMEg5Ljc5MnY1LjgzM2gwWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

button.search
{
	opacity: 0.86 !important;
	transform: translateY(-5px);
	height: 40px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40NzEiIGhlaWdodD0iMjIuNDciPjxwYXRoIGQ9Ik0xOC44OTYgMTYuODUzbC0yLjA0NCAyLjA0My0zLjk5LTQuMzM3YTYuNSA2LjUgMCAwIDEtOC4yNjYtLjc3IDYuNTA3IDYuNTA3IDAgMCAxIDAtOS4xOTIgNi41MDggNi41MDggMCAwIDEgOS4xOTIgMCA2LjUgNi41IDAgMCAxIC43NyA4LjI2NWw0LjMzOCAzLjk5ek02LjEyOCA2LjEyOWE0LjMzOCA0LjMzOCAwIDAgMCAwIDYuMTI4IDQuMzM4IDQuMzM4IDAgMCAwIDYuMTI4IDAgNC4zMzggNC4zMzggMCAwIDAgMC02LjEyOSA0LjMzOCA0LjMzOCAwIDAgMC02LjEyOCAweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}

button.cancel
{
	opacity: 0.95 !important;
	height: 36px;
	margin: 2px 0;
	background-size: 24px;
	display: block;
	float: left;
	box-shadow: -8px 0 8px 0 var(--grey-00) !important;
	background-color: var(--grey-00);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48cGF0aCBkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=");
}

.center-container
{
	max-width: 500px;
	box-sizing: border-box;
	margin: 30px auto;
	padding: 0 30px;
	text-align: center;
}

.book-grid
{
	display: grid;
	grid-template-columns: 330px 600px;
	grid-column-gap: 60px;
	margin: 30px auto;
	width: 990px;
}

.book-cover
{
	text-align: center;
	align-content: center;
}

.book-content
{
	margin-top: 60px;
}

.book-content h1
{
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.cover-buttons
{
	margin-top: 17px; /* renders to 30px optically */
}

.content-buttons
{
	margin-top: 60px;
	display: grid;
	grid-template-columns: max-content max-content;
	grid-column-gap: 10px;
}

.center-container .content-buttons
{
	margin: 30px auto 0;
	width: max-content;
}

.community-library
{
	margin: 30px 0;
	display: grid;
	grid-template-columns: 200px repeat(auto-fit, 21px);
	row-gap: 5px;
}

.community-library > p
{
	margin: 0px;
	line-height: 1;
	opacity: 0.4;
	grid-column: 2 / -1;
}

.community-library > h6
{
	grid-row: 1 / -1;
}

.list-grid > p
{
	text-align: center;
	opacity: 0.4;
	grid-column: 1 / -1;
}

.list-container
{
	margin: 30px auto;
	width: 990px;
}

.list-container.mini
{
	margin-top: 60px;
}

.list-grid
{
	margin: 10px 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, 165px);
	gap: 10px;
	justify-content: center;
}

.list-grid.mini
{
	overflow: hidden;
	gap: 0px 10px;
	grid-template-rows: auto auto;
	grid-auto-rows: 0;
}

.list-title, .friend-list, .search-result
{
	grid-column: 1 / -1;
	margin-bottom: 10px;;
}

.friend-list
{
	padding: 10px;
}

.friend-list:hover
{
	background: rgba(49, 49, 49, 0.3);
}

.search-result
{
	display: grid;
	grid-template-columns: 99px auto;
	grid-gap: 30px;
	margin-top: 20px;
	margin-bottom: 0px;
}

.search-result:nth-child(2)
{
	margin-top: 31px; /* optically renders as 60px of space between title and first result */
}

.search-buttons
{
	margin: 30px 0 0;
	display: grid;
	gap: 10px;
	grid-template-columns: 30px 35px max-content max-content;
}

.search-buttons .little
{
	display: none;
}

.search-result button
{
	font-size: 1rem;
	padding: 8px 18px;
}

.search-result button.icon
{
	width: 30px;
	height: 30px;
}

.search-result .cover
{
	max-width: 99px;
	max-height: 150px;
}

.search-result h2
{
	margin-top: 10px;
	margin-bottom: 10px;
	opacity: 1;
}

.search-result p
{
	margin: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.tag
{
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.1em;
	background: var(--grey-10);
	display: inline-block;
	width: max-content;
	padding: 0.4rem 0.8ch;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1.5px var(--grey-20);
	text-decoration: none;
	font-family: var(--text);
	color: var(--grey-50);
	opacity: 0.85;
	margin: 5px 5px 0 0
}

.tag:hover
{
	box-shadow: inset 0 0 0 1.5px var(--grey-30);
}

.tag::before
{
	content: "# ";
	opacity: 0.5;
}

/* override default popup */
.swal2-popup.swal2-modal.swal2-show, .swal2-popup.swal2-modal.swal2-hide
{
	animation: popup 0.3s ease-out 0s 1 forwards;
	border-radius: 4px;
	background: var(--grey-10);
	border: 2px solid;
	border-color: var(--grey-20);
	width: 42em;
}

.swal2-popup.swal2-modal.swal2-hide
{
	animation: popup-hide 0.2s ease 0s 1 forwards;
}

.swal2-popup.swal2-modal #swal2-content
{
	font-family: var(--text);
	color: var(--grey-50);
	font-size: 1.3rem;
	opacity: 0.85;
	margin: 30px 0px;
	line-height: 1.9em;
}

.swal2-popup.swal2-modal #swal2-title
{
	font-family: var(--title);
	color: var(--grey-50);
	font-size: 2.8rem;
	font-weight: normal;
	font-variation-settings: 'wght' 100;
	line-height: 1.1em;
	margin: 10px 0 0 0;
}

.swal2-popup.swal2-modal .swal2-actions .swal2-confirm.swal2-styled
{
	background: var(--grey-50);
	color: var(--grey-00);
	border: none;
	border-radius: 4px;
	padding: 12px 26px; /* works out to 16 and 30, with border */
	outline: none;
	cursor: pointer;
	font-family: var(--ui);
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1em;
	user-select: none;
}

.swal2-popup.swal2-modal .swal2-actions .swal2-confirm.swal2-styled:focus
{
	box-shadow: none;
}

.swal2-popup.swal2-modal .swal2-actions .swal2-confirm.swal2-styled:hover
{
	opacity: 0.8;
}

#login-widget
{
	display: none;
	grid-template-columns: 40px 1fr 1fr auto;
	column-gap: 10px;
	row-gap: 10px;
	max-width: 650px;
	background: var(--grey-00);
	box-shadow: 0px 6px 12px 0px var(--grey-00);
	padding: 5px 0px 0px 0px;
	position: absolute;
	z-index: 999;
	right: 60px;
	top: 10px;
}

#login-widget.visible
{
	display: grid;
}

#forgot-password, #forgot-password-2
{
	border-radius: 100%;
	background: var(--grey-10);
	width: 2rem;
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	transform: translate(30px, -4px);
	text-decoration: none;
	opacity: 0.7;
	display: inline-block;;
}

#forgot-password:hover, #forgot-password-2:hover
{
	opacity: 1;
}

#forgot-password-2
{
	transform: translate(-150px, 25px);
}

#forgot-password::after, #forgot-password-2::after
{
	display: none;
}

#search-nav-widget
{
	position: absolute;
	top: 25px;
	right: 60px;
	transition: opacity 0.1s ease;
	opacity: 0;
	pointer-events: none;
}

#search-nav-widget.visible
{
	opacity: 1;
	pointer-events: all;
}

#search-nav-widget #search-bar
{
	width: 30ch;
	padding-right: 45px;
	transition: transform 0.2s ease;
	transform: scaleX(0);
	transform-origin: right;
}

#search-nav-widget.visible #search-bar
{
	transform: scaleX(1);
}

#search-nav-widget button.icon.search
{
	z-index: 99;
	filter: invert(100%);
	position: absolute;
	right: 0;
	top: 5px;
}

#search-nav-widget button.icon.cancel
{
	transform: translateX(222px);
	transition: transform 0.2s ease;
}

#search-nav-widget.visible button.icon.cancel
{
	transform: translateX(0px);
}

label
{
	display: block;
	text-align: left;
	margin-bottom: 4px;
}

input, textarea
{
	font-size: 1.3rem;
	font-family: var(--text);
	border-radius: 4px;
	border: none;
	padding: 0px 10px;
	box-sizing: border-box;
	margin: 2px 0;
	line-height: 36px;
	background: var(--grey-50);
	color: var(--grey-00);
	width: 100%;
}

textarea
{
	line-height: 1.5;
	padding: 10px;
	height: 9.75rem
}

.login-container
{
	align-self: end;
}

.login-container-alt
{
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto 120px;
	column-gap: 10px;
	position: relative;
}

.login-container-alt > label
{
	grid-column: 1 / 3;
}

.password-toggle-container
{
	font-size: 0.1rem;
	color: transparent;
	grid-row: 1 / 2;
	width: 30px;
	position: absolute;
	right: 140px;
	top: 30px;
}

.password-toggle-container input 
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark
{
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	width: 40px;
	height: 16px;
	display: block;
	font-size: 0;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHptMCAwaDI0djI0SDB6bTAgMGgyNHYyNEgwem0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIgN2MyLjc2IDAgNSAyLjI0IDUgNSAwIC42NS0uMTMgMS4yNi0uMzYgMS44M2wyLjkyIDIuOTJjMS41MS0xLjI2IDIuNy0yLjg5IDMuNDMtNC43NS0xLjczLTQuMzktNi03LjUtMTEtNy41LTEuNCAwLTIuNzQuMjUtMy45OC43bDIuMTYgMi4xNkMxMC43NCA3LjEzIDExLjM1IDcgMTIgN3pNMiA0LjI3bDIuMjggMi4yOC40Ni40NkMzLjA4IDguMyAxLjc4IDEwLjAyIDEgMTJjMS43MyA0LjM5IDYgNy41IDExIDcuNSAxLjU1IDAgMy4wMy0uMyA0LjM4LS44NGwuNDIuNDJMMTkuNzMgMjIgMjEgMjAuNzMgMy4yNyAzIDIgNC4yN3pNNy41MyA5LjhsMS41NSAxLjU1Yy0uMDUuMjEtLjA4LjQzLS4wOC42NSAwIDEuNjYgMS4zNCAzIDMgMyAuMjIgMCAuNDQtLjAzLjY1LS4wOGwxLjU1IDEuNTVjLS42Ny4zMy0xLjQxLjUzLTIuMi41My0yLjc2IDAtNS0yLjI0LTUtNSAwLS43OS4yLTEuNTMuNTMtMi4yem00LjMxLS43OGwzLjE1IDMuMTUuMDItLjE2YzAtMS42Ni0xLjM0LTMtMy0zbC0uMTcuMDF6Ii8+PC9zdmc+");
}

.password-toggle-container input:checked ~ .checkmark 
{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIgNC41QzcgNC41IDIuNzMgNy42MSAxIDEyYzEuNzMgNC4zOSA2IDcuNSAxMSA3LjVzOS4yNy0zLjExIDExLTcuNWMtMS43My00LjM5LTYtNy41LTExLTcuNXpNMTIgMTdjLTIuNzYgMC01LTIuMjQtNS01czIuMjQtNSA1LTUgNSAyLjI0IDUgNS0yLjI0IDUtNSA1em0wLThjLTEuNjYgMC0zIDEuMzQtMyAzczEuMzQgMyAzIDMgMy0xLjM0IDMtMy0xLjM0LTMtMy0zeiIvPjwvc3ZnPg==");
}

#add-book-grid
{
	display: grid;
	width: 100%;
	max-width: 800px;
	margin: auto;
	padding: 30px;
	box-sizing: border-box;
	grid-template-columns: 198px auto;
	grid-template-rows: 30px 90px 90px 90px auto;
	column-gap: 30px;
}

#cover-label
{
	display: none;
}

#cover-input
{
	grid-column: 1 / 2;
	grid-row: 1 / 5;
	background: var(--grey-10);
	border: 4px dashed var(--grey-30);
	border-radius: 20px;
	box-sizing: border-box;
	color: var(--grey-50);
	text-align: center;
	padding-top: 10px;
}

#cover-input::after
{
	content: "Drag and drop an image of the cover of the book. Images must be 330 x 500 (or multiples of that) to display correctly.";
	line-height: 1.5;
	text-align: center;
	display: block;
	margin: 60px 0 0;
}

#year-label
{
	max-width: 100px;
}

.full-width-input
{
	margin-top: 30px;
	grid-column: 1 / -1;
}

.full-width-input textarea
{
	width: 100%;
}

hr
{
	margin: 120px 0 60px;
	border-color: var(--grey-30);
}

@keyframes pulse
{
	0%
	{
		opacity: 0.15;
	}

	65%
	{
		opacity: 0.2;
	}

	100%
	{
		opacity: 0.15;
	}
}

@keyframes menu-roll-out
{
	0%
	{
		max-height: 0px; 
	}

	100%
	{
		max-height: 16rem;
	}
}

@keyframes popup
{
	0%
	{
		opacity: 0;
		transform: translateY(10px);
	}

	50%
	{
		opacity: 1;
	}

	100%
	{
		transform: translateY(0px);
	}
}

@keyframes popup-hide
{
	0%
	{
		opacity: 1;
		transform: scale(1);
	}

	100%
	{
		opacity: 0;
		transform: scale(0.9);
	}
}

@media screen and (max-width: 1110px)
{
	.book-grid
	{
		grid-template-columns: 330px 445px;
		width: 835px;
	}

	.list-container
	{
		width: 835px;
	}
}

@media screen and (max-width: 955px)
{
	.book-grid
	{
		grid-template-columns: 198px 445px;
		width: 673px;
		grid-column-gap: 30px;
		margin: 60px auto;
	}

	.list-container
	{
		width: 673px;
	}

	.book-content
	{
		margin-top: 0px;
	}

	.cover.large
	{
		width: 198px;
		height: 300px;
	}

	nav
	{
		padding: 30px;
	}
	
	#search-nav-widget
	{
		right: 30px;
	}
	
	#login-widget 
	{
		right: 30px;
	}

	h1
	{
		font-size: 3.2rem;
	}

	h2
	{
		font-size: 2.4rem;
	}

	h2 .profile
	{
		line-height: 3.3rem;
	}
}

@media screen and (max-width: 733px)
{
	.content-buttons
	{
		margin-top: 30px;
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-column-gap: 0px;
		grid-row-gap: 10px;
	}

	.center-container .content-buttons
	{
		width: 100%;
	}

	.book-grid
	{
		grid-template-columns: 165px calc(100% - 195px);
		width: calc(100% - 60px);
		box-sizing: border-box;
		grid-column-gap: 30px;
	}

	.list-container
	{
		width: calc(100% - 60px);
	}

	.list-container.mini
	{
		width: calc(100% - 60px);
	}

	.cover.large
	{
		width: 165px;
		height: 250px;
	}

	.logo-text
	{
		display: none;
	}
	
	#login-widget
	{
		max-width: calc(100% - 30px);
		width: 100%;
	}
}

@media screen and (max-width: 580px)
{
	.book-grid
	{
		grid-template-columns: 100%;
		grid-row-gap: 30px;
	}

	.list-grid
	{
		grid-template-columns: repeat(auto-fill, 132px);
	}
	
	.search-buttons
	{
		grid-template-columns: 30px 30px 30px 30px;
	}

	.search-buttons button
	{
		display: none;
	}

	.search-buttons button.icon, .search-buttons button.icon.little
	{
		display: block;
	}

	.list-container
	{
		width: calc(100% - 30px);
	}

	.list-container.mini
	{
		width: calc(100% - 30px);
	}

	.cover
	{
		width: 132px;
		height: 200px;
	}

	.cover.large
	{
		width: 330px;
		height: 500px;
		-webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%);
		mask-image: -o-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%);
		mask-image: linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%);
		margin: -270px auto 0 auto;
	}

	nav.profile-nav
	{
		padding: 20px 0px 15px; /* renders to optically 30px on top and bottom */
		margin: 0 auto;
		box-sizing: border-box;
		min-width: calc(100% - 60px);
		background: #000;
		border-radius: 4px;
		box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.4), 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.15);
		text-align: left;
		border: none;
	}

	.profile-nav a
	{
		display: block;
		padding: 10px 30px;
	}
	
	#login-widget
	{
		grid-template-columns: 1fr;
		width: calc(100% - 60px);
		padding-bottom: 5px;
	}

	#login-widget input
	{
		box-sizing: border-box;
	}

	#login-widget button:not(.icon)
	{
		width: 100%;
		margin-top: 10px;
	}
}

@media screen and (max-width: 480px)
{
	.mobile-navigation
	{
		display: inline;
	}

	nav > a
	{
		display: none;
	}

	.logo-container
	{
		display: inline;
	}

	.cover
	{
		width: 99px;
		height: 150px;
	}

	.list-grid
	{
		grid-template-columns: repeat(auto-fill, 99px);
	}
}

@media screen and (max-width: 400px)
{
	.cover.large
	{
		width: 198px;
		height: 300px;
		margin-top: -190px;
	}
}