:root {
	--theme-main-background: #111;
	--theme-lighter-background: #222;
	--theme-lightest-background: #333;

	--theme-main-text: #eee;
	--theme-darker-text: #999;
	--theme-transparent-border: rgba(128,128,128,.3);

	--theme-yellow: #ff0;
}

/* minecraft font */
@font-face {
	font-family: Minecraft;
	src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf);
	font-display: swap;
}

/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  



body {
	font-family: Twemoji, 'Atkinson Hyperlegible', sans-serif;
	color: var(--theme-main-text);
	background-color: var(--theme-main-background);
	margin: 0;
	overflow-x: hidden;
}
html {
	scroll-behavior: smooth
}

/* content is uglier when its max width */
main {
	margin: 0 auto;
	width: 80%;
	padding: 1em;
}

.member-container {
	position: relative
}

/* makes random height and stuff look less broken */
* {
	box-sizing: border-box;
	vertical-align: baseline;
}

/* base styles for inputs */
input[type=text], input[type=submit] {
	-webkit-appearance: none;
	background-color: transparent;
	color: var(--theme-darker-text);
	transition-duration: 250ms;
	border: 1px solid var(--theme-transparent-border);
	border-radius: 4px;
	margin: 0;
	height: 2em;
	font-size: 1em;
}

/* base styles for text input boxes */
input[type=text] {
	text-align: left;
	padding-left: .5em
}
/* Selecting a text box */
input[type=text]:focus {
	/* make the text lighter */
	color: var(--theme-main-text)
}


/* base styles for buttons */
input[type=submit] {
	margin-left: .2em;
	cursor: pointer;
}
/* Hovering over a button */
input[type=submit]:hover {
	/* make the text lighter */
	color: var(--theme-main-text)
}

/* base styles for anchor tags */
a {
	color: #19f;
	text-decoration: none;
}


h1 {
	font-size: 2.5em;
	overflow-wrap: anywhere
}
h2, h3 {
	margin-top: 0;
	margin-bottom: .2em
}
hr {
	opacity: .2
}
button {
	outline: none;
	font-family: inherit
}


.enter-username-button, .view-profiles-button {
	/* add a slight shadow on the form in the index page */
	box-shadow: 0 0 1em #000;
}
.enter-username-button {
	max-width: calc(90vw - 8em);
}

/* the main "SkyBlock stats" title */
#main-title {
	text-align: center;
	font-size: calc(2em + 1vw);
	margin-top: 0;
	/*! top: 1em; */
	/*! position: relative; */
	padding-top: .5em;
}

/* the main "enter username" form */
.user-form {
	text-align: center;
	font-size: 1.25rem;

	/* center the forms */
	margin: 0 auto;
	width: max-content;
}

.username {
	/* usernames have the minecraft font */
	font-family: Minecraft, sans-serif;
	/* rreduce the size of the text because the font is too big */
	font-size: .8em;
	overflow-wrap: anywhere
}

.emoji {
	position: relative;
	height: 1em;
	vertical-align: text-bottom;
	bottom: .1em
}

.username-rank-prefix {
	font-family: Minecraft, sans-serif;
	font-size: .8em;
	overflow-wrap: anywhere
}

.profile-name {
	margin-right: .5em
}

.profile-members {
	color: var(--theme-main-text)
}
.profile-members .username {
	margin-right: .35em;
}

.profile-list, .leaderboard-profile-list {
	font-size: 1.5em;
}

.profile-list-item {
	margin-bottom: .5em;
	color: var(--theme-darker-text)
}
.profile-list-item-active {
	color: #fff
}
.profile-list-item-online {
	color: #0e0
}

.head {
	user-select: none
}

.head2d {
	/* pixelated rendering on 2d heads */
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	/* make the head centered correctly */
	position: relative;
	top: .1em;
	/* same size as font */
	height: 1em;
	width: 1em;
}

.head3d {
	/* make the head centered correctly */
	position: relative;
	top: .2em;
	/* same size as font */
	height: 1em;
	width: 1em;
}

.userHead {
	/* make the head not be touching the username */
	margin-right: .2em;
}

/* add a collapsible svg arrow */
.collapseArrow {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTcuNSA0Ljc1bC03LjUgNy41LTcuNS03LjVMMSA2LjI1bDkgOSA5LTl6IiBmaWxsPSIjYWFhIi8+IDwvc3ZnPg==);
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 1em;
	/* transition-duration: 100ms */
}

.collapsePart:not(.collapsed) .collapseArrow {
	transform: rotate(-180deg)
}

.sectionTitle {
	display: inline-block;
	margin: 0;
	text-shadow: 0 0 .5em #000;
}

/* hide all elements preceding a collapsed section */
.collapsePart.collapsed ~ * {
	display: none
}
.collapsePart {
	cursor: pointer
}

#categories section {
	margin-bottom: .5em
}

h2.sectionTitle {
	font-size: 1.5em
}

#toc {
	border: 1px solid rgba(255,255,255,0.1);
	max-width: max-content;
	padding: .75em;
	border-radius: 1em;

	display: inline-block;
	background: rgba(0,0,0,.1);
}
#toc li {
	list-style-type: none;
}
.member-leaderboard-item-anchor {
	color: inherit
}
.member-leaderboard-item {
	list-style-type: none
}

.item {
	display: inline-block;
	font-size: 32px;
	width: 1.2em;
	height: 1.2em;
	transition-property: font-size;
	transition-duration: 500ms
}
.item-slot {
	border: 1px solid #888;
	border-radius: .1em
}
.item img {
	position: absolute;
	margin-top: .075em;
	margin-left: .075em;
	width: 1em;
	height: 1em;
}
/* only pixelate items if they're not a head */
.item img:not(.item-custom-head) {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.item-slot {
	margin: .05em
}

.item-count {
	font-size: .45em;
	float: right;
	position: relative;
	top: 1.21em;
	right: .1em;
	font-family: Minecraft
}

.inventory-content:not(.inventory-content-active) {
	display: none
}

#inventory-tabs {
	margin-bottom: 1em;
	margin-bottom: 1em;
	overflow: hidden;
	border-radius: 1em;
	max-width: max-content;
	width: min(40em, 100%);
}
.inventory-tab {
	background-color: var(--theme-lighter-background);
	color: var(--theme-main-text);
	border: none;
	padding: 1em;
	cursor: pointer;
	transition-duration: 200ms
}
.inventory-tab:hover, .inventory-tab-active {
	background-color: var(--theme-lightest-background)
}

#global-tooltip {
	position: absolute;
	user-select: none;
	pointer-events: none;
	overflow: hidden;
	z-index: 100;
	background-color: #0a0a0aee;
	padding: 0 .25rem;
	border-radius: 3px;
	box-shadow: 0 0 0 3px #206,0 0 0 6px #000;
	font-family: Minecraft;
	white-space: nowrap;
}
#global-tooltip p {
	margin: 0
}
#global-tooltip .item-lore-name {
	margin-bottom: .5em
}


#armor {
	margin-right: 2em;
	height: 16em;
	display: inline-block;
}
#armor.armor-float {
	float: left
}

#inventories {
	display: inline-block;
	min-height: 16em
}
.inventory-container-armor .item-slot {
	display: block;
	margin-bottom: .25em
}
img.item-custom-head {
	width: .75em;
	height: .75em;
	margin-top: .1875em;
	margin-left: .1875em;
}

.github-mark {
	position: absolute;
	top: .75em;
	left: .75em;
	opacity: .2;
	transition-property: opacity;
	transition-duration: 200ms;
}
.github-mark:hover {
	opacity: .4
}

.list-item-with-icon {
	list-style: none;
	padding-left: 1.2em;
	position: relative;
	right: 1.2em;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

tr {
	text-align: left
}

.minions-table-locked {
	opacity: .2
}
.minions-table-unlocked {
	color: #3e3
}

.darker-text {
	color: var(--theme-darker-text)
}
.main-text {
	color: var(--theme-main-text)
}

@media only screen and (max-width: 490px) {
	#inventories .item {
		font-size: 24px
	}
}
@media only screen and (max-width: 370px) {
	#inventories .item {
		font-size: 16px
	}
}



#main-header {
	background-color: var(--theme-background);
	box-shadow: 0 0 1em rgba(0, 0, 0, .8)
}

header {
	padding: .5rem 10%;
}
header .user-form {
	margin: 0;
	display: inline-block
}
header .enter-username-button {
	box-shadow: none;
}

.back-arrow {
	float: left;
	transition: stroke 200ms;
	stroke: var(--theme-darker-text);
	margin-top: .4em;
	margin-right: 1em;
}
.back-arrow:hover {
	stroke: var(--theme-main-text)
}

#infobox {
	float: right;
	max-width: 95%;
	background-color: rgba(20,20,20,.4);
	padding: 1em;
	margin-top: 2em;
	width: 20em;
	border-radius: .5em;
	box-shadow: 0 0 1em #000;
}

#infobox p {
	margin: 0 0 .25em 0;
}

@media only screen and (max-width: 600px) {
	#infobox {
		position: relative;
		right: -2em;
		margin-top: 0
	}
}
@media only screen and (max-width: 550px) {
	#infobox {
		position: unset;
		box-shadow: none;
		float: none;
		border: 1px solid var(--theme-lighter-background);
	}
}

#login-button {
	position: absolute;
	right: .5em;
	top: .5em;
	border: 1px solid var(--theme-lighter-background);
	padding: .5em;
	transition-property: border, background-color;
	transition-duration: 200ms;
	border-radius: .5em;
	color: var(--theme-main-text)
}
#login-button:hover {
	background-color: var(--theme-lighter-background);
	border-color: var(--theme-lightest-background);
}
#edit-profile-things {
	margin-top: 2em
}
#edit-profile-title {
	margin-bottom: 0
}
#background-selector {
	display: flex;
	flex-wrap: wrap
}
#background-selector > span {
	display: inline-block;
	height: 10em;
	width: 18em;
	background-position: center;
	background-size: 110%;
	margin: .5em;
	border-radius: 1em;
	transition: background-size 500ms;
	cursor: pointer
}
#background-selector > span:hover {
	background-size: 125%;
}
#profile-emoji-selector {
	width: 2em;
	padding: 0;
	text-align: center;
}


.leaderboard-profile-list-item {
	overflow-wrap: break-word
}
#leaderboard-profile-list {
	margin-top: 1em
}
#leaderboard-title {
	margin-bottom: 0
}
#leaderboard-info {
	margin-top: .5em;
	display: block
}
.skill-extra-info {
	position: absolute;
	opacity: .5;
	left: 23em
}
.skill-level {
	opacity: .9
}
.skill-maxed {
	color: #0e0;
	opacity: 1
}
.tooltip {
	position: relative;
	cursor: pointer;
	/* commented out because idk why this is here */
	/* max-width: max-content */
}
.tooltip::after {
	font-size: 1rem;
	display: inline-block;
	left: 50%;
	opacity: 0;
	position: absolute;
	z-index: -100;
	background: var(--theme-lightest-background);
	border-radius: .25em;
	bottom: 125%;
	color: var(--theme-main-text);
	content: attr(data-tooltip);
	margin-left: max(calc(-50% - 1em), -5em);
	padding: .5em;
	transition: all 200ms;
	transform: scale(.6) translateY(50%);
	width: max-content;
	text-align: center;
	max-width: 10em;
	cursor: auto;
	box-shadow: 0 0 1em .5em #0002;
	pointer-events: none
}
.tooltip:hover::after, .tooltip:focus::after {
	opacity: .9;
	transform: scale(1) translateY(0);
	z-index: 100;
}
/* hide all the tooltips after if one is selected, unfortunately we can't select all the elements before :( */
.tooltip:focus ~ .tooltip::after {
	transform: scale(.6) translateY(50%);
	opacity: 0
}
.leaderboard-title-with-icon {
	padding-left: 1.2em;
	position: relative;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.item-custom-head {
	image-rendering: auto
}

.total-stat {
	font-size: 1.2em;
	list-style-type: none;
	position: relative;
	right: 1em;
	bottom: .5em
}

.profile-skills {
	display: inline-block;
	position: absolute;
	margin: 1em;
	margin-top: 1.6em;
}

.profile-skills > ul {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 2em;
}

.profile-skills > ul > li {
	width: 10em
}


#collections ul {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 0;
	width: fit-content
}

#collections ul > li {
	width: 12em;
	height: 1.5em;
	text-overflow: ellipsis;
}

#collections h3 {
	margin: .5em 0 .5em .5em;
}

@media only screen and (max-width: 1000px) {
	.profile-skills {
		position: unset;
		display: block;
		width: max-content;
	}
	.blurred-background-container-container {
		left: 0!important;
		width: 100vw!important;
		clip: rect(-1.7em, auto, auto, auto);
	}
}

@media only screen and (max-width: 500px) {
	.profile-skills {
		margin-left: 0;
		margin-right: 0
	}
}
@media only screen and (max-width: 410px) {
	.profile-skills > ul {
		grid-template-columns: repeat(1, 1fr);
	}
}


.unvisited-zone {
	opacity: .5
}

.profile-skills > ul > li {
	margin: .25em .25em 0 0;
}


.blurred-background-container-container {
	position: absolute;
	width: 47rem;
	height: calc(100% + 1em);
	z-index: -9;
	overflow: hidden;
	clip: rect(-1em, auto, auto, -2em);
}
@media only screen and (max-width: 1400px) {
	.blurred-background-container-container {
		left: calc(5em + 5%);
		width: 90%;
		clip: rect(-1.7em, auto, auto, -10em);
	}
	main {
		margin-top: .75em
	}
}
.blurred-background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	object-fit: cover;
	background-blend-mode: overlay;
	filter: blur(1em) brightness(.6);
}
.profile-emoji {
	margin-left: .25em
}

.mayor-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.mayor {
	display: inline-block;
	width: 12em;
	margin-right: 1em;
	vertical-align: top;
}
.mayor h3 {
	filter: brightness(1.5);
	text-align: center;
}
.mayor img {
	display: block;
	width: 5em;
	margin: 0 auto;
}
.mayor-vote-count-number {
	filter: brightness(1.2);
}
.mayor-vote-count {
	text-align: center;
	width: 100%;
	margin: 0 0 .5em 0;
}
.mayor-perk h4 {
	margin-bottom: 0
}
.mayor-perk p {
	margin: 0
}
.mayor-candidates {
	/* display: ; */
	/* everything next to each other */
	/* grid-template-columns: repeat(5, 1fr); */
	max-width: fit-content
}
.mayor-perks {
	list-style-type: none;
	padding: 0
}
.candidate-year {
	font-weight: normal;
	color: var(--theme-darker-text)
}
.mayor-winner {
	color: var(--theme-yellow);
	font-weight: bold;
	margin: 0;
	text-align: center;
	font-size: 1em
}
.next-special-mayor-time {
	color: var(--theme-darker-text)
}