/* Vuitton AW2018 colours
blue-lightblue-white
primary-blue-200: rgb(31,88,206)
accent-blue-200: rgb(128,146,183)
*/

/* red-blue-grey
primary-red-200: rgb(245,29,58)
primary-blue-300: rgb(40,60,120)
accent-grey-100: rgb(191,193,200)
*/

/* dark-red-yellow
primary-red-300: rgb(96,9,32)
primary-yellow-100: rgb(237,224,171)
*/

/* brown black grey
primary-brown-200: rgb(138,73,26)
primary-black-200: rgb(21,27,27)
accent-browngrey-100: rgb(186,170,158)
*/

/* mise-en-place colors
primary-grey-300: rgb(40,56,62)
primary-red-300: rgb(179,136,130)
primary-green-200: rgb(87,147,137)
accent-green-200: rgb(49,178,200)
accent-green-100: rgb(165,218,227)
*/

/* functions
success: rgb()
error: rgb()
warning: rgb()
neutral-gray: rgb()
neutral-white: rgb()
*/

@font-face { font-family: Jost; font-weight: italic; src: url('fonts/Jost-Italic-VariableFont_wght.ttf'); font-display: swap;}
@font-face { font-family: Jost; src: url('fonts/Jost-VariableFont_wght.ttf'); font-display: swap;} 
@font-face { font-family: Faustina; font-weight: italic; src: url('fonts/Faustina-Italic-VariableFont_wght.ttf'); font-display: swap;}
@font-face { font-family: Faustina; src: url('fonts/Faustina-VariableFont_wght.ttf'); font-display: swap;} /* normal */

html, body, input, button {
	font-family: Faustina, sans-serif; 
}
h1, h2, h3, h4, h5, h6 {
	font-family: Jost, sans-serif;
	margin-bottom: 0;
	padding-bottom: 0;
}

h2 {
	font-size: 2rem;
}

p {
	padding: .1rem;
}

ul {
	list-style-type: disc;
	list-style-position: inside;
	/* margin-top: .6em; */
	/* margin-bottom: 3.2em; */
	padding-left: 0;
}
ul li {
 	margin: 0em .2em .2em 1em
}

a, a:visited {
	color: blue;
}
/*#region WebGL canvas helpers */
.prototypeContainer {
	width:100%;
	height: 100%;
	position: relative;
}	

.prototypeContainer:after { 
	padding-top: 56.25%; /*(16:9 ratio)*/
	display: block;
	content: '';
}

.prototype {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Oxygen', sans-serif;	
	width: 100%;
	height: 100%;
	/*max-width: 720px;*/
	/*max-height: 405px;*/
}
/*#endregion */
/*#region effects */
.note { /* info text to explain message about FSM changes, invalid actions etc */
	width: 80%;
	margin: 3.9rem;
	background-color: #f0f7fb;
	border-left: solid 4px #3498db;
} 
.workInProgress {
	font-size:2em;
	background: repeating-linear-gradient(135deg,#fce100, #fce100 22px, #2b2b2b 22px, #2b2b2b 30px);
}
.workInProgress span {
	background-color: rgba(255,255,255,.3);
	margin: 1rem;
}

.prototypingArea {
	background-color:#269;
	background-image: linear-gradient(white 2px, transparent 2px),
	linear-gradient(90deg, white 2px, transparent 2px),
	linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.graphPaperWhite {
	background-color: rgb(245,245,245);
	background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 30px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 30px);
	background-size: cover;
}
.graphPaperGrey {
	background:
		linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
		linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
		linear-gradient(-90deg, rgba(0,0,0,.04) 1px, transparent 1px),
		linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
		linear-gradient(transparent 3px, #E3ECEC 3px, #E3ECEC 78px, transparent 78px),
		linear-gradient(-90deg, #aaa 1px, transparent 1px),
		linear-gradient(-90deg, transparent 3px, #E3ECEC 3px, #E3ECEC 78px, transparent 78px),
		linear-gradient(#aaa 1px, transparent 1px),
	#E3ECEC;
	background-size:
		4px 4px,
		4px 4px,
		80px 80px,
		80px 80px,
		80px 80px,
		80px 80px,
		80px 80px,
		80px 80px;
}


.redacted span {
	position: relative;
	white-space: pre;
}
.redacted span:after {
	background: black;
    border-radius: 0.1em;
    box-shadow: 0 0 1px rgba(0,0,0,0.35);
    content: " ";
    width: 100%;
    height: 1.2em;
    left: 0;
    position: absolute;
    transform: skewY(-5deg) rotate(5deg);
}
/*#endregion */
/*#region pre-flexbox tricks */
@media (min-width: 30em) {
	.row { width: 100%; display: table; table-layout: fixed; }
	.col { display: table-cell; }
}

.videoContainer {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	overflow: hidden;
}

.videoContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*#endregion */