talk.css

/**
 * Styles for the sample talk, you don’t need to copy this to use Inspire.js
 * If you just want the theme of the sample talk, use theme.css
 */


#intro h1 {
	margin: 0;
	filter: drop-shadow(.1rem .1rem .5rem rgba(0,0,0,.5));
	line-height: .95;
}

#intro h1 {
	margin-top: auto;
	color: var(--color-aqua);
	letter-spacing: -.04em;
	font-size: calc(90% + 15vh);
}

@supports (-webkit-background-clip: text) {
	#intro h1 {
		background: linear-gradient(to bottom right, var(--color1), var(--color2), var(--color3), var(--color2), var(--color1));
		-webkit-background-clip: text;
		color: transparent;
	}
}

#intro .attribution {
	margin-top: auto;
	color: var(--color-yellow);
	text-align: center;
}

#intro .attribution a {
	font-weight: bold;
}


#media-plugin {
	flex-flow: row;
	padding: 2rem;
}

	#media-plugin > div:first-child {
		margin-right: 1em;
	}

	#media-plugin h1 {
		font-size: 200%;
	}

	#media-plugin .annotation {
		font-weight: 300;
	}


@keyframes scrollbg {
	from {
		background-position-y: 0%;
	}
	to { 
		background-position-y: 100%;
	}
}

a.source::after {
	content: 'Image: ' attr(href);
	background: black;
	padding: 0.125em 0.25em;
	position: absolute;
	bottom: 0;
	right: 0;
	white-space: nowrap;
	font-size: 16px;
}

.type-table table {
	transform: rotate(45deg);
}

.type-table th {
	padding: 0;
	background: unset;
	line-height: 1;
	vertical-align: middle;
	border: none;
}

.type-table th, 
.type-table td {
	font-size: unset;
	text-align: center;
	width: 100px;
	height: 100px;
	max-width: 100px;
	max-height: 100px;
}

.type-table td {
	border: 1px grey solid;
}

.type-table div {
	transform: rotate(-45deg);
}

.type-common .a1,
.type-common .a2,
.type-common .b1,
.type-common .b2,
.type-simple-input .a1,
.type-simple-input .a2,
.type-simple-input .a3,
.type-simple-output .a1,
.type-simple-output .b1,
.type-simple-output .c1 {
	background: var(--color2);
}

.terminology {
	background: var(--dark2);
	/* height: 98vh; */
}

.terminology pre {
	background: var(--dark1);
	padding: 1em;
	border-radius: 1em;
}

.terminology header {
	border: 2px currentColor solid;
	padding: 0 2em;
	/* margin: 1em; */
}

.bgimg {
	background-size: cover;
	background-position: 50% 0;
}