@import url('https://cdn.cache.lol/type/gosh/gosh.css');
@import url('https://cdn.cache.lol/type/canicule-display/canicule-display.css');
@import url('https://cdn.cache.lol/type/muli/muli.css');
@import url('https://cdn.cache.lol/type/honey/honey.css');
@import url('https://cdn.cache.lol/type/berkeley-mono/berkeley-mono.css');
@import url('https://cdn.cache.lol/type/fontawesome-pro/css/all.css');
@import url('https://cdn.cache.lol/css/color.css');

:root {
	--step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
	--step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
	--step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
	--step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
	--step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
	--step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
	--step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
	--step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}

:root {
	--space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
	--space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
	--space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
	--space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
	--space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
	--space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
	--space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
	--space-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
	--space-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);
	
	/* One-up pairs */
	--space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
	--space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
	--space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
	--space-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
	--space-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
	--space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
	--space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
	--space-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);
	
	/* Custom pairs */
	--space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);
}


:root {
	--step--2: clamp(0.78rem, calc(0.71rem + 0.35vw), 1.20rem);
	--step--1: clamp(0.94rem, calc(0.84rem + 0.47vw), 1.50rem);
	--step-0: clamp(1.13rem, calc(1.00rem + 0.63vw), 1.88rem);
	--step-1: clamp(1.35rem, calc(1.18rem + 0.83vw), 2.34rem);
	--step-2: clamp(1.62rem, calc(1.40rem + 1.09vw), 2.93rem);
	--step-3: clamp(1.94rem, calc(1.66rem + 1.43vw), 3.66rem);
	--step-4: clamp(2.33rem, calc(1.96rem + 1.87vw), 4.58rem);
	--step-5: clamp(2.80rem, calc(2.31rem + 2.44vw), 5.72rem);
	--foreground: #333;
	--background: #eee;
	--accent: #fff;
	--button-fg: #fff;
	--button-bg: var(--blue-8);
}

.step--2 { font-size: var(--step--2); }
.step--1 { font-size: var(--step--1); }
.step-0 { font-size: var(--step-0); }
.step-1 { font-size: var(--step-1); }
.step-2 { font-size: var(--step-2); }
.step-3 { font-size: var(--step-3); }
.step-4 { font-size: var(--step-4); }
.step-5 { font-size: var(--step-5); }




.yellow {
	background: var(--yellow-4); color: #000 !important;
}

.blue {
	background: var(--blue-7); color: #fff !important;
}

.violet {
	color: var(--violet-8) !important;
}

.oven_form {
	display: flex; flex-wrap: wrap; gap: var(--step-0);
}

.top_bit {
	padding-left: 0; padding-top: 0;
}

.mrp2 {
	margin-right: .2em;
}

.top_thing {
	margin: 0 .5em;
}

.always {
	font-size: 200%;
  font-family: Gosh;
  margin-top: 1em;
  background: linear-gradient(to right, #ef5350, #f48fb1, #ff5722, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.oven_nav_li {
	vertical-align: middle; display: inline-block;
}

.calzone_img {
	margin-right: .25em;
	width: var(--step-0);
	vertical-align: middle;
	display: inline-block;
}

.calzone_img.larger {
	width: 1.25em;
}

.create_zone_button {
	--button-bg: var(--blue-8);
}

.chef_info {
	background-image: linear-gradient( 109.6deg,  rgba(254,253,205,1) 11.2%, rgba(163,230,255,1) 91.1% ) !important;
}

.landing_dig {
	font-family: Berkeley Mono !important;
	background: #000 !important;
	color: #bea !important;
}


.small_label {
	font-size: 80%;
	text-transform: uppercase;
	font-weight: bold;
}

.cost_a {
	margin-bottom: 0; line-height: 1; font-weight: 800; font-family: Canicule Display; font-size: 400%;
}

.cost_b {
	font-size: 70%; font-weight: 300;
}

.cost_c {
	margin-top: .5em; margin-bottom: 2em; line-height: 1; font-size: 80%;
}

.margin-left {
	margin-left: .5em;
}


html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	margin: 0;
}

article,
aside,
figure,
footer,
header,
aside,
main,
nav {
	display: block;
}

html {
	height: 100vh;
}

body {
	background: #333;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--foreground);
	font-family: 'Muli', sans-serif;
	font-size: var(--step-0);
	margin: var(--step-1);
	padding-bottom: var(--step-1);
}

footer {
	background-image: linear-gradient(to bottom, #434343 0%, black 100%);
	color: #fff !important;
	padding: calc(var(--step-0));
	margin: calc(var(--step-1) * -1);
	margin-bottom: -10em;
	margin-top: 2em;
	font-size: 90%;
	text-align: center;
  
  /* testing */
  min-height: 100vh;
  
}

footer .box, nav .box {
	background: inherit !important;
}



.block {
	display: inline-block;
	padding: 0;
	margin: 0;
	padding: calc(var(--step--1)) var(--step-0);
	text-decoration: none;
	font-size: var(--step-2);
	font-weight: 600;
	background: var(--yellow-6);
	color: #000 !important;
	box-shadow: 5px 5px 0px 1px rgba(135, 111, 44, 0.4);
	transition: transform 150ms;
}

.block:hover {
	background: var(--orange-4);
	transform: scale(1) rotate(-2deg);
}

.block:active {
	background: var(--orange-5);
	transform: scale(0.95) rotate(-4deg);
}



.blocks {
	list-style: none;
	margin: var(--step-0) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-0);
}

.blocks li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

.blocks li a {
	display: inline-block;
	height: 100%;
	width: 100%;
	padding: calc(var(--step--1)) var(--step-0);
	text-decoration: none;
	font-size: var(--step-2);
	font-weight: 600;
	background: var(--yellow-6);
	color: #000 !important;
	box-shadow: 5px 5px 0px 1px rgba(135, 111, 44, 0.4);
	transition: transform 150ms;
}

.blocks li a:hover {
	background: var(--orange-4);
	transform: scale(1) rotate(-2deg);
}

.blocks li a:active {
	background: var(--orange-5);
	transform: scale(0.95) rotate(-4deg);
}

.zone_nav {
	margin: 0 !important;
	padding: 0 !important;
	margin-bottom: 1.5em !important;
}

.zone_nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zone_nav li {
	display: inline-block;
	color: #fff;
	background: var(--grape-8);
	padding: 0;
	margin: 0;
	margin-right: .3em !important;
	border-radius: .1em;
	/*clip-path: polygon(calc(100% - 200px) 0, 100% 0, calc(80% - 200px) 100%, 0 100%); */
	/*clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%); */
	/*clip-path: polygon(0 0, 0 100%, 75% 100%, 100% 50%, 75% 0);*/
}

.zone_nav ol li:first-child {
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
}

.zone_nav ol li:last-child {
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;
}

.zone_nav li a, .zone_nav li .current {
	display: inline-block;
	padding: .5em;
	text-decoration: none;
}

.zone_nav ol li:nth-child(2) {
	background: var(--violet-8);
	margin-left: 0 !important;
}

.zone_nav ol li:nth-child(3) {
	background: var(--pink-8);
	margin-left: 0 !important;
}

.current {
	border-radius: .1em;
	background: #555 !important;
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;
}

nav {
	/*background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% );*/
	padding-top: 2em;
	margin: 0 0 3em 0;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-0);
}

nav ul li {
	display: inline-block;
	flex: 1;
	flex-basis: 15em;
	text-align: center;
	padding: 0;
	margin: 0;
	height: 5em;
}

nav ul li:last-child {
	width: 100%;
	flex-basis: 100%;
	height: 3em;
	margin: 0;
	padding: 0;
}

nav ul li a {
	flex-basis: 25em;
	display: inline-block;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: var(--step-2);
	font-weight: 600;
	background: var(--teal-3);
	color: #000 !important;
	box-shadow: 5px 5px 0px 1px rgba(135, 227, 192, .4);
	transition: transform 150ms;
}

nav ul li a:hover {
	background: var(--cyan-3);
	transform: scale(1) rotate(-2deg);
}

nav ul li a:active {
	background: var(--indigo-3);
	transform: scale(0.95) rotate(-4deg);
}

nav ul li:last-child a {
	font-size: var(--step--1);
	margin: auto;
	background: inherit;
	box-shadow: none;
	color: var(--green-2) !important;
	max-width: 10em;
}

nav ul li:last-child a:hover {
	transform: none;
}

nav h2 {
	color: var(--green-2);
}



/* Messages */

.message {
	border-radius: calc(var(--step--2) / 2);
	border-top-left-radius: 0;
	background: var(--indigo-5);
	color: #fff;
	padding: var(--step-0);
	position: relative;
	margin: 2rem 0;
	margin-top: 3em;
}

.message:before {
	background: var(--indigo-5);
	padding: var(--step--2) var(--step--2) 0 calc(var(--step--2) + 5px);
	border-radius: calc(var(--step--2) / 2);
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	position: absolute;
	top: calc(var(--step--2) * -2);
	left: 0;
	font-size: var(--step-0);
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f05a";
}

.message:after {
	background: var(--indigo-5);
	padding: var(--step--2);
	padding-top: calc(var(--step--2) + 2px);
	padding-left: 0;
	padding-right: calc(var(--step--2) + 8px);
	border-radius: calc(var(--step--2) / 2);
	border-top-left-radius: 0;
	position: absolute;
	top: calc(var(--step--2) * -2);
	left: calc((var(--step--2) * 3) + 10px);
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: .1em;
	content: "Ahoy!";
	text-transform: uppercase;
}

.success:before { content: "\f058"; }
.success:after { content: "Success!"; }
.success, .success:before, .success:after { background: var(--green-9); }

.failure:before { content: "\f057"; }
.failure:after { content: "Oh noes!"; }
.failure, .failure:before, .failure:after { background: var(--red-9); }



.bordered {
	border: 1px solid #fff;
}

#navigation {
	position: relative;
}

.hamburger {
	font-size: 150%;
	line-height: 1;
	width: 1em;
	max-width: 2em;
	flex-basis: 2em;
	text-align: right;
	padding-top: 0;
}

#hamburger-close {
	display: block;
	position: absolute;
	font-size: var(--step-2);
	top: calc(var(--step-2) * .8);
	right: calc(var(--step--2) * .8);
}


/* Widths */

.width-15em { max-width: 15em; flex-basis: 15em; }
.width-20em { max-width: 20em; flex-basis: 20em; }
.width-25em { max-width: 25em; flex-basis: 25em; }
.width-30em { max-width: 30em; flex-basis: 30em; }
.width-35em { max-width: 35em; flex-basis: 35em; }
.width-40em { max-width: 40em; flex-basis: 40em; }
.width-45em { max-width: 45em; flex-basis: 45em; }

.auto {
	margin: auto;
}







.bubble-container {
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--step--1);
	font-size: 85%;
}

.bubble {
  --r: 30px; /* the radius */
  --t: 30px; /* the size of the tail */
  max-width: 70%;
  padding: calc(2*var(--r)/3);
  border-radius: var(--r);
  -webkit-mask: 
	radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) 
	  var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
	conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) 
	  calc(var(--r)/-2) calc(var(--r)/-2) padding-box, 
	radial-gradient(50% 50%,#000 98%,#0000 101%) 
	  0 0/var(--r) var(--r) space padding-box;
  color: #fff;
}

.left {
	--_d: 0%;
	border-left: var(--t) solid #0000;
	margin-right: var(--t);
	place-self: start;
	background: var(--cyan-8);
}
.right {
	--_d: 100%;
	border-right: var(--t) solid #0000;
	margin-left: var(--t);
	place-self: end;
	background: var(--grape-8);
}


.faq h3 {
	font-family: inherit;
	font-weight: 800;
	font-size: 1em;
	margin: 3rem 0 1rem 0;
}

.faq p {
	margin: 0;
}





.recipe-details {
	font-size: 90%;
	list-style: none;
	
	/*
	margin: 0;
	padding: 0;
	*/
	
	/*
	padding-left: 5em;
	*/
	
	/*
	padding-left: 5em;
	text-indent: -6em;
	*/
}

.recipe-details .rfc {
	text-decoration: none;
	font-size: 80%;
	border-radius: .5em;
	padding: .2em;
	background: #ccc;
	margin-left: .5em;
	white-space: nowrap;
}

.recipe-details li {
	border: 0px dotted red;
	list-style-position: inside;
	
	position: relative;
	
	padding: 0 0 0 2.7em;
	
	margin: 0 0 1.2rem 0 !important;
	
	/*
	text-indent: -4em;
	padding: 0 0 0 4em;
	*/
}

.recipe-details .rr {
	
	position: absolute;
	top: 0;
	left: -2em;
	
	padding: .1em;
	
	width: 4em;
	
	border: 0px solid red;
	border-radius: .5em;
	text-align: center;
	font-family: 'Berkeley Mono', monospace;
	
	/*
	padding: 0 0 0 4em;
	
	display: inline-block;
	width: 4em;
	*/
	/*
	display: inline-block;
	width: 5em;
	padding-left: 5em;
	margin-right: 1em;
	*/
	/*
	width: 4em;
	display: inline-block;
	margin-right: .5em;
	*/
}

.rr.a { background: var(--red-3); color: var(--black); }
.rr.aaaa { background: var(--orange-3); color: var(--black); }
.rr.caa { background: var(--yellow-3); color: var(--black); }
.rr.cname { background: var(--green-3); color: var(--black); }
.rr.mx { background: var(--blue-3); color: var(--black); }
.rr.ns { background: var(--indigo-3); color: var(--black); }
.rr.txt { background: var(--grape-3); color: var(--black); }
.rr.srv { background: var(--violet-3); color: var(--black); }


/* Colors? */

.theme-freezer {
	background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);
}

.theme-freezer .box {
	
}

.theme-dark {
	background: #000;
	color: #fff;
}

.theme-dark .box {
	background: rgba(128,128,128,.2);
}

.theme-cookbook {
	background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
}

.theme-cookbook .box {
	background: rgba(0,0,0,.7);
	color: #fff;
}

.theme-countertop {
	background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

.theme-countertop .box {
	background: #77418C;
	color: #fff;
}

.theme-deep-purple {
	background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% );
	color: #fff;
}

.theme-deep-purple .box {
	background: rgba(35, 8, 69, 0.8);
	color: #fff;
}

.theme-alchemy {
	background-image: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
	color: #000;
}

.theme-sunset {
	background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
	color: #fff;
}

.theme-sunset .box {
	background: rgba(119, 65, 140, 0.5);
}

.theme-plum {
	background-image: linear-gradient( 99deg,  rgba(28,28,28,1) 10.6%, rgba(115,18,81,1) 118% );
	color: #fff;
}

.theme-plum .box {
	background: rgba(119, 65, 140, 0.5);
}

.theme-unicorn {
	background-image: linear-gradient( 109.6deg,  rgba(255,179,189,1) 1.8%, rgba(254,248,154,1) 50.6%, rgba(161,224,186,1) 100.3% );
	color: #000;
}

.theme-unicorn .box {
	background: rgba(255, 255, 255, 0.5);
}

.theme-yellow {
	background: #FFAB00;
	color: #000;
}

.theme-yellow .box {
	background: #ffd888;
}

.theme-peach {
	background-image: linear-gradient(to right, #fcb69f 0%, #ffecd2 100%);
	color: #000;
}

.theme-peach .box {
	background: rgba(255, 255, 255, 0.5);
}

.theme-citrus {
	background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
	color: #000;
}

.yellow {
	background: #FFFB7D;
}

.plain {
	background: inherit !important;
}

.theme-early {
	background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}

.theme-early .box {
	background: #cbecf0;
}


.theme-dusk {
	background-image: linear-gradient(to bottom right, #561139, #38A2D7);
	color: #fff;
}

.theme-dusk .box {
	background: rgba(86, 17, 57, 0.5);
}




.color-1 {
	background: #00B8D9;
	color: #000;
}

.color-2 {
	background: #6554C0;
	color: #fff;
}

.color-3 {
	background: #36B37E;
	color: #000;
}

.color-4 {
	background: #FFAB00;
	color: #000;
}




.inverse {
	background: var(--foreground);
	color: var(--background);
}

.centered ul {
	list-style: none;
}

* {
	border: 0px dotted green;
}

strong {
	font-weight: 700;
}

/* Flex stuff */


.half {
	flex-basis: 50%;
	width: 50%;
	flex: 1;
}

.whole {
	width: 100%;
	flex-basis: 100%;
}


section {
	display: flex;
	gap: var(--step-1);
	flex-wrap: wrap;
	margin-top: var(--step-2) !important;
	margin-bottom: var(--step-1);
}

/* eh?? */
div {
	padding: var(--step-0);
	flex: 1 1 0px;
	border-radius: calc(var(--step--2) / 2);
}

.box {
	min-width: 15em;
}

.box p:last-child {
	margin-bottom: 0;
}

.chef-says {
	font-size: var(--step--1);
	position: relative;
	overflow: hidden;
}

.chef-says:after {
	position: absolute;
	top: var(--step-0);
	right: var(--step-0);
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 10em;
	content: "\e3d2";
	opacity: .05;
}

.chef-says h3 {
	font-family: inherit;
	font-size: var(--step-0);
	font-weight: 800;
}

code {
	background: #444;
	color: #fff;
	font-family: 'Berkeley Mono', monospace;
	font-size: 80%;
	width: 100%;
	height: 20em;
	padding: calc(var(--step--2) / 6) calc(var(--step--2) / 4);
	border-radius: calc(var(--step--2) / 2);
	resize: none;
}

h1, h2, h3, h4, h5, h6, p, li {
	margin: 0 0 2rem 0;
	line-height: 1.35;
}

p {
	margin: 0 0 1rem 0;
	line-height: 1.4;
}

li {
	margin: 0 0 .25em 0 !important;
}

pre {
	line-height: 150%;
	font-family: 'Berkeley Mono', monospace;
}

.quoted {
	border-left: var(--step--1) solid rgba(255, 255, 255, .3) !important;
	padding-left: var(--step--1);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 100%;
}

h2 {
	font-size: var(--step-2);
}

h3 {
	font-size: var(--step-2);
}

h1 {
	font-size: var(--step-2);
	font-family: 'Gosh';
  font-feature-settings: "ss03" on;
}

h1 a {
	text-decoration: none;
}

.fancy {
	font-family: 'Canicule Display', serif;
}

.not_very_wide {
	width: 5em !important;
	margin-right: .2em;
}

.margin-top {
	margin-top: 1em;
}

h2, h3, h4, h5, h6 {
	/*font-family: 'Muli', sans-serif;*/
  font-family: "VC Honey Extrabold Deck", sans-serif;
  font-feature-settings: "ss01", "ss02" on;
  font-weight: bold;
}

h2 { font-weight: 800; }
h3 { font-weight: 800; }
h4 { font-weight: 800; }


.zone {
	font-family: 'Muli';
	background: #d67;
	color: #fff;
	font-weight: 500;
	font-size: 40%;
	text-transform: uppercase;
	padding: .2em .4em;
	margin-right: .5em;
	border-radius: .3em;
	display: inline-block;
	vertical-align: middle;
	line-height: 175%;
}


/* Default values shown */

passage-auth {
	
	/* Passage Container Styles */
	--passage-container-background-color: inherit;
	--passage-container-max-width: 300;
	--passage-container-margin: auto;
	--passage-container-padding: 30px 30px 20px;

	/* Error Styles */
	--passage-error-color: #dd0031;
	
	/* Header Text Styles */
	--passage-header-font-family: 'Muli';
	--passage-header-font-size: 0;
	--passage-header-font-weight: 700;
	--passage-header-text-color: #000;

	/* Body Text Styles */
	--passage-body-font-family: 'Muli';
	--passage-body-font-size: 90%;
	--passage-body-font-weight: 400;
	--passage-body-text-color: #000;

	/* Anchor Styles */
	--passage-anchor-text-color: #000;
	--passage-anchor-hover-color: #4d4d4d;
	--passage-anchor-active-color: #6b6b6b;

	/* One-Time Password Styles */
	--passage-otp-input-background-color: #d7d7d7;

	/* Input Styles */
	--passage-input-text-color: #000;
	--passage-control-border-radius: 5px;
	--passage-control-border-color: #d7d7d7;
	--passage-control-border-active-color: #000;
	
   /* Text Input Styles */
	--passage-input-box-background-color: #fff;
	--passage-input-box-border-radius: 5px;
	
	/* Checkbox Styles */
	--passage-checkbox-background-color: #000;
	--passage-checkbox-text-color: #fff;

	/* Button Styles */
	--passage-button-font-size: 16px;
	--passage-button-font-weight: 400;
	--passage-button-width: 50%;

	--passage-primary-button-background-color: #000;
	--passage-primary-button-text-color: #fff;
	--passage-primary-button-border-radius: 5px;
	
	--passage-primary-button-text-hover-color: #fff;
	--passage-primary-button-background-hover-color: #4d4d4d;
	
	--passage-primary-button-text-active-color: #fff;
	--passage-primary-button-background-active-color: #6b6b6b;

	--passage-secondary-button-background-color: #fff;
	--passage-secondary-button-text-color: #000;
	--passage-secondary-button-border-radius: 5px;
	--passage-secondary-button-border-color: #000;
	
	--passage-secondary-button-text-hover-color: #000;
	--passage-secondary-button-background-hover-color: #d7d7d7;
	--passage-secondary-button-border-hover-color: #4d4d4d;
	
	--passage-secondary-button-text-active-color: #000;
	--passage-secondary-button-background-active-color: #e0e0e0;
	--passage-secondary-button-border-active-color: #6b6b6b;
}

passage-profile,
passage-passkey-table{
  /* All passage-auth styles still apply */ /* Actually I don't think that's the case, lol */
  
  /* ////////////// */
  --passage-container-background-color: #77418C !important;
  --passage-container-background-color-default: #77418C !important;
  --passage-body-text-color: #fff !important;
  
  --passage-container-max-width: 100%;
  
  /* Error Styles */
  --passage-error-color: #dd0031;
  
  /* Header Text Styles */
  --passage-header-font-family: 'Muli';
  --passage-header-font-size: 0;
  --passage-header-font-weight: 700;
  --passage-header-text-color: #000;
  
  /* Body Text Styles */
  --passage-body-font-family: 'Muli';
  --passage-body-font-size: 90%;
  --passage-body-font-weight: 400;
  --passage-body-text-color: #000;
  
  /* Table Styles */
  --passage-table-header-border-color: #9855b2;
  --passage-table-row-hover-color: #9855b2;
  --passage-table-row-border-color: #9855b2;
  --passage-table-paginator-selected-color: #9855b2;
  --passage-table-paginator-hover-color: #9855b2;
}




.bold {
	font-weight: bold;
}

.full {
	width: 100%;
	flex-basis: 100%;
}

.full .icon {
	margin-right: .5em;
}

@media screen and (max-width: 400px) {
  .full .icon  {
	display: none;
  }
}



.top {
	position: fixed;
}

.centered {
	text-align: center;
}

.flush {
	margin: 0;
}

.transparent {
	background: inherit !important;
	margin: 0;
	padding: 0;
}

#passage-ui {
	width: 15em;
	background: #eee;
	border-radius: .25em;
}


.status {
	color: var(--accent);
}

a:link, a:visited, a:hover, a:active {
	color: inherit;
}

hr {
	border: 0;
	height: 2px;
	background: #000;
	padding: 0;
	margin: 2rem 0;
}

table {
	border-collapse: collapse;
}

td {
	border: 1px dotted var(--accent);
	padding: .5em;
}

form:not('.wrapper') div {
	padding: 0;
	margin: 2rem 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: var(--step-0);
}

form:not('.wrapper') div * {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 10em;
	align-self: flex-end;
}

form p {
	margin: 0;
	padding: 0;
}

label {
	display: inline-block;
	margin: .5em 0 0 0;
	font-weight: 600;
}

.button {
	text-decoration: none;
}

input, button, select, option, .button {
	font-family: inherit;
	font-size: inherit;
	padding: calc(var(--step--1) / 2);
	border-radius: calc(var(--step--2) / 2);
	background: rgba(255, 255, 255, .7);
	color: inherit;
	margin: .5em 1em .5em 0;
}

input[type="text"] {
	width: 100%;
}

/*
input[type="submit"]:before {
	content: "test";
	display: block;
	width: 5em;
	height: 5em;
	border: 1px solid red;
}
*/

button, .button, input[type="submit"] {
	background: var(--button-bg);
	color: var(--button-fg) !important;
	flex-basis: 10em !important;
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	box-shadow: 5px 5px 0px 1px rgba(128, 128, 128, 0.6);
	transition: filter 0.2s ease;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	display: inline-block;
	padding-left: .66em;
	padding-right: .66em;
}

button {
	margin-top: var(--step-0);
}

.button {
	padding-left: var(--step-0);
	padding-right: var(--step-0);
}

button:hover, .button:hover {
	color: var(--button-fg);
	transition: all 0.2s ease;
	filter: brightness(120%);
	cursor: pointer;
}

button:active, .button:active {
	transition: transform 150ms, box-shadow 150ms;
	transform: translate(5px, 5px);
	box-shadow: none;
}

textarea {
	background: #222;
	color: #fff;
	font-family: 'Berkeley Mono', monospace;
	font-size: inherit;
	width: 100%;
	height: 20em;
	padding: var(--step-0);
	border-radius: calc(var(--step--2) / 2);
	resize: none;
}


/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

button:hover {
	cursor: pointer;
}

.response, .method, .payload {
	font-weight: 300;
	text-transform: uppercase;
	font-size: 80%;
	border: 1px solid var(--foreground);
	padding: .2em;
	border-radius: .2em;
	margin-right: .2em;
}

pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

pre code {
	display: block !important;
	height: inherit !important;
	padding: var(--step-0) !important;
	line-height: 1.1 !important;
}