:root {
	--sans: 'Lab Grotesque', 'LabGrotesque', 'LabGrotIns', sans-serif;
	--serif: TiemposTextWeb, Georgia, Times, serif;
	--mono: Menlo, Consolas, Monaco, 'Courier New', monospace;

	--z-bottom: -100;
	--z-middle: 0;
	--z-top: 100;
	--z-overlay: 1000;

	/*https://tbimedia.s3.us-east-1.amazonaws.com/bistudios/_00/dev_edit/graphics/tools/colors.svg*/
	--black: #000;
	--offblack: #222;
	--gray4: #bcbcbc;
	--gray3: #d3d3d3;
	--gray2: #e8e8e8;
	--gray1: #f8f8f8;
	--white: #fff;
	--blue4: #00007c;
	--blue3: #007eff;
	--blue2: #2eb8ff;
	--blue1: #aef7ff;
	--red3: #930000;
	--red2: #e62828;
	--red1: #e62828;
	--green3: #00896a;
	--green2: #33ba98;
	--green1: #a0f2b8;
	--purple3: #5700d3;
	--purple2: #8d45ff;
	--purple1: #baa4ff;
	--yellow3: #e0b500;
	--yellow2: #ffdc31;
	--yellow1: #fff92e;
	--pink3: #bf005b;
	--pink2: #ff57a7;
	--pink1: #ffbdef;
	--orange3: #db5e00;
	--orange2: #f37d00;
	--orange1: #ffb0b0;

	/* water.css */
	--body-font: var(--sans);

	/* --lightpink: #FFE5F9; */
	/* --pink: #FF57A7;
	--green: #C2FFA1;
	--blue: #AEF7FF; */

	--lg-gradient: linear-gradient(
			180deg,
			rgba(242, 242, 242, 1) 0%,
			rgba(250, 250, 250, 1) 100%
		);
	--lg: #f8f8f8;
	--lightblue: hsl(181, 100%, 89%);
	--lightgreen: hsl(107, 100%, 89%);
	--lightpink: hsl(331, 100%, 95%);

	--purple: hsl(263, 100%, 74%);
	--orange: hsl(31, 100%, 56%);
	--pink: hsl(331, 100%, 67%);
	--blue:hsl(181, 100%, 56%);
	--green: hsl(107, 92%, 69%);

	--gradient: var(--blue),var(--green),var(--pink)
}

html {
	font-size: 14px;
	/* background-color: var(--blue); */
	scroll-behavior: smooth;
}
body {
	-webkit-font-smoothing: antialiased;
	/* padding: 0 12px; */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	overflow-x: hidden;
}

.content-well {
	max-width: 640px;
	margin: 0 auto;
}

.typography {
	font-size: 1.25rem;
	line-height: 1.8;
	color: #111;
}
.typography p {
	margin: 2.15rem 0;
	font-weight: 400;
	font-style: normal;
	font-family: var(--serif);
}
@media (min-width: 960px) {
	html {
		font-size: 16px;
	}
	.typography {
		line-height: 1.65;
	}
}

main#content a {
    color: #111;
    text-decoration: none;
    box-shadow: 0 1px 0 0 var(--pink);
    background-color: transparent;
    cursor: pointer;
    transition: .2s;
}
main#content a:hover {
  color: var(--pink);
  text-decoration: none;
  box-shadow: 0 1px 0 0 transparent;
}

main#content .item {
	padding: 0.25rem .5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 75px;
	border-radius: 2px;
	cursor: pointer;
	background-color: transparent;
	transition: .2s;
}

main#content .item .name {
	font-weight: 600;
}

main#content .invisible {
	display: none;
}

main#content .hoverable {
	background-color: #f8f8f8;
	border-radius: 2px;
	border: 1px solid var(--offblack);
	text-decoration: none !important;
	box-shadow: 0px 0px 0px 0px var(--offblack);
	transition: all 0.1s linear;
		
}
main#content .hoverable:hover, main#content .hoverable.active {
	transform: translate(-5px, -5px);
	box-shadow: 3px 3px var(--offblack);
}

main#content .hoverable.pink-bg:hover, main#content .hoverable.pink-bg.active {
	background-color: var(--pink);
}

@supports (width: min(130px, 150%)) {
	.dropdown-content {
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(130px, 100%), 1fr)
		);
	}
}

@supports (width: min(150px, 150%)) {
	.checklist {
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(150px, 100%), 1fr)
		) !important;
	}
}