/*
    Home.css

    Rules applicable only to the home page
*/

#InstructorCourseInfo {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1em;
    padding: 2em;
}

#InstructorCourseInfo > div {
    outline: solid black 1px;
    padding: 1em;
    box-shadow: .25rem .25rem .5rem hsl(  var(--colour-1-hue), 
                                  var(--colour-1-saturation), 
                                  var( --colour-1-lightness), .25 );
}


#SidebarInfo {
    padding-inline: 2em;
}

#SidebarList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2em;
}

#SidebarList > div {
    padding: 1em;
    min-width: 20em;
    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%) );
}