/* Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html:focus-within {
    scroll-behavior: smooth;
}

html {
    display: block;
    color: canvastext;
}

body,
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

nav ul,
nav ol {
    list-style: none;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
}

input,
button,
textarea,
select {
    font: inherit;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

blockquote {
    border-left: 5px solid white;
    padding: 1em;
    font-weight: bold;
    font-size: 1.1em;
}

/* Variables */
:root {
    /* colors */
    --blue: #3778be;
    --blue-light: #00c8e1;
    --blue-lighter: #a2d9ef;
    --green: #00aa41;
    --green-light: #96dc00;
    --green-lighter: #d5f199;
    --yellow: #fac800;
    --orange: #ff9b00;
    --red: #c41011;
    --red-light: #e54f53;
    --grey: #b7bcbf;
    --pink: #d14190;
    --pink-light: #e199c3;

    /* hamburger menu */
    --bar-width: 42px;
    --bar-height: 5px;
    --hamburger-gap: 6px;
    --hamburger-margin: 18px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

/* Typography */
body {
    font-family: "Helvetica Neue", "IBM Plex Sans", Arial, sans-serif;
    font-size: 18px;
    background-color: var(--grey);
}

h1,
h2 {
    font-weight: bolder;
    font-size: 2.2em;
}

h1,
h2,
h3,
h4 {
    padding: 0.2em 0;
}

h5 {
    padding: 1em 0;
}

h3,
h4 {
    font-weight: bold;
}

h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1.3em;
}

a {
    font-weight: bold;
}

.navigation-link {
    font-size: 2.5em;
}

.navigation-link:hover {
    background-color: white;
}

.navigation-link:hover a {
    color: black;
}

@media screen and (min-width: 640px) {
    body {
        font-size: 2.4vw;
    }

    h1,
    h2 {
        font-size: 5.8vw;
    }

    h3 {
        font-size: 3.2vw;
    }
}

@media screen and (min-aspect-ratio: 2/1) {

    h1,
    h2 {
        font-size: 3.8vw;
    }
}

@media screen and (min-width: 800px) {
    body {
        font-size: 1.8vw;
    }

    .navigation-link {
        font-size: 1.7em;
    }
}

/* Layout */
.content {
    margin: 0 auto;
    width: 93%;
    padding: 0.5em 0;
}

.content-block {
    padding: 1em 0;
    color: white;
}

@media screen and (min-width: 640px) {
    .content {
        width: 83%;
        max-width: 900px;
    }
}

.content-block--yellow {
    background-color: var(--yellow);
}

.content-block--orange {
    background-color: var(--orange);
}

.content-block--blue {
    background-color: var(--blue);
}

.content-block--blue-light {
    background-color: var(--blue-light);
}

.content-block--blue-lighter {
    background-color: var(--blue-lighter);
}

.content-block--green {
    background-color: var(--green);
}

.content-block--green-light {
    background-color: var(--green-light);
}

.content-block--green-lighter {
    background-color: var(--green-lighter);
}

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

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

.content-block--pink {
    background-color: var(--pink);
}

.content-block--pink-light {
    background-color: var(--pink-light);
}


/* navigation */
.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
    /* height * sqrt(2) = length of the diagonal, since it is a right angle */
    --foreground: white;
    --background: white;
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: absolute;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    z-index: 5;
    cursor: pointer;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    color: var(--foreground);
    background-color: var(--background);
    transform-origin: left center;
    transition:
        opacity var(--animation-timing),
        width var(--animation-timing),
        rotate var(--animation-timing),
        translate var(--animation-timing),
        background-color var(--animation-timing);
}

.hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu:has(input:checked) {
    --foreground: black;
    --background: white;
}

.hamburger-menu input:checked {
    opacity: 0;
    width: 0;
}

.sidebar {
    position: absolute;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background-color: black;
    color: white;
    translate: -100%;
    transition: translate var(--animation-timing);
    min-height: 100vh;
    width: 100%;
    padding-left: var(--hamburger-margin);
    z-index: 4;
}

.hamburger-menu:has(input:checked)+.sidebar {
    translate: 0;
}

.hamburger-menu input:focus-visible,
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after {
    border: 1px solid var(--foreground);
    box-shadow: 0 0 0 1px var(--background);
}

.navigation-link a {
    color: white;
}

.main-navigation {
    text-transform: uppercase;
}

.navigation-link:hover a {
    background-color: white;
    transition: color 0.3s linear;
}

.navigation-link a {
    display: block;
}

/* footer */
.legal-links .links a {
    display: block;
    color: white;
}

.footer-outro .content {
    padding: 0;
}

/* home page */
.subtitle {
    display: block;
}

.intro {
    color: white;
}

.intro .content {
    font-size: 0.8em;
    font-weight: bold;
    padding: 4rem 0 0 0;
}

.intro-illustration .content {
    padding: 0;
}

.current-edition a {
    margin: 2em 0 0 0;
    display: block;
    background-color: var(--green);
    color: var(--grey);
    padding: 0.4em;
    text-transform: uppercase;
}

.current-edition a:hover {
    color: white;
}

p.conference-date {
    color: var(--blue);
}

.conference-date .description {
    font-weight: normal;
}

.about p {
    padding-bottom: 1em;
}

.updates.cta {
    background-color: var(--pink);
    padding: 0.5em 0;
}

.cta:hover {
    background-color: black;
    transition: background-color 0.3s;
}

.sponsor {
    margin: 1em 0;
}

a {
    color: white;
}

.cta a {
    font-size: 1.2em;
    display: block;
}

/* Landing page */
html.full-landing-page {
    height: 100vh;
    overflow: hidden;
}

.landing-page {
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 1px;
    transform-style: preserve-3d;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    color: white;
    margin: 0;
}

.image-reel::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.1);
    height: .6em;
}

.image-reel::-webkit-scrollbar:hover {
    background: rgba(0, 0, 0, 0.4);
}

.image-reel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.7);
}

.image-reel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
}

.landing-page--section,
.landing-page--intro {
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.landing-page--section {
    min-height: 70vh;
}

.landing-page--intro {
    min-height: 100vh;
}

.landing-page--intro {
    min-height: 100vh;
}

.image-reel {
    margin: 2em 0;
    list-style-type: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 2em;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.image-reel img {
    min-width: 400px;
    flex-shrink: 0;
}

.organizers .image-reel img {
    width: 100%;
    max-width: 100%;
}

.landing-page--content {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: 1200px;
}

@media screen and (min-aspect-ratio: 3/2) {
    .landing-page--section.conference-highlights {
        margin-top: -5em;
    }
}

.landing-page--section .landing-page--content {
    width: 80%;
}

.landing-page--content h1 {
    font-size: 7vw;
}

.landing-page--section.conference-highlights {
    background-color: var(--green);
    margin-top: -9em;
}

@media screen and (max-width: 690px) {
    .conference-highlights {
        margin-top: -2em;
        top: 0;
        transform: translate(0%, 0%);
    }
}

.landing-page--section.cta {
    min-height: 20vh;
    height: 20vh;
    background-color: var(--green-light);
}

a.newsletter.cta {
    display: block;
    height: 100%;
}

.landing-page--section.cta:hover {
    background-color: black;
}

.landing-page--section.content-highlights {
    background-color: var(--blue-light);
    min-height: 50vh;

}

.speakers {
    background-color: var(--blue);
}

.workshops {
    background-color: var(--pink);
}

.community-highlights {
    background-color: var(--pink-light);
}

.community-highlights,
.speakers {
    min-height: 140vh;
}

.organizers {
    background-color: var(--blue-light);
}

.landing-page--section.sponsors {
    background-color: var(--grey);
}

.landing-page--long-content {
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    position: absolute;
    width: 80%;
    padding-top: 3em;
}

@media screen and (min-width: 690px) {
    .landing-page--section {
        min-height: 100vh;
    }

    .organizers {
        min-height: 140vh;
    }
}

.headline::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("/static/feet-in-snakes.svg") top center;
    background-size: cover;
    transform: translateZ(-1px) scale(2.1);
}




.previous-editions {
    background-color: var(--green-lighter);
}

.sponsors ul {
    list-style-type: none;
}

.sponsor-type .sponsors {
    display: grid;
    align-items: center;
    margin-bottom: 2em;
}

.sponsor.scale-90 {
    transform: scale(0.9);
}

.sponsor.scale-80 {
    transform: scale(0.8);
}

.sponsor.scale-70 {
    transform: scale(0.7);
}

.sponsor.scale-60 {
    transform: scale(0.6);
}

.sponsor-type .sponsors {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5em;
}

.diamond .sponsors,
.platinum .sponsors {
    grid-template-columns: repeat(2, 1fr);
}

.institutional-partners .sponsors,
.gold .sponsors {
    grid-template-columns: repeat(3, 1fr);
}

.silver .sponsors,
.diversity-sponsors .sponsors,
.community-partners .sponsors {
    grid-template-columns: repeat(4, 1fr);
}

.sponsor-logo {
    height: 10em;
}

.sponsor-website {
    font-size: 1.4em;
}

@media screen and (min-width: 800px) {
    .sponsor-type .sponsors {
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
    }

    .keystone .sponsors {
    grid-template-columns: 66%;
    }

    .institutional-partners .sponsors,
    .diversity-sponsors .sponsors,
    .gold .sponsors {
        grid-template-columns: repeat(4, 1fr);
    }

    .silver .sponsors,
    .community-partners .sponsors {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* subsites */
.content.embedded {
    height: 150%;
}

.subsite p {
    padding: 0.7em 0;
}

.subsite li {
    margin-left: 1.5em;
    padding: 0.2em 0;
}

.subsite .subsite-title {
    background-color: var(--grey);
    color: white;
}

.subsite .content {
    color: white;
}

.blog-posts {
    list-style: none;
}

.blog-posts li {
    margin: 0;
}

.blog-post {
    display: block;
}

.blog-post .title {
    text-transform: uppercase;
    padding-bottom: 0;
}

.blog-post .pub-date {
    font-size: 0.8em;
    padding: 0;
}

.blog-posts li:nth-child(odd):hover,
.blog-posts li:nth-child(even):hover {
    background-color: black;
    transition: background-color 0.3s;
}

.blog-posts li:nth-child(even) {
    background-color: var(--green-light);
}

.blog-posts li:nth-child(odd) {
    background-color: var(--green);
}

.blog table,
.faqs table {
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.blog table,
.blog th,
.blog tr,
.blog td,
.faqs table,
.faqs th,
.faqs tr,
.faqs td {
    border: 1px solid white;
}

.blog td,
.faqs td {
    padding: 0.4rem;
    text-align: right;
    font-weight: bold;
}

.blog td:first-child,
.faqs td:first-child {
    text-align: left;
}

.subsite-title {
    padding: 4rem 0 0 0;
}

.subsite.faqs {
    background-color: var(--blue);
}

.faqs .qa {
    list-style-type: none;
    margin-left: 0;
}

.faqs h2 {
    font-size: 1.5em;
    padding: 0.7em 0 0 0;
}

.faqs h3 {
    font-size: 1.3em;
    padding: 0.5em 0 0 0;
}

.subsite.faqs li {
    padding: 0;
}

.subsite.faqs p {
    padding: 0;
}

.qa p {
    padding-top: 0;
}

/* team */
.members {
    display: grid;
}

.team-member {
    padding: 0.4rem 0;
}

.member-name {
    margin-top: 0.5rem;
    font-size: 1.4rem;
}

.subsite .team-member .member-role {
    font-size: 1rem;
    padding: 0.2rem 0;
}

.team-member img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
}

@media screen and (min-width: 800px) {
    .members {
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
    }
}

.member-socials {
    list-style-type: none;
}

.member-socials .member-social {
    display: inline-block;
    margin: 0;
    width: 28px;
}

.member-social img {
    width: 24px;
}

/* buy ticket */
.subsite .ticket-link {
    font-size: 0.8em;
    padding-bottom: 2em;
}

/* talks */
.talks {
    list-style-type: none;
}

.talks li {
    margin-left: 0;
}

.talks li:nth-child(odd):hover,
.talks li:nth-child(even):hover {
    background-color: black;
}

.talks li:nth-child(odd) {
    background-color: var(--blue);
}

.talks li:nth-child(even) {
    background-color: var(--blue-light);
}

.talk {
    display: block;
    text-decoration: none;
    font-weight: normal;
}

.talk-title {
    font-size: 1.9em;
}

.talk-subtitle {
    font-size: 1.2em;
}

.levels li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.track,
.levels {
    text-transform: uppercase;
    margin: 0.2em 0;
    font-size: 0.7em;
}

.track.filter,
.levels {
    background-color: white;
    color: gray;
    font-weight: bold;
}

.track.filter a,
.levels a {
    background-color: white;
    padding: 0.2em;
    text-decoration: none;
    color: gray;
    display: block;
}

.track.filter a:hover,
.levels a:hover {
    background-color: black;
    color: white;
}

.talk .description a {
    word-wrap: break-word;
    display: block;
}

.talk .description li {
    padding: 0;
}

.talk .description li p {
    padding: 0;
}

.talk pre code {
    text-wrap-mode: wrap;
}

.authors {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 16px solid white;
}

.authors h3 {
    font-size: 1.2em;
}

.authors p,
.authors li {
    padding-top: 0;
    font-size: 0.9em;
}

.authors li {
    padding: 0;
}