@import url("icons/index.css");

#universal-design-definition {
	background: var(--accent2-light);
	background-repeat: no-repeat;
	background-origin: content-box;
	background-size: auto 3em;
	color: black;
}

.icons {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--columns, 6), 1fr);
	filter: invert();

	& img {
		width: 100%;
	}
}

#adaptable-to {
	& .icons img {
		height: 4em;
	}
}

#rwd {
	background: url('img/Ethan-Marcotte-RWD.jpg') center / contain #E8E8E8 no-repeat;
}

#mobile-stats {
	overflow: hidden;

	& h1 {
		transition: 1s font-size;
		white-space: nowrap;
	}

	& img {
		object-fit: contain;
		transition: 1s height;
		height: calc(100% - 6em);
	}

	&[data-step] {
		& h1 {
			font-size: 0;
		}

		& img {
			height: 100%;
		}
	}


}

@keyframes width {
	to {
		width: var(--end-width, 40%);
	}
}

@keyframes height {
	to {
		height: var(--end-height, 40%);
	}
}

figure.layout {
	margin: 0;
	border: 3px solid white;
	width: 100%;
	animation: width 8s infinite alternate linear;
	box-sizing: border-box;
	line-height: 1;

	&:not(.media-frame),
	& div {
		padding: 10px;
	}

	&.media-frame > div:first-child {
		margin-top: 10px;
	}

	& > div {
		background: white;
		color: hsl(0,0%,0%,.5);
		font: 40%/1.2 "BLOKK";
		border-radius: 0;
		box-sizing: border-box;

		&:nth-child(4n + 1) {
			background: var(--accent1-light);
		}

		&:nth-child(4n + 2) {
			background: var(--accent2-light);
		}

		&:nth-child(4n + 3) {
			background: var(--accent3-light);
		}

		&:nth-child(4n + 4) {
			background: var(--accent4-light);
		}
	}

	& .print-style:empty::before {
		content: attr(style);
		font: bold 120% var(--font-body);
		color: black;
	}

	& .block {
		display: block;

		&:not(:last-child) {
			margin-bottom: 10px;
		}
	}

	& .inline {
		display: inline;
	}

	& .inline-block {
		display: inline-block;
		max-width: 15em;
	}

	& div.flexbox {
		border: inherit;
		padding: 5px;
		display: flex;
		margin: 10px 0;
		background: var(--accent3);

		& > div {
			margin: 5px;
			background: white;
			flex: 1;
		}
	}

	& strong,
	& em,
	& mark {
		color: black;
	}

	& mark {
		box-shadow: 0 0 0 .3em yellow;
	}
}

#responsive-flex {
	& > div {
		display: flex;
		flex-wrap: wrap;
		animation: width 4s linear infinite alternate;
		width: 20em;
		--end-width: 10em;
		font-size: 120%;

		&::before {
			content: "42";
			background: white;
			color: black;
			font-size: 300%;
			line-height: 1;
			padding: .2em;
			flex: 1;
		}
	}

	& h1 {
		padding: .5em;
		margin: 0;
		background: black;
		text-align: left;
		flex: 9999;
	}

	& .note {
		font-weight: normal;
	}
}

#breakpoints {
	& .media-frame {
		margin: 0 auto;
		animation: width 4s ease-in-out infinite alternate;
		--end-width: 20%;
	}
	& iframe {
		width: 100%;
		height: 100%;
	}
}

#media-queries,
#media-queries-nested {
	& .media-frame {
		/*margin: 0 auto;*/
		animation: width 3s ease-in-out infinite alternate;
		--end-width: 20%;
	}

	& iframe {
		width: 100%;
		height: 100%;
	}
}

#media-queries-nested {
	& .media-frame {
		animation-name: width, height;
		animation-duration: 4s, 2s;
		height: calc(100vh - 12em);
		--end-width: 40%;
		--end-height: calc(100vh - 2em);
	}
}

twitter-widget {
	transform: scale(1.3) !important;
}

.hos.slide,
.hof.slide {
	& fieldset {
		font-size: 1rem;
		transform: scale(5);
		border: hsl(220,10%,90%) solid 1px;
		border-radius: 3px;

		& .req {
			color: red;
		}

		& label {
			display: block;
		}
	}
}

figure img:first-child + figcaption:last-child {
	text-align: center;
	color: hsl(var(--gray), 60%);
	font-style: italic;
}

#asab {
	& img {
		object-fit: contain;
		object-position: top right;
		max-height: 100%;

		& + img {
			object-position: top left;
		}
	}
}

#nextdoor {
	background: url(img/nextdoor-racialprofiling.jpg) left / 100% auto;
	transition-duration: 1s;
	transition-delay: 1s;
	align-items: start;

	& h1 {
		max-width: 25%;
		text-align: left;
		font-weight: bold;
		color: black;
		font-size: 120%;
		transition: inherit;
		transition-delay: 2s;
		opacity: 0;
	}

	&:target {
		background-size: 150% auto;

		& h1 {
			opacity: 1;
		}
	}
}

#women-crashes {
	background: url(img/women-crashes.png) top / 100% auto;

	&[data-step] {
		background-position: bottom;
	}

	&[data-step$="2"] {
		background-size: 150% auto;
	}
}

#translate-attr {
	& pre {
		white-space: normal;
	}
}

li::marker {
	color: var(--accent2-light)
}

.pages {
	& .page {
		--in1: 4vh;
		width: calc(8.5 * var(--in1));
		height: calc(11 * var(--in1));
		box-sizing: border-box;
		padding: calc(var(--in1) * .5) var(--in1);
		background: white;
		font: 40%/1 Blokk;
		color: gray;
		box-shadow: .1em .1em .4em black;
		hyphens: auto;
		text-align: justify;

		& + .page {
			margin-top: calc(var(--in1) * .75);
		}

		&.landscape {
			height: calc(8.5 * var(--in1));
			width: calc(11 * var(--in1));
		}

		& .heading {
			color: var(--accent2);
			font: bold 150%/1 var(--font-heading);
		}

		& ::marker {
			font-size: 150%;
			color: var(--accent2);
		}

		& ul {
			padding-left: 1.5em;
		}
	}

	&.side {
		display: flex;

		& .page + .page {
			margin-top: 0;
			margin-left: calc(var(--in1) * .75);
		}
	}
}

#atpage,
#atpage-lr {
	& > div {
		margin-right: 1em;
	}

	& .page {
		padding: calc(var(--in1) * .8) var(--in1);
	}
}

#atpage-lr {
	& .page:first-child {
		padding-right: calc(var(--in1) * 2);
	}

	& .page:nth-child(2) {
		padding-left: calc(var(--in1) * 2);
	}
}

.paged.slide {
	flex-flow: row;

	& h1 {
		text-align: left;
		font-size: 200%;
	}

	& .pages + pre {
		margin: auto 1em;
	}

	& pre {
		font-size: 120%;
	}
}