* {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    --clr-session01: hsl(15, 88%, 55%);
    --clr-session02: hsl(45, 100%, 54%);
    --clr-session03: hsl(81, 50%, 55%);
    --clr-session04: hsl(166, 48%, 51%); 
    --clr-session05: hsl(180, 54%, 59%);
    --clr-session06: hsl(194, 61%, 45%);
    --clr-session07: hsl(269, 30%, 55%);
    --clr-session08: hsl(352, 83%, 51%);
    --clr-background: hsl(0, 0%, 83%);
}

html {
    hanging-punctuation: first last;
    color-scheme: dark light;
    margin-inline:20px;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap:balance;
}

h2 {
    font-size: 1rem;
}

a {
    color: var(--clr-session06);
}


p {
    margin: 1.2rem;
    text-wrap: pretty;
    max-width: 75ch;
}

@media (prefers-reduced-motion: nopreference) {
    :has(:target){
        scroll-behavior: smooth;
    }
}

header {
    display:grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
}

header>picture:first-of-type {
    display: block;
    margin-left: 0;
    margin-right: auto;
    width: 50%;
}



header>picture:nth-of-type(2) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

header>picture>img {
    width:100%;
    /* margin-left: 0%; */
}

header>picture:nth-of-type(2)>img {
    width:120%;
}


header>span {
    grid-column: 4 / 4;
    display:inline-grid;
    grid-template-columns: subgrid;
    gap: 5%;
    /* background-color: aqua; */
}

header>span>a>picture {
    /* background-color: antiquewhite; */
    margin: 1em;
}

header>span>a>picture>img {
    height:40%;
}


@media (prefers-color-scheme: dark) {
    header>span>a>picture>img {
        filter: invert(100%);
}
    header>picture:nth-of-type(2)>img {
        filter: brightness(150%);
    }

}

main {
    container: main / inline-size;
    max-width: 950px;
    margin-inline: auto;
}

.about details {
    container: about / inline-size;
    border: 1px solid #aaa; 
    border-radius: 4px;
    padding: 0rem 0rem 0rem 0rem;
    margin-left: 2rem;
}

@container about (min-width: 780px) {
    .about-text {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.about summary {
  font-weight: bold;
  margin: 0rem;
  padding: 1rem;
  background-color: var(--clr-background);
}

.about details[open] {
  padding: 0.5em;
}

.about details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}
details summary > * {
  display: inline;
}
details summary { 
  cursor: pointer;
}


@container main (width <= 780px) {
    nav {
        display:none;
    }
}

.sessions {
    margin:2rem;
}
.sessions details {
    margin-top: 2rem;
}

.sessions details summary  {
    background-color: var(--clr-session01);
    color: white;
    border-radius: .5pc;
    padding: .5pc;
    margin-top: 4rem;
}

.sessions details:nth-of-type(2) summary {
    background-color: var(--clr-session02);
}

.sessions details:nth-of-type(3) summary  {
    background-color: var(--clr-session03);
}
.sessions details:nth-of-type(4) summary  {
    background-color: var(--clr-session04);
}
.sessions details:nth-of-type(5) summary  {
    background-color: var(--clr-session05);
}
.sessions details:nth-of-type(6)  summary {
    background-color: var(--clr-session06);
}
.sessions details:nth-of-type(7)  summary {
    background-color: var(--clr-session07);
}
.sessions details:nth-of-type(8)  summary {
    background-color: var(--clr-session08);
}



.carousel {
    container: carousel /inline-size;
}

.carousel-cell {
  	width: 100cqw;
  	height: auto;
 	margin-top: 2rem;
    margin-right: 10px;
  	background: white;
  	border-radius: 5px;
  	counter-increment: gallery-cell;
}

@container carousel ( width > 780px ) {
  .carousel-cell { width: 100cqw; }
}

.carousel-cell video {
    width: 100%;
}


.carousel-cell-text {
    font-size: 1rem;
    padding:0.5rem;
    background-color: lightgray;
}



@container main (width > 780px) {
  /*  .sessions {
        display:none;
    }
    */
    
    nav > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:fit-content;
        column-gap: 20px;
        row-gap: 1rem;
        list-style-type: none;
    }
    nav > ul > li > a {
        display:grid;
        grid-template-rows: min-content;
        text-decoration: none;
    }
    nav > ul > li > a > h3 {
        color: white;
        padding-inline: 2rem;
        padding-block: 1rem;
        border-radius: 5px;
    }

    nav > ul > li:nth-of-type(1) > a > h3 {
        background-color: var(--clr-session01);
    }

    nav > ul > li:nth-of-type(2) > a > h3 {
        background-color: var(--clr-session02);
    }
    nav > ul > li:nth-of-type(3) > a  > h3 {
        background-color: var(--clr-session03);
    }
    nav > ul > li:nth-of-type(4) > a  > h3 {
        background-color: var(--clr-session04);
    }
    nav > ul > li:nth-of-type(5) > a  > h3 {
        background-color: var(--clr-session05);
    }
    nav > ul > li:nth-of-type(6) > a  > h3 {
        background-color: var(--clr-session06);
    }
    nav > ul > li:nth-of-type(7) > a {
        background-color: var(--clr-session07);
    }
    nav > ul > li:nth-of-type(8) > a {
        background-color: var(--clr-session08);
    }

}


dialog {
    background-color: whitesmoke;
    width:400px;
}


dialog img {
    display:block;
    width: 80px;
    margin-left:auto;
    margin-right: auto;
}


dialog p {
    font-size: 1.5rem;
}


dialog p:first-of-type {
    text-align: center;
    font-size: 1.5rem;
}

dialog p:nth-last-of-type(1) {
    text-align: center;
    font-size: 1.1rem;
}


dialog form {
    display:block;
    background-color: whitesmoke;
}

dialog input {
    width:90%;
    margin-left:5%;
    margin-right:5%;
    height: 2rem;
    padding:10px;
    font-size: 1.1rem;
}


dialog button {
    width:90%;
    margin-top:20px;
    margin-left:5%;
    margin-right:5%;
    max-height: 3rem;
    background-color: hsl(203, 67%, 59%);
    font-size: 1rem;
    padding:10px;
    color: white;
}

dialog::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

footer img {
    width:10%
}

footer {
    margin-top: 5rem;
    padding:1cqh;
    background-color: lightgrey;
}