@import url('//computational-geometry.org/css/style.css');

@font-face {
	font-family: 'Recursive';
	font-weight: 100 1000;
	font-style: oblique 0deg 14deg;
	src: url('/fonts/Recursive_VF_1.085.woff2');
}

html {
	--accent-color: #0e80cd;
	--secondary-accent-color: #c22c5d;
}

@media(prefers-color-scheme: dark) {
	html {
		--accent-color: #66a6e6;
		--secondary-accent-color: #ca6a8a;
	}
}

.h1-container {
	margin: auto;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

h1 {
	font-size: 180%;
	font-weight: 500;
	position: relative;
	line-height: 1.5;
	margin: 0;
}

h1 .title-container {
	z-index: 1;
	padding-top: 20px;
	padding-bottom: 15px;
	margin: 0;
}

h1::before {
	position: absolute;
	transform: rotate(-45deg);
	content: "";
	background: var(--background-color);
	width: 400px;
	height: 400px;
	margin: 0;
	padding: 0;
	box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.1);
}

h1 .location-header {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 10px;
}

.header-container {
	position: relative;
	padding: 0;
}

.header-container::before {
	position: absolute;
	content: "";
	width: 30%;
	min-width: calc(50% - 150px);
	background: url('/images/header-1.jpg');
	background-size: cover;
	background-position: center center;
	padding: 0;
	left: 0;
	top: 0;
	bottom: 0;
}

.header-container::after {
	position: absolute;
	content: "";
	width: 30%;
	min-width: calc(50% - 150px);
	background: url('/images/header-2.jpg');
	background-size: cover;
	background-position: center center;
	padding: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.sponsor-container {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.sponsor-logo {
	height: 100px;
	opacity: 0.9;
}

.invited-speaker {
	overflow: hidden;
}

.invited-speaker h2 {
	margin-bottom: 7px;
}

.invited-speaker-affiliation {
	font-style: italic;
	font-variation-settings: "slnt" -15;
}

.floating-image {
	display: block;
	width: 192px;
	max-width: 100%;
	float: right;
	border-radius: 100px;
	padding: 0;
	margin-left: 29px;
	margin-bottom: 25px;
	shape-outside: circle(45.20% at 103px 97px);
}

.registration-fee-table {
	width: auto;
	border-collapse: collapse;
	border-top: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
}

.registration-fee-table tr:first-child {
	border-bottom: 1px solid var(--text-color);
}

.registration-fee-table td,
.registration-fee-table th {
	text-align: center;
	padding: 5px 20px;
}

.registration-fee-table th:first-child {
	text-align: right;
}

ul.paper-list {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 20px;
	text-indent: 2em hanging;
}

.paper-list li {
	margin-bottom: 10px;
}

/* Program table */

html {
	--table-line-color: #eaeaea;
}

.schedule {
	display: flex;
}

.schedule .parallel-events {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.schedule.at-a-glance,
.schedule .parallel-events {
	flex-direction: row;
	gap: 0 10px;
}

.schedule .session,
.schedule .parallel-events > * {
	flex: 1 1 0px;
	flex-direction: column;
}

.section-container.three-wide > .parallel-events {
	max-width: 1505px;
}

.schedule .session-header {
	position: sticky;
	top: 93px;
	padding-top: 10px;
	z-index: 1;
	background-color: var(--this-section-background-color);
}

.schedule .day-label {
	font-weight: 600;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--table-line-color);
}

.schedule .parallel-events {
	border-bottom: 1px solid var(--table-line-color);
}
.schedule .parallel-events .event,
.schedule .parallel-events .event:last-child {
	border-bottom: 1px solid var(--table-line-color);
}
.schedule .parallel-events.session-header,
.schedule .parallel-events:last-child,
.schedule .parallel-events .event.last-in-session {
	border-bottom: none;
}

.schedule .event {
	position: relative;
	box-sizing: border-box;
	padding: 6px 60px;
	padding-right: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--table-line-color);
}
.schedule .event:last-child {
	border-bottom: none;
}
.schedule .event::before {
	position: absolute;
	content: "";
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	background-color: var(--event-border-color);
}
.schedule .event::after {
	position: absolute;
	content: attr(data-start-time);
	left: 0;
	top: 8px;
	padding: 0 4px;
	background-color: var(--event-border-color);
	color: var(--background-color);
	font-weight: 500;
	font-size: 94%;
	font-style: normal;
	font-variation-settings: "slnt" 0;
	line-height: 20px;
}
.schedule .minor {
	font-size: 80%;
	font-weight: 450;
}

.schedule.at-a-glance {
	overflow-x: auto;
}
.schedule.at-a-glance .session {
	min-width: 180px;
}
/*.schedule.at-a-glance .day-label {
	position: sticky;
	top: 93px;
	padding-top: 10px;
}*/
.schedule.at-a-glance .event {
	text-align: center;
	padding: 2px 30px;
}
.schedule.at-a-glance .event::before {
	top: 4px;
	bottom: 4px;
}
.schedule.at-a-glance .event::after {
	padding: 0 2px;
	top: 4px;
	font-size: 60%;
	font-weight: 650;
	line-height: 13px;
}
.schedule.at-a-glance .event.break::before,
.schedule.at-a-glance .event.break::after {
	/* In the at-a-glance schedule, hide the break times. */
	content: none;
}

.schedule .event.general {
	--event-border-color: var(--muted-text-color);
}
.schedule .event.socg {
	--event-border-color: var(--accent-color);
}
.schedule .event.yrf {
	--event-border-color: var(--success-color);
}
.schedule .event.media {
	--event-border-color: #ddbb77;
}
.schedule .event.challenge {
	--event-border-color: #77bbdd;
}
.schedule .event.workshop {
	--event-border-color: var(--secondary-accent-color);
}
.schedule .event.break {
	--event-border-color: var(--muted-text-color);
}
.schedule .event.break b {
	font-style: italic;
	font-variation-settings: "slnt" -15;
}

.schedule .event .affiliation {
	color: var(--muted-text-color);
}

.schedule .event .end-time {
	color: var(--muted-text-color);
}

.schedule .event .previous-column-button,
.schedule .event .next-column-button {
	display: none;
}

.schedule .spacer {
	min-height: 15px;
}

.schedule.detailed {
	flex-direction: column;
}

.schedule .location {
	float: right;
}

.schedule .speaker {
	text-decoration: underline;
}
.schedule .title {
	font-variation-settings: "slnt" -15;
}

.schedule .student-talk .speaker::after {
	content: '';
	display: inline-block;
	margin-left: 5px;
	width: 20px;
	height: 15px;
	background: url('/images/graduation-cap.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.schedule .remote-talk .title::after {
	content: '';
	display: inline-block;
	margin-left: 2px;
	width: 20px;
	height: 15px;
	background: url('/images/globe.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.schedule .event .favorite-button {
	position: absolute;
	left: 20px;
	top: 35px;
	width: 15px;
	height: 15px;
}

#timezone-toggle-container {
	margin-bottom: 14px;
}

#timezone-toggle {
	width: 250px;
	font-family: 'Recursive', sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: 16px;
	border: 1px solid var(--muted-text-color);
	box-sizing: border-box;
	padding: 8px;
	margin-left: 6px;
}

/* Loader */
#logo-loader #diamond {
	stroke-width: 5;
	stroke-dasharray: 586 586;
	animation: 3s linear infinite loader-rotation;
}

@keyframes loader-rotation {
	from {
		stroke-dashoffset: 586;
	}
	to {
		stroke-dashoffset: -586;
	}
}

/* Session timer */
.session-select-container {
	align-items: right;
	text-align: right;
}

.countdown-container {
	align-items: center;
	text-align: center;
	line-height: normal;
}

#countdown {
	font-size: 192px;
	margin-top: 48px;
	margin-bottom: 48px;
}

#info {
	font-size: 72px;
}

/* Dark mode and responsiveness */

@media(prefers-color-scheme: dark) {
	html {
		--table-line-color: #303030;
	}
	.sponsor-logo.invertable {
		filter: invert();
	}
	.schedule .event.student-talk .speaker::after {
		background-image: url('/images/graduation-cap-dark.svg');
	}
	.schedule .event.remote-talk .title::after {
		background-image: url('/images/globe-dark.svg');
	}
}

@media(max-width: 800px) {
	h1::before {
		width: 350px;
		height: 350px;
	}

	h1 .title-container {
		padding-top: 15px;
		padding-bottom: 10px;
	}

	/* in the schedule, show only a single parallel session at a time */
	.schedule .section-container .parallel-events {
		gap: 0;
		grid-auto-columns: auto;
	}
	.schedule .section-container.session-1-visible .parallel-events {
		grid-auto-columns: 1fr 0 0;
	}
	.schedule .section-container.session-1-visible .parallel-events .event:not([data-column~="1"]) {
		display: none;
	}
	.schedule .section-container.session-2-visible .parallel-events {
		grid-auto-columns: 0 1fr 0;
	}
	.schedule .section-container.session-2-visible .parallel-events .event:not([data-column~="2"]) {
		display: none;
	}
	.schedule .section-container.session-3-visible .parallel-events {
		grid-auto-columns: 0 0 1fr;
	}
	.schedule .section-container.session-3-visible .parallel-events .event:not([data-column~="3"]) {
		display: none;
	}

	.schedule .parallel-events.session-header {
		min-height: 61px;
	}

	.schedule .event .previous-column-button,
	.schedule .event .next-column-button {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		font-size: 32px;
		line-height: 55px;
		cursor: pointer;
		user-select: none;
	}
	.schedule .event .previous-column-button.disabled,
	.schedule .event .next-column-button.disabled {
		color: var(--table-line-color);
		cursor: default;
	}
	.schedule .event .previous-column-button {
		left: 0;
	}
	.schedule .event .next-column-button {
		right: 0;
	}

	.schedule .parallel-events.session-header .event {
		padding-right: 60px;
	}

	.schedule .spacer {
		min-height: auto;
	}
}

@media(max-width: 600px) {
	h1::before {
		width: 300px;
		height: 300px;
	}

	h1 {
		font-size: 160%;
	}

	h1 .location-header {
		font-size: 16px;
	}

	h1 .title-container {
		padding-top: 13px;
		padding-bottom: 8px;
	}
}

@media(max-width: 500px) {
	h1::before {
		width: 270px;
		height: 270px;
	}

	h1 .title-container {
		padding-top: 10px;
		padding-bottom: 5px;
	}
	
	.invited-speaker {
		text-align: center;
	}

	.floating-image {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

@media(max-width: 400px) {
	.header-container::before,
	.header-container::after,
	h1::before {
		content: none;
	}
}

@media print {
	.schedule .event {
		break-inside: avoid;
	}
}