:root {
	--font: ui-rounded, system-ui, helvetica, sans-serif;
	--toolbar: 60px;
	--tabbar: 70px;
	--toolbarSearch: 115px;
	--shadowModal: 0px 10px 40px rgba(0,0,0,0.5);
	--tint: #2B9E93;
	--body: #5F5B38;
	--destructive: #9E2B2B;
	--alert: 239, 134, 50;
	--background: #F7F6F2;
	--backgroundLift: #FEFDF8;
	--backgroundInput: rgba(95,91,56,0.05);
	--tintHover: rgba(43,158,147,0.1);
	--tintHoverFull: #31C2B5;
	--destructiveHoverFull: #F55A5A;
	--bodyHover: rgba(95,91,56,0.1);
	--bodyDisabled: rgba(95,91,56,0.5);
	--border: rgba(95,91,56,0.2);
	--borderCritter: rgba(95,91,56,0.2);
	--dots: url(images/ui/dots-light.svg);
	--chevronRight: url(images/ui/chevron-right-light.svg);
	--tick: url(images/ui/tick-light.svg);
	--tick-alt: url(images/ui/tick-light-alt.svg);
	--selectionRing: 0px 0px 0px 4px var(--backgroundLift), 0px 0px 0px 6px var(--tint);
	--golden: #A67A06;
	--golden-background: 166, 122, 6;
	--segment: white;
	--segment-background: rgba(0,0,0,0.05);
	--segment-hover: rgba(0,0,0,0.05);
}

@media (prefers-color-scheme: dark) {
	:root {
		--tint: #81E4DB;
		--body: #E6E5DA;
		--destructive: #F65252;
		--alert: 253, 159, 83;
		--background: #252521;
		--backgroundLift: #373632;
		--backgroundInput: rgba(230,229,218,0.05);
		--tintHover: rgba(129,228,219,0.2);
		--tintHoverFull: #BAF9F3;
		--destructiveHoverFull: #FF8585;
		--bodyHover: rgba(230,229,218,0.2);
		--bodyDisabled: rgba(230,229,218,0.5);
		--border: #252521;
		--borderCritter: black;
		--dots: url(images/ui/dots-dark.svg);
		--chevronRight: url(images/ui/chevron-right-dark.svg);
		--tick: url(images/ui/tick-dark.svg);
		--tick-alt: url(images/ui/tick-dark-alt.svg);
		--selectionRing: 0px 0px 0px 4px var(--backgroundLift), 0px 0px 0px 6px var(--tint);
		--golden: #F8DC92;
		--golden-background: 248, 220, 146;
		--segment: #5b5955;
		--segment-background: rgba(255,255,255,0.05);
		--segment-hover: rgba(255,255,255,0.05);
	}
}

.light-theme {
	--tint: #2B9E93;
	--body: #5F5B38;
	--destructive: #9E2B2B;
	--alert: 239, 134, 50;
	--background: #F7F6F2;
	--backgroundLift: #FEFDF8;
	--backgroundInput: rgba(95,91,56,0.05);
	--tintHover: rgba(43,158,147,0.1);
	--tintHoverFull: #31C2B5;
	--destructiveHoverFull: #F55A5A;
	--bodyHover: rgba(95,91,56,0.1);
	--bodyDisabled: rgba(95,91,56,0.5);
	--border: rgba(95,91,56,0.2);
	--borderCritter: rgba(95,91,56,0.2);
	--dots: url(images/ui/dots-light.svg);
	--chevronRight: url(images/ui/chevron-right-light.svg);
	--tick: url(images/ui/tick-light.svg);
	--tick-alt: url(images/ui/tick-light-alt.svg);
	--selectionRing: 0px 0px 0px 4px var(--backgroundLift), 0px 0px 0px 6px var(--tint);
	--golden: #A67A06;
	--golden-background: 166, 122, 6;
	--segment: white;
	--segment-background: rgba(0,0,0,0.05);
	--segment-hover: rgba(0,0,0,0.05);
}

.dark-theme {
	--tint: #81E4DB;
	--body: #E6E5DA;
	--destructive: #F65252;
	--alert: 253, 159, 83;
	--background: #252521;
	--backgroundLift: #373632;
	--backgroundInput: rgba(230,229,218,0.05);
	--tintHover: rgba(129,228,219,0.1);
	--tintHoverFull: #BAF9F3;
	--destructiveHoverFull: #FF8585;
	--bodyHover: rgba(230,229,218,0.2);
	--bodyDisabled: rgba(230,229,218,0.5);
	--border: #252521;
	--borderCritter: black;
	--dots: url(images/ui/dots-dark.svg);
	--chevronRight: url(images/ui/chevron-right-dark.svg);
	--tick: url(images/ui/tick-dark.svg);
	--tick-alt: url(images/ui/tick-dark-alt.svg);
	--selectionRing: 0px 0px 0px 4px var(--backgroundLift), 0px 0px 0px 6px var(--tint);
	--golden: #F8DC92;
	--golden-background: 248, 220, 146;
	--segment: #5b5955;
	--segment-background: rgba(255,255,255,0.05);
	--segment-hover: rgba(255,255,255,0.05);
}

* {
	box-sizing: border-box;
}

.hidden {
	display: none !important;
}

html {
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
	height: calc(100% + env(safe-area-inset-top));
	overflow: hidden;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

body {
	margin: 0px;
	padding: 0px;
	background: black;
	overflow: hidden;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	position: fixed;
	width: 100%;
	height: 100%;
}

/* Components */
#backing {
	display: none;
}

button {
	background-color: var(--tint);
	border-radius: 5px;
	border: none;
	color: var(--background);
	font-size: 16px;
	font-family: var(--font);
	margin: 0px;
	padding: 10px;
}

button:focus {
	outline:0;
}

button:hover {
	cursor: pointer;
	background: var(--tintHoverFull);
}

button g {
	fill: var(--tint);
}

button:hover g {
	fill: var(--tintHoverFull);
}

.buttonNoBackground {
	background: none;
	color: var(--tint);
}

.buttonNoBackground:hover {
	background: var(--tintHover);
}

.buttonNoBackground path {
	fill: var(--tint);
}

.buttonContext {
	transform: translateX(10px);
}

.menu {
	position: absolute;
	top: 40px;
	right: 10px;
	background: white !important;
	z-index: 2;
	overflow: hidden;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.1) !important;
	min-width: 180px;
	border: none;
	max-height: 0px;
	opacity: 0;
	transition: 0.3s max-height ease, 0.3s top ease, 0.3s opacity ease;
}

.menu.expanded {
	max-height: 500px !important;
	top: 60px;
	opacity: 1;
	transition: 0.5s max-height ease, 0.5s top ease, 0.5s opacity ease;
}

.menu li {
	font-family: var(--font);
	color: var(--body);
	padding: 12px 20px 12px 40px !important;
	background-image: none !important;
}

.menu li.picked {
	background-image: var(--tick-alt) !important;
	background-position: 15px center;
}

@media (prefers-color-scheme: dark) {
	.menu {
		background: var(--backgroundLift) !important;
		box-shadow: 0px 5px 30px rgba(0,0,0,0.4) !important;
	}
	
	.menu li {
		border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	}
}

.light-theme .menu {
	background: white !important;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.1) !important;
}

.light-theme .menu li {
	border-bottom: 1px solid var(--border) !important;
}

.dark-theme .menu {
	background: var(--backgroundLift) !important;
	box-shadow: 0px 5px 30px rgba(0,0,0,0.4) !important;
}

.dark-theme .menu li {
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.menu li:last-child {
	border-bottom: none !important;
}

h2 {
	font-family: var(--font);
	color: var(--body);
}

p {
	font-family: var(--font);
	color: var(--body);
}

h4 {
	width: 100%;
	font-family: var(--font);
	color: var(--background);
	background: var(--alert);
	z-index: 20;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: center;
	margin: 0px;
	padding: 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

h5 {
	font-family: var(--font);
	color: var(--body);
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 14px;
}

.containerSticker {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0px 20px;
}

.sticker {
	color: #5F5B38;
	background: white;
	border-radius: 5px;
	transform: rotate(-1deg);
	box-shadow: 0px 4px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgba(95,91,56,0.3);
	padding: 10px 20px;
	display: inline-block;
	margin-top: -30px;
	font-size: 20px;
	border: 3px solid white;
	text-align: center;
}

.legal {
	font-family: var(--font);
	font-size: 12px;
	text-align: center;
	opacity: 0.5;
	color: var(--body);
}

#containerSettings .legal {
	opacity: 1;
	font-size: 14px;
}

.legal a {
	text-decoration: none;
	color: var(--tint);
}

.legal a:hover {
	color: var(--tintHoverFull);
}

.controlSegmented {
	width: 100%;
	border-radius: 10px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	grid-gap: 5px;
	overflow: hidden;
	margin-bottom: 10px;
	padding: 2px;
	background: var(--segment-background);
}

.controlSegmented button {
	margin: 0px;
	border-radius: 8px;
	background: none;
	color: var(--body);
	font-weight: 600;
}

.controlSegmented svg {
	pointer-events: none;
}

.controlSegmented path {
	fill: var(--body);
}

.controlSegmented button:hover {
	background: var(--segment-hover);
}

.controlSegmented button.selected {
	background: var(--segment);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
}

.controlSegmented button.selected:hover {
	pointer-events: none;
}

iframe {
	border: none;
	width: 100%;
	height: 100%;
	top: 0px;
	position: absolute;
	z-index: 2;
}

main {
	background: var(--background);
	position: absolute;
	left: 0px;
	width: 100%;
	z-index: 2;
	font-family: var(--font);
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
	height: calc(100% - 15px);
	height: calc(100% - 15px - env(safe-area-inset-bottom));
	transform: translateY(100vh);
	transition: 0.5s transform ease;
	opacity: 1 !important;
}

.shiftMain {
	transform: translateY(15px);
	transform: translateY(calc(15px + env(safe-area-inset-top)));
	transition: 0.5s transform ease;
	opacity: 1 !important;
}

.toolbar {
	box-shadow: 0px 0px 0px 1px var(--borderCritter);
	width: 100%;
	height: var(--toolbar);
	place-items: center right;
	display: grid;
	padding-right: 20px;
	background: var(--backgroundLift);
	position: fixed;
	z-index: 2;
	border-radius: 10px 10px 0px 0px;
}

#buttonDismissMainView {
	float: right;
	font-size: 16px;
}

.containerInset {
	padding-left: 20px;
	padding-right: 20px;
}

/* First Run Modal */
#modalFirstRun {
	background: var(--background);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

@media (orientation: landscape) {
	#modalFirstRun {
		display: block;
	}
}

#modalFirstRun #logo {
	display: block;
	margin: 0px auto;
}

#modalFirstRun h1 {
	font-family: var(--font);
	text-align: center;
	color: var(--body);
	margin: 0px;
}

#modalFirstRun p {
	font-family: var(--font);
	text-align: center;
	color: var(--body);
	margin: 0px;
}

#containerSelectHemisphere {
	margin: 40px 0px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	grid-gap: 10px;
	/* height: 250px; */
}

#containerSelectHemisphere button {
	color: var(--body);
	border: 2px solid var(--bodyHover);
	position: relative;
	background-color: var(--background) !important;
}

#containerSelectHemisphere button span {
	top: 104%;
	position: absolute;
	left: 0px;
	width: 100%;
	font-weight: 600;
}

#containerSelectHemisphere button img {
	max-width: 70%;
	pointer-events: none;
}

#containerSelectHemisphere button picture {
	pointer-events: none;
}

#containerSelectHemisphere button.selected span {
	color: var(--tint);
}

#containerSelectHemisphere button:hover {
	border: 2px solid var(--body);
}

#containerSelectHemisphere button.selected {
	border: 2px solid var(--tint);
}

#buttonInitialSetHemisphere {
	width: 100%;
	height: 40px;
	background: var(--bodyHover);
	color: var(--bodyDisabled);
	pointer-events: none;
	margin-top: 20px;
}

#buttonInitialSetHemisphere.active {
	color: var(--background);
	background: var(--tint);
	pointer-events: all;
}

/* Install Modal */
#containerInstall {
	position: absolute;
	bottom: 70px;
	width: 100%;
	padding: 20px;
	z-index: 2;
}

#modalInstall {
	background: var(--backgroundLift);
	border-radius: 10px;
	padding: 10px 0px 4px 0px;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px var(--borderCritter), inset 0px 0px 0px 1px rgba(255,255,255,0.1);
	position: relative;
}

#modalInstall h1 {
	text-align: center;
	font-family: var(--font);
	font-size: 16px;
	color: var(--body);
}

#modalInstall p {
	text-align: center;
	font-family: var(--font);
	color: var(--body);
}

#modalInstall p span[data-localize="install.addto"] {
	color: #2987ED;
}

#modalInstall p img {
	transform: translateY(-6px);
}

#buttonDismissModalInstall {
	position: absolute;
	right: 0px;
	top: 0px;
	background: none;
}

@supports not (-webkit-touch-callout: inherit) {
	#containerInstall {
		display: none !important;
	}
}

@media (display-mode: standalone) {
	#containerInstall {
		display: none !important;
	}
}

/* Update Modal */
#containerUpdate {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	display: grid;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.7);
	padding: 20px;
}

#modalUpdate {
	background: var(--background);
	border-radius: 10px;
	width: 100%;
	max-width: 400px;
	box-shadow: var(--shadowModal);
	overflow: hidden;
}

#modalUpdate header {
	height: var(--toolbar) !important;
	padding-top: 10px !important;
}

#modalUpdate div {
	padding: 10px 20px 20px 20px;
}

#modalUpdate h1 {
	font-family: var(--font);
	margin: 0px;
	color: var(--body);
}

#modalUpdate ul {
	padding: 0px;
	margin: 0px;
	margin-left: 20px;
}

#modalUpdate li {
	font-family: var(--font);
	margin-top: 10px;
	color: var(--body);
}

#modalUpdate button {
	width: 100%;
	height: 40px;
	margin-top: 20px;
}

#modalUpdate a {
	color: var(--tint);
	text-decoration: none;
}

#modalUpdate a:hover {
	color: var(--tintHoverFull);
}

/* Shortcuts Panel */
#containerShortcuts {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	display: grid;
	justify-content: center;
	align-items: center;
	padding: 20px;
	pointer-events: none;
}

#modalShortcuts {
	background: rgba(237,237,239,1);
	border-radius: 20px;
	width: 90vw;
	max-height: 95vh;
	box-shadow: 0px 10px 40px rgba(0,0,0,0.1);
	overflow: auto;
	padding: 20px;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	pointer-events: all;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#modalShortcuts {
		background: rgba(237,237,239,0.5);
	}
}

#modalShortcuts ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#modalShortcuts li {
	font-family: var(--font);
	color: black;
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin-bottom: 20px;
}

#modalShortcuts li:last-child {
	margin-bottom: 0px;
}

/* Header */
header {
	box-shadow: 0px 0px 0px 1px var(--borderCritter);
	padding: 10px 20px;
	background: var(--backgroundLift);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--toolbar);
	height: calc(var(--toolbar) + env(safe-area-inset-top));
	padding-top: calc(10px + env(safe-area-inset-top));
	position: relative;
	z-index: 2;
}

#containerAsideCritters header {
	height: var(--toolbarSearch);
	height: calc(var(--toolbarSearch) + env(safe-area-inset-top));
}

#containerSettings header {
	height: var(--toolbar);
	padding: 10px 20px;
}

#skeletonHeader {
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: -1;
}

header h1 {
	text-align: center;
	font-family: var(--font);
	margin: 0px;
	padding: 0px;
	color: var(--body);
	font-size: 22px;
	font-weight: 600;
}

#buttonViewAll {
	position: absolute;
	left: 20px;
	top: 12px;
	top: calc(10px + env(safe-area-inset-top));
	pointer-events: none;
	opacity: 0.2;
}

#buttonViewAll.active {
	pointer-events: all;
	opacity: 1;
}

#backing-circle {
	fill: none;
	stroke: var(--body)
}

.active #backing-circle {
	fill: var(--tint);
	stroke: var(--tint);
}

#font-lines {
	fill: var(--body)
}

.active #font-lines {
	fill: var(--backgroundLift);
}

#buttonRefreshFilter {
	position: absolute;
	right: 20px;
	top: 12px;
	top: calc(10px + env(safe-area-inset-top));
}

/* Search */
.containerSearch {
	position: relative;
	width: 100%;
}

.buttonClearSearch {
	position: absolute;
	top: 4px;
	right: 0px;
	background: none
}

.buttonClearSearch:hover {
	background: none;
}

input, textarea {
	width: 100%;
	font-size: 16px;
	padding: 10px;
	border-radius: 5px;
	border: none;
	background: var(--backgroundInput);
	font-family: var(--font);
	outline: none;
	color: var(--body);
}

input::placeholder, textarea::placeholder {
	opacity: 0.5;
	color: var(--body);
}

input:hover {
	cursor: pointer;
	background: var(--bodyHover);
}

input:focus {
	background: var(--bodyHover);
}

input:hover:focus {
	cursor: text;
}

/* Filters */
#displayFilters {
	font-size: 20px;
	margin: 0px;
	margin-bottom: 10px;
	background: none;
	color: var(--body);
	padding: 10px;
	font-size: 22px;
	font-weight: 600;
}

#displayFilters:hover {
	background: var(--bodyHover);
}

#displayFilters svg {
	transform: translateX(5px) translateY(-1px);
	display: inline-block;
	margin-right: 10px;
}

#displayFilters path {
	fill: var(--body);
}

#filters {
	background-color: var(--background);
	z-index: -1;
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 0px 0px;
	height: calc(100% - 15px);
	height: calc(100% - 15px - env(safe-area-inset-top));
	transform: translateY(100vh);
	transition: 0.5s transform ease;
	opacity: 0;
	overflow: hidden;
}

.shiftFilters {
	transform: translateY(15px) !important;
	transform: translateY(calc(15px + env(safe-area-inset-top))) !important;
	transition: 0.5s transform ease !important;
}

.shiftOpacity {
	opacity: 1 !important;
}

.shiftIndex {
	z-index: 2 !important;
}

#containerFilters {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: calc(100% - var(--toolbar) - 80px);
	height: calc(100% - var(--toolbar) - 80px - env(safe-area-inset-bottom));
}

#filters header {
	border-radius: 10px 10px 0px 0px;
	padding-top: 10px !important;
	height: var(--toolbar) !important;
}

#filters header button {
	font-size: 16px;
	font-weight: 400;
}

#buttonDismissFilters, #buttonDismissMainView {
	position: absolute;
	right: 10px;
}

#containerButtonApplyFilters {
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--borderCritter);
	padding: 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	position: absolute;
	bottom: 0px;
	width: 100%;
}

#filters .filterGroup {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	padding: 0px 20px 30px 20px;
}

#filterGroupMonths {
	grid-template-columns: repeat(4, 1fr) !important;
	display: grid;
	width: 100%;
	grid-gap: 10px;
	margin-bottom: 40px;
}

#filterGroupMonths button {
	font-size: 13px;
}

#filters h5 {
	padding: 0px 0px 5px 20px;
}

.filter, .monthFilter {
	color: var(--body);
	border-radius: 5px;
	font-size: 14px;
	background-color: var(--bodyHover);
	font-weight: 600;
}

.filter:hover, .monthFilter:hover {
	background: var(--bodyDisabled);
}

.filter.selected, .monthFilter.selected {
	background: var(--body) !important;
	color: var(--background) !important;
	border-radius: 5px;
	border: none;
	pointer-events: none;
}

.monthFilter.golden {
	color: var(--golden) !important;
	background: rgba(var(--golden-background), 0.2) !important;
}

.monthFilter.golden.selected {
	color: var(--background) !important;
	background: var(--golden) !important;
}

#applyFilters {
	width: 100%;
	height: 40px;
}

/* Tab Bar */
footer {
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--borderCritter);
	width: 100%;
	height: var(--tabbar);
	height: calc(var(--tabbar) + env(safe-area-inset-bottom));
	position: absolute;
	bottom: 0px;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	grid-gap: 5px;
	padding: 5px;
	padding-bottom: calc(5px + env(safe-area-inset-bottom));
	z-index: 2;
}

.tab {
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--chrome);
	color: var(--body);
	padding: 0px;
}

.tab:hover {
	background: var(--bodyHover);
}

.tab.selected {
	pointer-events: none;
	opacity: 1;
}

.tab.selected:hover {
	background: var(--chrome);
}

.tab svg {
	pointer-events: none;
}

.tab path {
	fill: var(--body);
}

.tab span {
	font-family: var(--font);
	font-size: 12px;
	margin-top: 5px;
	pointer-events: none;
}

.tab.selected span {
	color: var(--tint);
}

.tab.selected path {
	fill: var(--tint);
}

/* Sidebar */
aside {
	background-color: var(--background);
	position: relative;
	height: 100%;
	z-index: 1;
	transition: 0.5s transform ease, 0.5s opacity ease, 0.5s border-radius ease;
	overflow: hidden;
	transform-origin: top center;
}

.shiftAside {
	border-radius: 15px;
	transform: scale(0.95) translateY(10px);
	transform: scale(0.95) translateY(calc(10px + env(safe-area-inset-top)));
	opacity: 0.5;
	transform-origin: top center;
	transition: 0.5s transform ease, 0.5s opacity ease, 0.5s border-radius ease;
}

.containerAside {
	width: 100%;
	height: calc(100% -  var(--tabbar));
	overflow: hidden;
	position: relative;
}

/* Critter List */
#listCritters {
	position: fixed;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: calc(100% - var(--toolbarSearch) - var(--tabbar));
	height: calc(100% - var(--toolbarSearch) - var(--tabbar) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.activeButton #listCritters {
	padding-bottom: 80px;
}

.containerCritters {
	margin: 0px;
	padding: 0px;
	z-index: 1;
	width: 100%;
	position: relative;
}

.messageNoCurrentCritters {
	font-family: var(--font);
	color: var(--body);
	font-weight: 600;
	text-align: center;
	opacity: 0.5;
	padding: 20px 40px;
}

.critter {
	color: var(--body);
	font-family: var(--font);
	list-style: none;
	padding: 15px 50px 15px 20px !important;
	border-bottom: 1px solid var(--borderCritter);
	display: flex;
	align-items: center;
	line-height: 15px;
	background-position: center right;
	background-repeat: no-repeat;
	position: relative;
}

.critter:hover {
	background-color: var(--bodyHover);
}

.critter.selected {
	color: var(--tint);
	background-color: var(--tintHover);
	pointer-events: none;
}

.critter.selected p {
	color: var(--tint);
}

.activeIsland .critter.selected {
	color: var(--body);
	background: none;
}

.activeIsland .critter.selected p {
	color: var(--body);
}

.hitbox {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: calc(100% - 60px);
	z-index: 2;
}

.hitbox:hover {
	cursor: pointer;
}

.critter div {
	max-width: 100%;
}

.critter .thumbnail {
	width: 50px;
	min-width: 50px;
	height: 50px;
	margin-right: 20px;
}

.critter h3 {
	margin: 0px;
	line-height: 20px;
	text-transform: capitalize;
	font-size: 16px;
	font-weight: 700;
}

.critter p {
	font-size: 12px;
	padding: 0px;
	padding-top: 2px;
	margin: 0px;
	margin-top: 3px;
	line-height: 15px;
	opacity: 0.8;
}

.badgeBoost {
	color: rgb(var(--alert));
	margin-top: 10px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--font);
}

.status {
	position: absolute;
	right: 20px;
	padding: 0px;
	background: none;
	border-radius: 0px;
	pointer-events: all;
}

.status:hover {
	background: none;
}

.status circle {
	stroke: var(--tint);
	fill: none;
}

.status path {
	fill: none;
}

.status:hover circle {
	stroke: var(--tintHoverFull);
}

.donated circle {
	fill: var(--tint) !important;
}

.donated path {
	fill: var(--background);
}

.donated:hover circle {
	fill: var(--tintHoverFull) !important;
}

.donated:hover path {
	fill: var(--background);
}

#messageNoCritters {
	height: 100%;
	display: grid;
	place-items: center;
}

#messageNoCritters p {
	font-family: var(--font);
	color: var(--body);
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

#containerMessageCongrats {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#messageCongrats {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px;
}

#messageCongrats path {
	fill: var(--golden);
}

#messageCongrats h3 {
	font-family: var(--font);
	color: var(--golden);
	font-size: 32px;
	padding: 0px;
	margin-bottom: 10px;
	margin-top: 30px;
}

#messageCongrats p {
	color: var(--golden);
	opacity: 0.6;
	padding: 0px;
	margin: 0px;
	font-size: 18px;
}

#containerResetFilter {
	position: absolute;
	bottom: 0px;
	bottom: calc(0px + env(safe-area-inset-bottom));
	width: 100%;
	padding: 20px;
	z-index: 2;
	display: flex;
	justify-content: center;
}

#containerResetFilter button {
	width: 150px;
}

/* Critter detail view */
#containerCritter, #containerIsland {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--background);
	background-image: var(--dots);
	padding-bottom: env(safe-area-inset-bottom);
}

#containerIsland {
	transition: 0.4s transform ease;
}

#containerCritter {
	transition: 0.4s transform ease, 0.4s box-shadow ease;
}

.activeIsland #containerCritter {
	transform: translateX(100%);
}

.shiftIsland #containerIsland {
	transform: translateX(-60%);
	transition: 1s transform ease;
}

.shiftIsland #containerCritter {
	transform: none;
	transition: 0.4s transform ease;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

#imageCritter {
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--borderCritter);
	padding: 60px 20px;
}

#cross {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 2;
	-webkit-transform: translate3d(0,0,0);
}

#cross:hover {
	cursor: pointer;
}

#cross g {
	fill: var(--body);
}

.activeIsland #cross g {
	fill: white;
}

.shiftIsland #cross g {
	fill: var(--body);
}

#cross.fold g {
	fill: var(--body);
}

#buttonBack {
	position: fixed;
	top: 10px;
	left: 10px;
	display: none;
	z-index: 2;
}

.shiftIsland #buttonBack {
	display: block;
}

#buttonBack:hover {
	cursor: pointer;
}

#buttonBack g {
	fill: var(--body);
}

#imageCritter #imageAppend {
	max-width: 100%;
	max-height: 100%;
}

#containerCritter h1 {
	text-transform: capitalize;
	text-align: center;
}

#containerCritter ul {
	background: var(--backgroundLift);
	border-radius: 10px;
	overflow: hidden;
	padding: 0px;
	margin-bottom: 40px;
	box-shadow: 0px 0px 0px 1px var(--border);
}

#containerCritter li {
	list-style: none;
	padding: 20px;
	color: var(--body);
}

.availableNow {
	color: rgb(var(--alert));
}

#critterDetails li {
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-direction: column;
}

#critterDetails li:last-child {
	border-bottom: none;
}

#critterDetails li div {
	display: grid;
}

#critterDetails li img {
	width: 30px;
}

#critterDetails .title {
	font-size: 12px;
}

#critterDetails .value {
	font-size: 16px;
	font-weight: 600;
}

#prices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#prices li {
	text-align: center;
	display: grid;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	justify-content: center;
	align-items: center;
}

#prices li:nth-child(2n) {
	border-right: none;
}

#prices li:nth-child(3n) {
	border-bottom: none;
}

#prices .title {
	font-size: 12px;
}

#prices .value {
	font-size: 16px;
	font-weight: 800;
}

#activeTimes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#activeTimes li {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	font-size: 14px;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	height: 100px;
	position: relative;
}

#activeTimes li:nth-child(2n) {
	border-right: none;
}

#activeTimes li:nth-last-child(-n + 2):nth-child(2n + 1),
#activeTimes li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li {
	border-bottom: none;
}

#activeTimes li span {
	margin-bottom: 3px;
}

#activeTimes li span:last-child {
	margin-bottom: 0px;
	width: 100%;
}

#activeTimes .title {
	text-transform: uppercase;
	font-size: 12px;
	width: 100%;
}

#activeTimes .value {
	font-size: 12px;
	font-weight: 800;
}

#activeTimes div {
	background: rgba(var(--alert), 0.2);
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border-radius: 8px;
	position: absolute;
	top: 10px;
	left: 10px;
}

.unavailable div {
	display: none;
}

/* Islands List */
#listIslands {
	position: fixed;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: calc(100% - var(--toolbar) - var(--tabbar));
	height: calc(100% - var(--toolbar) - var(--tabbar) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#listIslands li {
	width: 100%;
	border-bottom: 1px solid var(--borderCritter);
	list-style: none;
	font-family: var(--font);
	position: relative;
	overflow: hidden;
	color: var(--body);
	display: grid;
	grid-template-columns: 50px 1fr;
	grid-gap: 10px;
	justify-content: center;
	align-items: center;
	padding: 15px 20px;
	background-image: var(--chevronRight);
	background-repeat: no-repeat;
	background-position: center right;
}

#listIslands li:last-child {
	margin: 0px;
}

#listIslands li:hover {
	cursor: pointer;
	background-color: var(--bodyHover);
}

#listIslands li.selected {
	color: var(--tint) !important;
	background: var(--tintHover);
	pointer-events: none;
}

#listIslands li.selected:hover {
	background: var(--tintHover);
}

#listIslands h3 {
	margin: 0px;
	margin-bottom: 5px;
	font-size: 16px;
}

#listIslands p {
	margin: 0px;
	font-size: 12px;
}

#listIslands li.selected p {
	color: var(--tint);
}

#listIslands .legal {
	padding: 20px;
}

#description {
	color: var(--body);
	text-align: center;
	margin: 0px;
	margin-bottom: 40px;
	font-size: 16px;
	font-family: var(--font);
}

#listIslands .map {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	overflow: hidden;
}

#_01.map {
	background: url(images/maps/01.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_02.map {
	background: url(images/maps/02.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_03.map {
	background: url(images/maps/03.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_04.map {
	background: url(images/maps/04.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_05.map {
	background: url(images/maps/05.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_06.map {
	background: url(images/maps/06.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_07.map {
	background: url(images/maps/07.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_08.map {
	background: url(images/maps/08.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_09.map {
	background: url(images/maps/09.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_10.map {
	background: url(images/maps/10.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_11.map {
	background: url(images/maps/11.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_12.map {
	background: url(images/maps/12.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_13.map {
	background: url(images/maps/13.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_14.map {
	background: url(images/maps/14.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_15.map {
	background: url(images/maps/15.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_16.map {
	background: url(images/maps/16.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_17.map {
	background: url(images/maps/17.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_18.map {
	background: url(images/maps/18.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_19.map {
	background: url(images/maps/19.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

#_20.map {
	background: url(images/maps/20.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

/* Island Detail View */

#containerIslandImage {
	width: 100%;
	height: 300px;
	background-color: var(--backgroundLift);
}

#containerIslandImage.large01 {
	background-image: url(images/islands/01.png);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large02 {
	background-image: url(images/islands/02.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large03 {
	background-image: url(images/islands/03.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large04 {
	background-image: url(images/islands/04.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large05 {
	background-image: url(images/islands/05.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large06 {
	background-image: url(images/islands/06.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large07 {
	background-image: url(images/islands/07.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large08 {
	background-image: url(images/islands/08.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large09 {
	background-image: url(images/islands/09.png);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large10 {
	background-image: url(images/islands/10.png);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large11 {
	background-image: url(images/islands/11.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large12 {
	background-image: url(images/islands/12.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large13 {
	background-image: url(images/islands/13.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large14 {
	background-image: url(images/islands/14.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large15 {
	background-image: url(images/islands/15.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large16 {
	background-image: url(images/islands/16.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large17 {
	background-image: url(images/islands/17.jpg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large18 {
	background-image: url(images/islands/18.jpeg);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large19 {
	background-image: url(images/islands/19.png);
	background-size: cover;
	background-position: center center;
}

#containerIslandImage.large20 {
	background-image: url(images/islands/20.jpg);
	background-size: cover;
	background-position: center center;
}

.containerResources, .containerOverview  {
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--border);
	border-radius: 10px;
	overflow: hidden;
	padding: 0px;
	margin-bottom: 40px;
}

.containerOverview, .containerItems {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#containerIsland .containerCritters {
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--border);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 40px;
}

#containerIsland .containerCritters li:last-child {
	border: none;
}

.containerOverview li {
	color: var(--body);
	padding: 20px;
}

.containerOverview li:first-child {
	border-right: 1px solid var(--border);
}

.containerItems li {
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
	padding: 20px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: var(--body);
	font-weight: 600;
	text-align: center;
}

.containerItems li:nth-child(2n) {
	border-right: none;
}

.containerItems li:nth-last-child(-n + 2):nth-child(2n + 1),
.containerItems li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li {
	border-bottom: none;
}

.containerItems li img {
	width: 30px;
	margin-right: 5px;
}

.containerItems .title {
	font-size: 12px;
}

.containerItems .value {
	font-size: 16px;
	font-weight: 600;
}

.overview {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.overview .title {
	font-size: 12px;
}

.overview .value {
	font-size: 16px;
	font-weight: 800;
}

/* TableView */
.tableview {
	padding: 20px;
	width: 100%;
	height: calc(100% - var(--toolbar));
	height: calc(100% - var(--toolbar) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	position: absolute;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#containerSettings .tableview {
	height: calc(100% - var(--toolbar));
	background: var(--background);
	top: var(--toolbar);
	position: absolute;
}

.tableview .containerCritters {
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 40px;
}

.tableview section + .legal {
	margin-bottom: 40px;
}

.tableview ul, .tableview section {
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--border);
	border-radius: 10px;
	margin: 0px;
	margin-bottom: 40px;
	padding: 0px;
}

.last {
	margin-bottom: 0px !important;
}

.tableview li {
	list-style: none;
	border-bottom: 1px solid var(--border);
	padding: 20px;
	display: flex;
	align-items: center;
	color: var(--body);
	background-image: var(--chevronRight);
	background-repeat: no-repeat;
	background-position: right center;
	transition: none;
}

.tableview li:first-child {
	border-radius: 10px 10px 0px 0px;
}

.tableview li:last-child {
	border-radius: 0px 0px 10px 10px;
}

.tableview .containerCritters li {
	background-image: none;
}

.tableview .containerCritters li:last-child {
	border: none;
}

.tableview .containerCritters .selected:hover {
	background-color: var(--tintHover)
}

.tableview li:last-child {
	border: none;
}

.tableview li:hover {
	background-color: var(--bodyHover);
	cursor: pointer;
	transition: none;
}

#appearance, #language {
	background: none;
	cursor: default !important;
	height: 71px;
}

.tableview .link svg {
	margin-right: 10px;
	min-width: 30px;
}

.tableview .link svg path {
	fill: var(--tint);
}

.tableview li:not(.critter) img {
	width: 30px;
	margin-right: 10px;
}

.tableview .avatar img {
	border-radius: 50%;
}

.tableview li span {
	font-family: var(--font);
}

.tableview .selected {
	background-color: var(--tintHover);
	color: var(--tint);
	pointer-events: none;
}

.tableview .selected:hover {
	cursor: pointer;
	background-color: var(--tintHover);
}

.tableview .link.selected svg path {
	fill: var(--tint);
}

#containerSettings .tableview li {
	background-image: none;
}

.tableview .active {
	color: var(--tint);
	pointer-events: none;
	background-image: var(--tick) !important;
}

.tableview li.active:hover {
	background-color: var(--backgroundLift);
	pointer-events: none;
	cursor: pointer;
}

#containerToast {
	margin: 40px 0px 20px 0px;
	width: 100%;
	display: flex;
	justify-content: center;
}

#containerToast svg {
	opacity: 0.5;
	background: none !important;
}

#containerToast svg:hover {
	opacity: 1;
	cursor: pointer;
}

#containerToast g {
	fill: var(--body);
}

#buttonResetDonationStatus {
	width: 100%;
	background: var(--destructive);
	height: 60px;
}

#buttonResetDonationStatus:hover {
	background: var(--destructiveHoverFull);
}

#containerCheck {
	display: flex;
	justify-content: center;
}

/* Theme Selector */
#themeselector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 20px !important;
	margin-bottom: 0px !important;
	border-radius: 0px !important;
}

#themeselector div {
	text-align: center;
}

#themeselector div:hover {
	cursor: pointer;
}

#themeselector div:hover .themeicon {
	transform: scale(1.2);
	transition: 0.3s transform ease;
	box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
}

#themeselector .selected {
	background: none;
}

#themeselector .selected:hover {
	pointer-events: none;
}

#themeselector .selected:hover .themeicon {
	transform: none;
}

#themeselector p {
	font-family: var(--font);
	color: var(--body);
	margin: 0px;
	font-size: 16px;
}

#themeselector .selected p {
	color: var(--tint);
}

.themebutton  div, .themebutton p {
	pointer-events: none;
}

.themeicon {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	display: inline-block;
	margin-bottom: 10px;
	transition: 0.3s transform ease;
}

#ring {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
}

/* Stats */
#stats {
	margin-bottom: 0px !important;
	background: var(--backgroundLift);
	box-shadow: 0px 0px 0px 1px var(--border);
	border-radius: 10px;
	margin-bottom: 40px !important;
}

#stats .statType {
	border-bottom: 1px solid var(--border);
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#stats .statType:last-child {
	border: none;
}

.statType div {
	display: flex;
}

.statType path {
	fill: var(--body);
}

#stats .value {
	text-align: center;
	font-family: var(--font);
	color: var(--body);
	margin: 0px;
	display: flex;
	align-items: center;
}

#stats .number {
	font-size: 20px;
	font-weight: 800;
}

#stats .total {
	font-size: 20px;
	font-weight: 600;
	opacity: 0.5;
}

#stats .label {
	text-align: center;
	font-family: var(--font);
	color: var(--body);
	font-size: 16px;
	margin: 0px;
	margin-left: 10px;
	align-self: center;
}

.golden p {
	color: var(--golden) !important;
}

.golden path {
	fill: var(--golden);
}

/* Sync */
.containerSync {
	padding: 20px !important;
}

.containerSync button {
	width: 100%;
}

#containerCodeExport {
	display: flex;
	flex-direction: column-reverse;
}

#codeExport {
	margin-top: 0px;
	word-break: break-all;
	font-family: ui-monospace, monospace;
	font-size: 16px;
	padding-bottom: 0px;
}

#containerButtonsExport {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	grid-gap: 10px;
	margin-bottom: 20px;
}

#codeImport {
	width: 100%;
	height: 100px;
	margin-bottom: 20px;
}

.messageStatusUpdate {
	text-align: center;
	color: rgb(var(--alert));
}

@media (prefers-color-scheme: dark) {
	#ring {
		box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 0px 0px 1px rgba(0,0,0,0.6);
	}
	
	.light-theme #ring {
		box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2);
	}
}

.dark-theme #ring {
	box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.2), 0px 0px 0px 1px rgba(0,0,0,0.6);
}

#themeselector .selected .themeicon {
	box-shadow: var(--selectionRing);
	pointer-events: none;
}

#themeselector .selected:hover .themeicon {
	box-shadow: var(--selectionRing);
	pointer-events: none;
}

#left {
	width: 20px;
	height: 40px;
}

#right {
	width: 20px;
	height: 40px;
	position: absolute;
	right: 0px;
	top: 0px;
}

#appearance-system .themeicon {
	position: relative;
}

#systemiconcontainer {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

#appearance-light .themeicon {
	position: relative;
}

#appearance-dark .themeicon {
	position: relative;
}

#appearance-light .themeicon, #left {
	background-image: linear-gradient(180deg, #FFFFFF 0%, #EEECE2 100%);
}

#appearance-dark .themeicon, #right {
	background-image: linear-gradient(180deg, #818177 0%, #252521 100%);
}

/* Medium Phone */
@media (min-width: 374px) {
	/* Filters */
	#filters .filterGroup {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Large Phone */
@media (min-width: 413px) {
	/* Critter Detail View */	
	#prices {
		grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	}
	
	#prices li {
		border-bottom: none;
	}
	
	#prices li:nth-child(2n) {
		border-right: 1px solid var(--border);
	}
	
	#prices li:nth-child(3n) {
		border-right: none;
	}
	
	#activeTimes {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#activeTimes li:nth-child(2n) {
		border-right: 1px solid var(--border);
	}
	
	#activeTimes li:nth-child(3n) {
		border-right: none;
	}
	
	#activeTimes li:nth-last-child(-n + 3):nth-child(3n + 1),
	#activeTimes li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li {
		border-bottom: none;
	}
}

/* Portrait Tablet */
@media (min-width: 767px) {
	/* Components */
	.containerInset {
		max-width: 1000px;
		margin: 0px auto;
	}
	
	aside, #listCritters, #listIslands {
		width: 320px;
	}
	
	main, #backing {
		width: calc(100% - 320px);
		left: 320px;
	}
		
	#backing svg {
		opacity: 0.1;
	}
	
	#backing svg path {
		fill: var(--body);
	}
	
	#cross, .shiftIsland #buttonBack, .toolbar, #buttonDismissMainView {
		display: none;
	}
	
	#containerIsland, #containerCritter {
		top: 0px;
		height: 100%;
	}
		
	iframe {
		top: 0px;
		height: 100%;
	}
	
	aside {
		border-right: 1px solid var(--borderCritter);
		transition: none;
	}
	
	.shiftAside {
		opacity: 1;
		transform: none;
		transition: none;
		border-radius: 0px;
	}
	
	main {
		border-radius: 0px;
		height: 100%;
		transition: none;
	}
	
	.shiftMain {
		transition: none;
		transform: translateY(0px);
	}
	
	#backing {
		height: 100%;
		background-color: var(--background);
		background-image: var(--dots);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#modalCritter {
		background: rgba(0,0,0,0.7);
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 0;
		transition: 0.5s opacity ease;
		z-index: -1;
	}
	
	#modalCritter:hover {
		cursor: pointer;
	}
	
	.activeIsland {
		display: flex;
		place-items: center;
		justify-content: center;
	}
	
	#containerCritter {
		transition: 0.5s transform ease;
	}
	
	.activeIsland #containerCritter {
		transform: none;
		z-index: -1;
		position: relative;
		transform: translateY(80px);
		transition: 0.5s transform ease, 0.5s opacity ease;
		width: 90%;
		max-width: 700px;
		height: 60%;
		max-height: 700px;
		border-radius: 10px;
		opacity: 0;
		box-shadow: var(--shadowModal);
	}
	
	.activeIsland #containerCritter .containerInset {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.shiftIsland #modalCritter {
		transition: 0.5s opacity ease;
		opacity: 1 !important;
	}
		
	.shiftIsland #containerCritter {
		transform: translateY(0px);
		transition: 0.5s transform ease, 0.5s opacity ease;
		opacity: 1 !important;
	}
	
	.shiftCritterIndex {
		z-index: 2 !important;
	}
	
	.shiftIsland #containerIsland {
		transform: none;
	}
	
	.sticker {
		font-size: 30px;
	}
	
	#containerSettings header {
		height: var(--toolbar);
		height: calc(var(--toolbar) + env(safe-area-inset-top));
		padding-top: calc(10px + env(safe-area-inset-top));
	}
		
	/* Filters */
	#modalFilters {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		pointer-events: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: 0.5s background ease;
		z-index: 4;
	}
	
	.shiftModalFilters {
		background: rgba(0,0,0,0.7);
		transition: 0.5s background ease;
		z-index: 4 !important;
	}

	#filters {
		width: 80%;
		height: 70%;
		border-radius: 10px;
		box-shadow: var(--shadowModal);
		top: auto;
		pointer-events: none;
		transform: translateY(80px);
		opacity: 0;
		transition: 0.5s transform ease, 0.5s opacity ease;
	}
	
	.shiftFilters {
		opacity: 1 !important;
		transition: 0.5s transform ease, 0.5s opacity ease;
		pointer-events: all !important;
	}
	
	#containerButtonApplyFilters {
		padding-bottom: 20px;
		border-radius: 0px 0px 10px 10px;
	}
	
	/* First Run Modal */
	#modalFirstRun {
		padding: 0px 10%;
		display: flex;
	}
		
	/* Install Modal */
	#containerInstall {
		width: 450px;
		top: 0px;
		right: 0px;
		height: 150px;
	}
	
	/* Critter Detail View */
	#imageCritter {
		padding: 60px 10%;
	}
	
	#prices {
		grid-template-columns: repeat(2, 1fr);
	}
	
	#prices li {
		border-bottom: 1px solid var(--border);
	}
	
	#prices li:nth-child(2n) {
		border-right: none;
	}
	
	#prices li:nth-child(3n) {
		border-right: 1px solid var(--border);
	}
		
	/* Islands */
	#containerIslandImage {
		height: 40vh;
	}
	
	.overview .title {
		font-size: 14px;
	}
	
	.overview .value {
		font-size: 23px;
	}
	
	/* Islands */
	#listIslands li {
		background-image: none;
	}
	
	/* Tableview */
	.tableview li {
		background-image: none;
	}
	
	#containerSettings .tableview {
		height: calc(100% - var(--toolbar));
		height: calc(100% - var(--toolbar) - env(safe-area-inset-top));
		top: calc(var(--toolbar) + env(safe-area-inset-top));
		
	}
	
	/* Sync */
	.containerSync button {
		height: auto;
		width: auto;
		min-width: 150px;
		margin-right: 10px;
		padding: 10px 20px;
	}
	
	#containerButtonsExport {
		display: block;
		margin-bottom: 0px !important;
		margin-top: 20px !important;
	}
	
	#containerCodeExport {
		display: block;
	}
	
	/* Shortcuts Panel */
	#modalShortcuts {
		max-width: 50vw;
		padding: 30px;
	}
}

/* Landscape Tablet */
@media (min-width: 1023px) {
	/* Filters */
	#filters {
		width: 60%;
		height: 60%;
	}
	
	/* Critter Detail View */
	#critterDetails {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	#critterDetails li {
		align-items: center;
		text-align: center;
		border-right: 1px solid var(--border);
	}
	
	#critterDetails li:nth-child(2n) {
		border-right: none;
	}
	
	#critterDetails li:nth-last-child(-n + 2):nth-child(2n + 1),
	#critterDetails li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li {
		border-bottom: none;
	}
	
	#prices {
		grid-template-columns: repeat( auto-fit, minmax(10px, 1fr) );
	}
	
	#prices li {
		border-bottom: none;
	}
	
	#prices li:nth-child(2n) {
		border-right: 1px solid var(--border);
	}
	
	#prices li:nth-child(3n) {
		border-right: none;
	}
	
	#activeTimes {
		grid-template-columns: repeat(4, 1fr);
	}
	
	#activeTimes li:nth-child(3n) {
		border-right: 1px solid var(--border);
	}
	
	#activeTimes li:nth-child(4n) {
		border-right: none;
	}
	
	#activeTimes li:nth-last-child(-n + 4):nth-child(4n + 1),
	#activeTimes li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li {
		border-bottom: none;
	}
	
	/* Island Detail View */	
	.containerItems {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.containerItems li:nth-child(2n) {
		border-right: 1px solid var(--border);
	}
	
	.containerItems li:nth-child(3n) {
		border-right: none;
	}
	
	.containerItems li:nth-last-child(-n + 3):nth-child(3n + 1),
	.containerItems li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li {
		border-bottom: none;
	}
	
	/* Tableview */
	#containerSettings .tableView {
		padding: 40px 15% 0px 15%;
	}
	
	/* Shortcuts Panel */
	#modalShortcuts {
		border-radius: 30px;
		max-height: 95vh;
	}
	
	#modalShortcuts li {
		font-size: 20px;
		margin-bottom: 30px;
	}
}

/* Desktop */
@media (min-width: 1440px) {
	/* Components */	
	aside, #listCritters, #listIslands {
		width: 414px;
	}
	
	main, #backing {
		width: calc(100% - 414px);
		left: 414px;
	}
	
	/* Tableview */
	#containerSettings .tableView {
		padding: 40px 20% 0px 20%;
	}
	
	#modalShortcuts {
		max-width: 30vw;
	}
}

/* Large Desktop */
@media (min-width: 1600px) {
	/* Filters */
	#filters {
		width: 30%;
		height: 60%;
	}
}

/* TIP JAR */

#donations {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}

#donations #thanks {
	max-width: 100%;
}

#donations #thanks path {
	fill: var(--tint);
}

#donations .intro {
	color: var(--body);
	text-align: center;
	font-family: var(--font);
	font-size: 16px;
}

#donations #containerButtonsDontations {
	width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);

}

#donations #containerButtonsDontations a {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#donations #containerButtonsDontations .emoji {
	font-size: 40px;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: var(--tintHover);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	transition: 0.4s background ease;
}

#donations #containerButtonsDontations a:hover .emoji {
	background: var(--tint);
	transition: 0.4s background ease;
}

#donations #containerButtonsDontations .name {
	color: var(--tint);
	font-size: 20px;
	font-family: var(--font);
	font-weight: bold;
	margin-bottom: 5px;
}

#donations #containerButtonsDontations .value {
	color: var(--body);
	font-size: 16px;
	font-family: var(--font);
}

@media (min-width: 1024px) {
	#donations {
		margin-top: 40px;
	}
	
	#donations .intro {
		font-size: 26px;
		margin-top: 60px;
	}
	
	#donations #containerButtonsDontations {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, 1fr);
		width: 70%;
	}
	
	#donations #containerButtonsDontations .emoji {
		font-size: 80px;
		width: 120px;
		height: 120px;
		border-radius: 60px;
	}
	
	#donations #containerButtonsDontations .name {
		font-size: 26px;
	}
}