html {
	overflow-y: scroll
}

:root {
	--bg_0: #ffffff;
	--bg_1: #ebebeb;
	--bg_2: #cdcdcd;
	--dim_0: #878787;
	--fg_0: #474747;
	--fg_1: #282828;

	--red: #d6000c;
	--green: #1d9700;
	--yellow: #c49700;
	--blue: #0064e4;
	--magenta: #dd0f9d;
	--cyan: #00ad9c;
	--orange: #d04a00;
	--violet: #7f51d6;

	--br_red: #bf0000;
	--br_green: #008400;
	--br_yellow: #af8500;
	--br_blue: #0054cf;
	--br_magenta: #c7008b;
	--br_cyan: #009a8a;
	--br_orange: #ba3700;
	--br_violet: #6b40c3;
}

* {
	box-sizing: border-box
}

body {
	max-width: 640px;
	margin: 64px auto;
	padding: 0 16px;
	font: 18px/1.6 monospace;
	color: var(--fg_0);
	background: var(--bg_0)
}

a:link {
	color: var(--blue)
}

a:hover {
	color: var(--cyan)
}

a:visited,
a:active {
	color: var(--violet)
}

h1 {
	font-size: clamp(48px, 9vw, 80px);
	margin: 0
}

h2 {
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--magenta);
	margin: 0 0 16px 0;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--magenta);
}

h1,
h2 {
	line-height: 1.2
}

p {
	margin: 0 0 16px 0
}

p:last-child {
	margin-bottom: 0
}

hr {
	border-style: dotted none none;
	border-width: 4px;
	border-color: var(--bg_2);
	margin: 40px 0;
}

.hero {
	text-align: center;
	padding: 24px 0;
}

.pfp {
	display: block;
	width: 160px;
	height: 160px;
	margin: 0 auto 16px;
	border: 3px solid var(--fg_1);
	border-radius: 50%;
	background: var(--fg_1);
	object-fit: cover;
}

.nav {
	margin-top: 16px;
}

.nav a {
	margin: 0 8px;
}

/* Conference list */
.conference-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 0
}

.conference-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 3px solid var(--dim_0);
	background: var(--bg_0);
	color: var(--fg_0);
	text-decoration: none;
	padding: 16px;
	width: 100%;
	border-radius: 5px
}

.conference-card:hover,
.conference-card:focus-visible {
	border-color: var(--fg_1);
	outline: none
}

.conference-card:active {
	border-color: var(--br_violet);
	outline: none
}

.conference-name {
	font-weight: bold
}

.conference-date {
	color: var(--fg_1)
}

.conference-date-tbd {
	color: var(--dim_0)
}

@media (max-width: 480px) {
	.conference-card {
		padding: 14px;
		flex-direction: column;
		align-items: flex-start
	}
	.conference-name {
		margin-bottom: 6px
	}
}