:root {
    font-size: 20px;
    --page-margin: clamp(0.8rem, 2.475vw, 2.25rem); /* 1.5rem; */
    --white: #F5F5F5;
    --off-white: #E9E9E9;
    --grey: #DCE2DB;
    --black: #303030;
    --black-40: #30303070;
    --red: #FF2F01;
    --sans-serif: "Plus Jakarta Sans", sans-serif;
    --mono: 'Space Mono', monospace;
    --symbols: system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
		sans-serif;
    --font-size-h3: clamp(0.9rem, 1.65vw, 1.5rem); /* 1rem */
    --font-size-h2: clamp(0.5rem, 0.99vw, 0.9rem); /* 0.6rem */
    --font-size-h5: clamp(1.1rem, 3.1vw, 3rem); /* 2rem */
    --font-weight-light: 400;
    --font-weight-regular: 500;
    --font-weight-bold: 700;
    --border: 1.5px solid var(--black);
    --border-radius: 1.25rem;
}

::selection {
    background: var(--red);
    color: var(--off-white);
  }

html {
	scroll-behavior: smooth;
}

body {
    background-color: var(--grey);
    margin: var(--page-margin);
    font-family: var(--sans-serif);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--black);
}

#hero {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 45vw;
    cursor: pointer;
    z-index: -1;
    padding: var(--page-margin);
}

.cell {
    width: calc(100% / 11);
    height: calc(100% / 5);
    background-color: var(--red);
    transform: scale(0);
    /* opacity: 0; */
    border: 1px solid var(--grey);
    transition: 0.5s;
}

.fill {
    opacity: 1;
    transform: scale(1);
}

.br-bl {
    border-radius: 0;
    border-bottom-left-radius: 100%;
}

.br-br {
    border-radius: 0;
    border-bottom-right-radius: 100%;
}

.br-tl {
    border-radius: 0;
    border-top-left-radius: 100%;
}

.br-tr {
    border-radius: 0;
    border-top-right-radius: 100%;
}

.br-none {
    border-radius: 0;
}

.br-all {
    border-radius: 100%;
}

.show {
    transform: scale(1);
}

.hide {
    transform: scale(0);
}

main {
    margin-top: 45vw;
    background-color: var(--grey);
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* gap: 1rem; */
}

section:not(#hero), footer {
    padding: 1rem 0;
    border-top: 2px solid var(--white);
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.span-all {
    grid-column: 1/-1;
}


/* h1, .h1 {
    font-weight: 700;
} */

h3, .h3, p, a  {
    font-size: var(--font-size-h3);
    line-height: 1.3;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: var(--font-size-h2);
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--font-size-h2) / 2);
}

h5, .h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-light);
    letter-spacing: -0.05em;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: var(--black);
    transition: 0.3s;
}

a:hover, summary:hover {
    color: var(--red);
}

a:not(nav a)::after {
	content: "↗";
	font-family: var(--symbols);
	margin-left: 4px;
}

.link--underline {
    border-bottom: var(--border);
    transition: 0.3s;
}

.link--underline:hover {
    border-bottom: 1px solid var(--red);
}

.link--button {
    width: 100%;
	text-decoration: none;
}

.link--button:hover {
	border: none;
}

.link--button:after {
	content: none;
}

.link--button:hover .link--button:after {
	content: none;
}

.button {
    width: calc(100% - 3rem);
    padding: 0.25rem 1.5rem 0.35rem 1.5rem;
    background-color: var(--red);
    color: var(--off-white);
    border-radius: var(--border-radius);
    border: none;
	text-align: center;
	text-decoration: none;
    font-family: var(--sans-serif);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.02em;
	cursor: pointer;
    font-size: var(--font-size-h3);
    border-radius: var(--border-radius);
    transition: 0.3s;
}

.button--lecture-slides {
    width: calc(var(--font-size-h3) * 12);
    height: calc(var(--font-size-h3) * 8);
    background-color: var(--off-white);
    color: var(--black);
    border-radius: 0;
}


.button:hover {
	background-color: var(--black);
    border-radius: 0;
}

.button--lecture-slides:hover {
    background-color: var(--red);
    color: var(--off-white);
    border-radius: var(--border-radius);
}

#quick-links ul li, #community ul li {
    line-height: 1;
}



/* DETAILS */
details>summary {
	list-style: none;
}

.sessions--title {
    display: flex;
    gap: var(--font-size-h3);
}

summary::-webkit-details-marker {
	display: none;
}

summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
    line-height: 1;
    transition: 0.3s;
}

summary::after {
	content: "+";
	font-size: calc(var(--font-size-h3) * 1.3);
	font-weight: var(--font-weight-bold);
}

details[open] summary:after {
	content: "-";
	/* font-size: var(--font-size-h5); */
	font-weight: var(--font-weight-bold);
}

details[open] summary {
    margin-bottom: var(--font-size-h3);
}

summary:hover {
	cursor: pointer;
}

details article {
    margin: var(--font-size-h4) 0;
}

#sessions > div > details > article > ul > li::before {
    content: "";
    background: var(--red);
    display: inline-block;
    width: 1ch;
    height: 1ch;
    border-top-left-radius: 100%;
    margin-inline-end: 0.25rem;
  }

#sessions > div > details > article > ul > li:nth-child(even)::before {
    border-radius: 0;
    border-bottom-right-radius: 100%;
}

.bullet-list--secondary li {
    margin-left: 0.5rem;
    list-style-type: upper-alpha;
} 

/* TO-DO LIST */
ol {
	font-size: var(--font-size-h3);
	padding-left: 1.02em;
}

ol>li {
	list-style-type: decimal;
}

.todolist {
    padding: 1rem;
    background-color: var(--off-white);
} 

.todolist ol {
	padding-left: 0;
}

.todolist ol li {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	list-style: none;
}

.todolist ol li input {
	accent-color: var(--black);
	cursor: pointer;
	transform: scale(1.4);
	margin-top: clamp(0.25rem, 0.6vw, 0.65rem);
    border-radius: 0;
    flex: 0 0 1rem;
}

/* DEMO LIST */

.demolist {
    list-style-type: "🎥";
    list-style-position: inside;
    /* font-size: 1rem; */
}

.studylist {
    list-style-type: "📝";
    list-style-position: inside;
    /* font-size: 1rem; */
}

.demolist li a, .studylist li a {
    margin-left: 0.5rem;
}

/* CODE STYLING */
pre {
	box-sizing: border-box;
	font-family: var(--mono);
	font-size: var(--font-size-h4);
    line-height: 1.3;
	overflow-x: visible;
	tab-size: 2;
	padding: 20px;
	background-color: var(--off-white);
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	max-width: 100%;
}

code {
    font-family: var(--mono);
    font-weight: 400;
    letter-spacing: -0.03em;
}

/* FOOTER  */

footer {
	display: flex;
	justify-content: space-between;
    background-color: var(--grey);
}

#footer--link-title,
#footer--link-title::after {
	content: none;
}
#footer--link-top::after {
	content: "↑";
	color: var(--link-arrow-color);
}


/* UTILITY */

.display--inline-block {
    display: inline-block;
}

.space--after-half {
	margin-bottom: calc(var(--font-size-h3) / 2);
}

.space--after-single {
	margin-bottom: var(--font-size-h3);
}

.space--after-double {
	margin-bottom: calc(var(--font-size-h3) * 2);
}

.space--after-triple {
	margin-bottom: calc(var(--font-size-h3) * 3);
}

.space--after-quadruple {
	margin-bottom: calc(var(--font-size-h3) * 4);
}

.background--red {
    background-color: var(--red);
}

.red {
    color: var(--red);
}


.black-40 {
    color: var(--black-40);
}

/* MEDIA QUERIES */

@media screen and (max-width: 660px) {
	.grid {
        display: flex;
        flex-direction: column;
    }

    #info.grid{
        gap: var(--font-size-h3);
    }
}