/* 
CSS written by: Your Name

Most selectors you’ll need are here. Feel free to add as many as you need.
*/
:root {
	color-scheme: light dark;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	--background: light-dark(white, #18191b);
	--primary: light-dark(black, white);
	--secondary: light-dark(#727272, white);
	--accent: light-dark(rebeccapurple, #e3b6fe);

	background-color: var(--background);
}

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	max-width: 1200px;
	margin-inline: auto;
	padding: 1rem;
	column-count: auto;
	column-width: 20rem;
	column-rule-width: 1px;
	column-rule-style: solid;
	border-right: 1px solid var(--primary);
	border-left: 1px solid var(--primary);
}

time {
	font-weight: bold;
}

a:link {
	color: var(--accent);
}

a:hover {
	color: var(--primary);
}

a:focus-visible {
	outline: 2px dashed var(--primary);
}

a:visited {
	color: var(--accent);
}

a[href^="mailto:"] {
}

header {
	column-span: all;
	border-bottom: thick double var(--primary);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

h1 {
	font-size: clamp(1.5rem, -0.5143rem + 9.143vw, 5.5rem);
	text-align: center;
}

h2 {
}

h3 {
}

h4 {
}

h1,
h2,
h3,
h4 {
	position: relative;
	margin-block: 0.5em;
	text-transform: uppercase;
}

main {
	column-span: 3;
}

section {
	margin-block: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--secondary);
}

p {
	margin-block-start: 0.5em;
}

ul {
	margin-block: 1rem;
	display: flex;
	list-style: none;
	gap: 1rem;
}

li {
}

li a {
}

li img {
}

#sessions {
	ul {
		margin-block: 1rem;
		display: flex;
		flex-direction: column;
		list-style: none;
		gap: 0.5rem;
	}

	li {
		position: relative;
		display: grid;
		padding: 1rem;
		gap: 0.5rem;
		border: 1px solid var(--primary);
		break-inside: avoid;

		&:focus-within {
			border: 4px dashed var(--primary);
		}
	}

	li a {
		color: var(--secondary);
		text-transform: uppercase;
		overflow: hidden;
		text-decoration: none;
		font-size: 0.9rem;
		grid-row: 2 / 3;

		&:focus {
			outline: none;
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}

	li img {
		width: 100%;
		filter: grayscale(80%);
	}
}

aside {
	margin-bottom: 2rem;
}
aside:nth-of-type(2) {
	margin-top: 1rem;
	border-top: thick double var(--primary);
	column-span: all;
}

details {
}
details[open] {
}
summary {
}
summary:focus-visible {
}

footer {
	column-span: all;
}

footer section {
}

[hidden] {
}
label {
}
input[type="checkbox"] {
}
input[type="range"] {
}