/*
    Lectures.css

    Rules that only apply to the lecture pages
*/


#SidebarList {
    padding: 1em;

    display: flex;
    justify-content: center;
    align-content: start;
    flex-wrap: wrap;
    gap: 1em;
}

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax( 15em, 1fr));
    gap: 2em;
}

.MainContent {
    padding: 1em;
    max-width: 60ch;
    margin-left: auto;
}

.MainContent > p {
    padding: 1em;
}

#SidebarList >div {
     min-width: 15em; 
 
    padding: 1em;
    border-radius: 5%;
    transition: transform 300ms;
}

#SidebarList > div:hover {
    transform: scale(1.1);
}

#SidebarList div:nth-of-type(odd) {
    background: hsl(  var(--colour-1-hue), 
                      calc( var(--colour-1-saturation) - 60%), 
                      calc( var( --colour-1-lightness) + 45%) );
                                
}

#SidebarList div:nth-of-type(even) {
    background: hsl(  var(--colour-1-hue), 
                      calc( var(--colour-1-saturation) - 50%), 
                      calc( var( --colour-1-lightness) + 50%) );
}

#SidebarList > #ActiveSidebarCard {
    background: hsl(  var(--colour-1-hue), 
                      calc( var(--colour-1-saturation) - 0%), 
                      calc( var( --colour-1-lightness) + 30%) );
              
}

img {
    width: 100%;
}