:root{
	--color-cream-rgb:247,246,197;
	--color-cream:rgb(var(--color-cream-rgb));

	--color-beige-rgb: 243,250,225;
	--color-beige:rgb(var(--color-beige-rgb));

	--color-tomato-rgb:238,101,68;
	--color-tomato:rgb(var(--color-tomato-rgb));

	--color-dusty-grape-rgb:96,81,162;
	--color-dusty-grape:rgb(var(--color-dusty-grape-rgb));
	
	--color-fern-rgb:57,109,53;
	--color-fern:rgb(var(--color-fern-rgb));
	
	--color-amber-gold-rgb:253,190,22;
	--color-amber-gold:rgb(var(--color-amber-gold-rgb));

	--color-dry-sage-rgb:179,175,143;
	--color-dry-sage:rgb(var(--color-dry-sage-rgb));

/*chartreuse*/
	--color-chart-rgb:200, 249, 2;
	--color-chart:rgb(var(--color-chart-rgb));

	--color-off-black-rgb: 0,8,7;
	--color-off-black:rgb(var(--color-off-black-rgb));

	--color-tablet-grey-rgb: 35,45,30;
	--color-tablet-grey:rgb(var(--color-tablet-grey-rgb));

	--bs-danger-rgb:var(--color-tomato-rgb);
	--bs-danger:var(--color-tomato);

	--bs-success-rgb:var(--color-fern-rgb);
	--bs-success:var(--color-fern);

	--bs-black-rgb:var(--color-off-black-rgb);
	--bs-black:var(--color-off-black);
	--kiosk-body-color: mintcream;

	--fx-shadow-color:var(--color-tablet-grey);
	--handy-box-shadow:inset 0px 0px 7px 0px var(--fx-shadow-color);

}
.no-touchy,body,.outermost,svg,html,div{
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
    touch-action: manipulation;
}
.outermost{
	transition:2s all;
}
.invert{	
	filter:invert(1);
}
body.out-of-control{
	background:radial-gradient(var(--color-tomato) 50%, rgba(var(--color-tomato-rgb),.7));
}
#out-of-control{
	h1{
		font-size: 2.5rem;
	}
	h2{
		position:relative;
		width:fit-content;
		margin:0 auto;
		z-index:1;
	}
	position:relative;
	
		svg{
			position:absolute;
			width:50%;
			opacity:.5;
			color:var(--color-cream);
			z-index:-1;
			left: 15%;
        	top: 10%;
        	&.tetris{
        		transform: translate(17%, 32%);
        	}
		}
}
body.in-control{
	background:radial-gradient(var(--color-dry-sage) 50%, rgba(var(--color-tomato-rgb),.7));
}

.gamepad-container{
	position:absolute;
	top:0;
	width:100%;
}

#playerQr{
	img{
		width:100%;
	}
}

.sweet-honey{
	display:none;
}


.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-fern);
    --bs-btn-border-color: var(--color-fern);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-fern);
    --bs-btn-disabled-border-color: var(--color-fern);

}

/* font sizes seem huge bc the tiny display is 1280x1920 (2:3) */
.kiosk-row{
	background-color:var(--color-tablet-grey);
	color:var(--kiosk-body-color);
	font-size:5rem;
	.title-overview{
		h1.asoup{
			font-size:13rem;
		}
	}
	
	h2{
		font-size:7rem;
		transform: translateY(25px);
	}
	h3{
		padding: .5rem;
	    color: aliceblue;
	    font-family: var(--bs-font-monospace);
	    font-size: 4.2rem;
	    background-color: #6a6a5d;
	}
	.alert{
		font-size:2rem;
		font-family:var(--bs-body-font-family);
		&.smaller{
			font-size:1.7rem;
		}
	}
	.wifi-ssid{
		font-size: 8rem;
    	letter-spacing: 9px;
	}
	.kicker{
		margin-top:4rem;
		font-size:3.3rem;
	}

	.rotating-header{
		display:none;
	}

	.number-container{
		width: 18rem;
    	transform: translateX(-5rem);
	}
	.user-url{
		font-size:2rem;
		a{
			text-decoration:none;
			color: var(--kiosk-body-color);
		}
	}
	.qr-code-row{
	/*	color: var(--color-off-black);
		box-shadow: var(--handy-box-shadow);
        background-color: mintcream;*/
	}
	.url-text{
        font-size: 4.2rem;
        
	}
	.url-debug{
		text-align:left;
		a{
			text-decoration:none;
			font-size: 3.2rem;
			color: white;
		}
	}

	.url-only a{
		color:unset;
		text-decoration: none;
	}

	/*ephemeral code el*/
	#femmy{
		display: flex;
	    justify-content: end;
	    img{
	    	margin:0 auto;
	    }
	}
	#just_code{
		font-size:8rem;
	}
	.number{
		transform: translateX(62px);
	}
	.blacky{
		div{
	        background-color: white;
	        color: black;
	        border-radius: 1rem;
	        width:100%;
	        margin-top:1rem;
	        padding:2rem 4rem 1rem 4rem;
	        line-height:1;
	    }
	}
}

.broken-screen{
	height: 69%;
    left: -98vw;
    position: absolute;
    transform: rotate(24deg);
    z-index:1;
    opacity:.7;
}

.kiosk-comm-error{
	font-size: 11rem;
    color: var(--color-chart);
    filter: drop-shadow(5px 7px 0px var(--color-tomato));
    position: absolute;
    top: 27vh;
    padding: 1rem;
    text-align: center;
    z-index: 0;
}

.wifi-pointer-kiosk{
	top: 0;
    left: 40%;
    width: 90%;
	svg{
		width:30%;
		fill:var(--color-chart);
		transform: rotate(239deg) translateY(70px);	
		animation:wifiPointerKiosk 3s cubic-bezier(0.47, 0, 0.745, 0.715) 1s alternate infinite;			
		opacity:.5;
		transition:.5s all;
	}
}

.slider-container{
	max-width: unset !important;
	width:200vw;
	position:relative;
	animation:sliderContainer 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s alternate infinite;	
}



@keyframes sliderContainer {
  0% {
  	left:0;
  }
  40% {
  	left:0;
  }
  50% {
  	left:-100vw;
  }
  100% {
  	left:-100vw;
  }
}
@keyframes wifiPointerKiosk {
  from {
  	transform: rotate(239deg) translateY(70px);
  	opacity:50%;
  }
  to {
  	transform: rotate(237deg) translateY(15px);
  	opacity:80%;
  }
}

.alert-greyjay{
	--bs-alert-color: #a19686;
    --bs-alert-bg: var(--color-tablet-grey);
    --bs-alert-border-color: #6c634b;
}
.alert-booted{
	--bs-alert-color: var(--color-amber-gold);
    --bs-alert-bg: var(--color-dusty-grape);
    --bs-alert-border-color: #6c634b;
    .alert-title{
    	display: block;
    	font-size: 2rem;
    }
}
.caslon{
	font-family: "adobe-caslon-pro", serif;
	font-weight: 400;
	font-style: normal;
}
.caslon.fw-bold{
	font-family: "adobe-caslon-pro", serif;
	font-weight: 700;
	font-style: normal;
}
.caslon.italic{
	font-family: "adobe-caslon-pro", serif;
	font-weight: 400;
	font-style: italic;
}
.asoup{
	font-family: "alphabet-soup-pro", serif;
	font-weight: 400;
	font-style: normal;
}



#codeForm{
	::placeholder{
		letter-spacing:4px;
	}
	input, button{
		font-size:3.8rem;
		font-family:"alphabet-soup-pro";
		letter-spacing:3px;
		text-align:center;
	}
}

/**
 * is_remote()
 * */
.steps{
	.icon-flex{
		width:25vw;
		max-width:75px;
	}
	svg{
		transform:translateY(-12px);
	}
}
.map-thumb{
	padding:.05rem;
	border-radius: .05rem;
	background-color:var(--color-cream);
	box-shadow:0px 0px 15px 3px  var(--color-off-black);
}

.footprints{
	.footprint{
		transition:.5s all;
	}
	.faded{
		opacity:0;
	}
}
.footprint-0{
	transform:rotate(60deg);
}
.footprint-1{
	transform:rotate(70deg);
}
.footprint-2{
	transform:rotate(78deg);
}
.footprint-3{
	transform:rotate(95deg);
}
.footprint-4{
	transform:rotate(102deg);
}
.wifi-pointer{
	top: 0;
    left: 40%;
    width: 90%;
	svg{
		width:30%;
		fill:var(--color-chart);
		transform: rotate(239deg) translateY(70px);				
		opacity:0;
		transition:.5s all;
	}
	svg.animated{
		opacity:50%;
		animation:wifiPointer 3s cubic-bezier(0.47, 0, 0.745, 0.715) 1s alternate infinite;
	}
}

@keyframes wifiPointer {
  from {
  	transform: rotate(239deg) translateY(70px);
  	opacity:50%;
  }
  to {
  	transform: rotate(237deg) translateY(15px);
  	opacity:80%;
  }
}
 /**
  * end is_remote()
  * 
  * */

/*fished these out of the typekit for offline use*/
@font-face {
	font-family:"adobe-caslon-pro";
	src:url("caslon.woff2") format("woff2"),url("caslon.woff") format("woff"),url("caslon.otf") format("opentype");
	font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
	font-family:"adobe-caslon-pro";
	src:url("caslon-italic.otf") format("opentype");
	font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}
@font-face {
	font-family:"adobe-caslon-pro";
	src:url("caslon-bold.woff2") format("woff2"),url("caslon-bold.woff") format("woff"),url("caslon-bold.otf") format("opentype");
	font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
font-family:"alphabet-soup-pro";
src:url("asoup.woff2") format("woff2"),url("asoup.woff") format("woff"),url("asoup.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}