html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

[hidden],
template {
	display: none
}

:root {
	--font-xl: 28px;
	--font-lg: 24px;
	--font-md: 20px;
	--font-sm: 16px;
	--font-xs: 14px;
	--font-xxs: 12px
}

@media (max-width:768px) {
	:root {
		--font-xl: 26px;
		--font-lg: 20px;
		--font-md: 18px;
		--font-sm: 14px;
		--font-xs: 14px;
		--font-xxs: 12px
	}
}

* {
	box-sizing: border-box
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #222;
	font-size: 16px;
	font-size: var(--font-sm)
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Roboto Mono", monospace
}

.container {
	max-width: 1200px;
	padding: 0 30px;
	margin: auto
}

.section-title {
	color: #5a51fe;
	text-align: center
}

.section-description {
	text-align: center;
	font-size: 16px;
	font-size: var(--font-sm);
	color: #908f9e;
	font-weight: 400;
	max-width: 600px;
	margin: auto auto 32px
}

.hr {
	border: 0;
	margin: 0;
	width: 100%;
	height: 1px;
	background: #e1e1e5
}

.button {
	background: linear-gradient(65deg, #5a51fe, #8751fe);
	font-family: "Roboto Mono", monospace;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-size: var(--font-xxs);
	letter-spacing: 0;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
	text-decoration: none!important;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	justify-content: center;
	padding: 16px 32px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(32, 43, 54, .12);
	transition: all .15s ease
}

.button:hover {
	color: #fff;
	box-shadow: 0 8px 24px rgba(32, 43, 54, .25)
}

a {
	color: #5a51fe
}

:root {
	--font-xl: 28px;
	--font-lg: 24px;
	--font-md: 20px;
	--font-sm: 16px;
	--font-xs: 14px;
	--font-xxs: 12px
}

@media (max-width:768px) {
	:root {
		--font-xl: 26px;
		--font-lg: 20px;
		--font-md: 18px;
		--font-sm: 14px;
		--font-xs: 14px;
		--font-xxs: 12px
	}
}

.home-search {
	margin-top: -32px;
	margin-bottom: 32px
}

.tools {
	background-color: #f6f8fa;
	padding: 64px 0
}

.categories {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 16px
}

@media (max-width:1200px) {
	.categories {
		grid-template-columns: 1fr 1fr 1fr 1fr
	}
}

@media (max-width:960px) {
	.categories {
		grid-template-columns: 1fr 1fr 1fr
	}
}

@media (max-width:768px) {
	.categories {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:320px) {
	.categories {
		grid-template-columns: 1fr
	}
}

.header {
	text-align: center;
	padding-top: 64px;
	padding-bottom: 64px
}

.header .logo {
	width: 75px
}

.header .icon {
	font-size: 48px;
	margin: 0
}

.header .title {
	color: #5a51fe;
	font-weight: 900;
	font-size: 28px;
	font-size: var(--font-xl);
	margin-bottom: 0;
	margin-top: 16px
}

.header .subtitle {
	font-size: 20px;
	font-size: var(--font-md);
	color: #908f9e;
	font-weight: 400;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
}

.category-item {
	display: flex;
	background-color: #fff;
	padding: 42px 16px;
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	border: 1px solid #e1e1e5;
	box-shadow: 0 4px 24px rgba(32, 43, 54, .08);
	color: #222;
	transform: translateX(0) translateY(0) translateZ(0);
	transition: all .4s ease;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.category-item:hover {
	transform: translateX(0) translateY(-8px) translateZ(0);
	box-shadow: 0 8px 24px rgba(32, 43, 54, .12)
}

.category-item .icon {
	font-size: 28px;
	font-size: var(--font-xl);
	margin: 0
}

.category-item .name {
	font-size: 16px;
	font-size: var(--font-sm);
	margin-bottom: 0;
	font-family: "Roboto Mono", monospace
}

.footer {
	padding-top: 64px
}

.updates {
	margin-bottom: 96px
}

.contact {
	margin-top: 96px;
	margin-bottom: 128px;
	text-align: center
}

.copyright {
	background-color: #f6f8fa;
	padding: 64px 0;
	text-align: center
}


.categorybar {
	margin-top: 80px;
	padding: 0 16px;
	overflow-x: scroll;
	white-space: nowrap
}

.categorybar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px transparent;
	background-color: #fff
}

.categorybar::-webkit-scrollbar {
	width: 10px;
	background-color: #fff
}

.categorybar::-webkit-scrollbar-thumb {
	background-color: #eee;
	border: 2px solid #eee
}

.category-button {
	display: inline-block;
	padding: 16px 32px;
	margin-right: 4px;
	border: 1px solid #e1e1e5;
	color: #908f9e;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color .4s ease;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-size: var(--font-xs);
	margin-bottom: 8px
}

.category-button:hover {
	background-color: #f6f8fa
}

.category-button--active {
	background-color: #e1e1e5
}

.topbar {
	padding: 16px;
	box-shadow: 0 4px 24px rgba(32, 43, 54, .08);
	position: fixed;
	width: 100%;
	top: 0;
	background-color: #fff;
	left: 0;
	z-index: 100;
	font-family: "Roboto Mono", monospace;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center
}

.topbar .back-button {
	display: block;
	text-decoration: none;
	color: #5a51fe;
	font-size: 20px;
	font-size: var(--font-md);
	transform: translateX(0) translateY(0) translateZ(0);
	transition: transform .4s ease;
	align-items: center;
	font-weight: 700
}

.topbar a.logo {
	text-align: center
}
.topbar img.logo {
	width: 30px;
	height: 30px;
}

.resources {
	background-color: #f6f8fa;
	padding: 64px 0
}
.resources .block {
	display: block;
	padding: 16px 32px;
	background-color: #fff;
	border: 1px solid #e1e1e5;
	box-shadow: 0 4px 24px rgba(32, 43, 54, .08);
	border-radius: 3px
}

.resource-item {
	display: flex;
	text-decoration: none;
	padding: 16px 0;
	border-bottom: 1px solid #e1e1e5;
	transform: translateX(0) translateY(0) translateZ(0);
	transition: all .4s ease;
	align-items: center
}

.resource-item:hover {
	transform: translateX(5px) translateY(0) translateZ(0)
}

.resource-item:last-of-type {
	border: none
}

.resource-item .title {
	margin-top: 4px;
	margin-bottom: 8px;
	color: #222;
	font-size: 18px;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
}

.resource-item .description {
	margin-top: 0;
	margin-bottom: 8px;
	color: #908f9e
}

.resource-item .icon {
	height: 64px;
	width: 64px;
	min-height: 64px;
	min-width: 64px;
	-o-object-fit: contain;
	object-fit: contain;
	margin-right: 16px;
	background-color: #f6f8fa;
	border-radius: 3px;
	padding: 16px
}

@media (max-width:720px) {
	.resource-item .icon {
		height: 32px;
		width: 32px;
		min-height: 32px;
		min-width: 32px;
		padding: 4px
	}
}