/** Schedule CSS **/
#schedule {
    margin: 0 auto;
    padding: 0.35em 0 2em 0;
}

.schedule-grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(9em, auto) repeat(7, minmax(1em, 1fr));
    grid-template-rows: 2em 2em repeat(8, 2em);
    grid-row-gap: 0.5em;
    grid-column-gap: 0.18em;
    
}

:root {
    --mar: 0.25em;
    --tableyellow: #FFF8E6;
    --tableblue: #E6E9FB;
    --roomcolour: #BBC3EE;
}

.schedule-grid div.pm p {
    padding-top: 0.2em;
}

.schedule-grid div.am p {
    padding: 0.2em;
}

/* .schedule-grid div.am.friday {
    margin: 0;
    padding: 0;
} */

.schedule-grid div.name {
    order: 1;
    grid-row: 1 / -1;
    grid-column: 1 / 1;
}

.schedule-grid div.day.friday {
    order: 2;
    grid-column: 2 / span 2;
    grid-row: 1 / span 1;
}

.schedule-grid div.day {
    display: flex;
    align-items: center;
    align-content: flex-end;
    justify-content: center;
}

.schedule-grid div.day p {
    display: flex;
    align-self: flex-end;
    margin: 0;
    padding: 0;
}

.schedule-grid div.saturday {
    order: 2;
    grid-column: 4 / span 2;
    grid-row: 1 / 1;
    margin-left: 0.1em;
    margin-right: 0.1em;
    padding: 0;
    text-align: center;
}

.schedule-grid div.sunday {
    order: 2;
    grid-column: 6 / span 2;
    grid-row: 1 / 1;
    margin-left: 0.1em;
    margin-right: 0.2em;
    padding: 0;
    text-align: center;
}

.schedule-grid div.am.friday {
    order: 3;
    grid-column: 2 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableyellow);
    margin: 0;
    padding: 0;
    margin-left: var(--mar);
}

.schedule-grid div.pm.friday {
    order: 3;
    grid-column: 3 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableblue);
    margin: 0;
    padding: 0;
    margin-right: var(--mar);
}

.schedule-grid div.am.saturday {
    order: 3;
    grid-column: 4 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableyellow);
    margin: 0;
    padding: 0;
    margin-left: var(--mar);
}

.schedule-grid div.pm.saturday {
    order: 3;
    grid-column: 5 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableblue);
    margin: 0;
    padding: 0;
    margin-right: var(--mar);
}
.schedule-grid div.am.sunday {
    order: 3;
    grid-column: 6 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableyellow);
    margin: 0;
    padding: 0;
    margin-left: var(--mar);
}

.schedule-grid div.pm.sunday {
    order: 3;
    grid-column: 7 / span 1;
    grid-row: 2 / -1;
    background-color: var(--tableblue);
    margin: 0;
    padding: 0;
    margin-right: var(--mar);
}

.schedule-grid div.workshop-name {
    display: flex;
    order: 7;
    grid-column: 1 / 1;
    height: 100%;
    /* background-color: #ffffff; */
    padding: 0em 0.5em 0 0;
    /* margin: auto 0; */
    justify-content: flex-end;
    /* align-content: center; */
}

.schedule-grid div.bubble {
    order: 8;
    align-self: start;
    background-color: black;
    height: 100%;
    border-radius: 0.5em;
    margin: 0;
    padding: 0;
}

.schedule-grid div.workshop-name p {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    /* background-color: #ffffff; */

    /* justify-content: center;
    vertical-align: middle;
    align-self: center;
    margin: auto 0;
    justify-self: center; */
}

.am > p {
    text-align: center;
}

.pm > p {
    text-align: center;
}


.schedule-grid div.cattail-cubby {
    grid-row: 3 / span 1;
}
.schedule-grid div.cattail-cubby + .bubble {
    grid-column: 2 / span 2;
    margin-right: var(--mar);
    margin-left: var(--mar);
    background-color: var(--roomcolour);
}

.schedule-grid div.large-willow-basket {
    grid-row: 4 / span 1;
}
.schedule-grid div.large-willow-basket + .bubble {
    grid-column: 4 / span 4;
    margin-right: var(--mar);
    margin-left: var(--mar);
    background-color: var(--roomcolour);
}

.schedule-grid div.basket-from-the-garden {
    grid-row: 5 / span 1;
}
.schedule-grid div.basket-from-the-garden + .bubble {
    grid-column: 4 / span 2;
    margin-right: var(--mar);
    margin-left: var(--mar);
    background-color: var(--roomcolour);
}

.schedule-grid div.cedar-bark {
    grid-row: 6 / span 1;
}
.schedule-grid div.cedar-bark + .bubble {
    grid-column: 5 / span 1;
    margin-right: var(--mar);

    background-color: var(--roomcolour);
}

.schedule-grid div.tiny-basket {
    grid-row: 7 / span 1;
}
.schedule-grid div.tiny-basket + .bubble {
    grid-column: 6 / span 1;
    margin-left: var(--mar);
    background-color: var(--roomcolour);
}

.schedule-grid div.woven-bulrush-vessel {
    grid-row: 8 / span 1;
}
.schedule-grid div.woven-bulrush-vessel + .bubble {
    grid-column: 7 / span 1;
        margin-right: var(--mar);
    background-color: var(--roomcolour);
}

.schedule-grid div.open-weave {
    grid-row: 9 / span 1;
}
.schedule-grid div.open-weave + .bubble {
    grid-column: 2 / span 6;
    margin-right: var(--mar);
    margin-left: var(--mar);
    background-color: var(--roomcolour);
}

/* 
.schedulelkjlkjas {
    text-decoration: none;
}

.schedulelkjlkjas:hover {
    text-decoration: underline;
} */


@media (max-width: 500px) {
    #schedule p {
        /* font-size: 0.55rem; */
        margin: 0;
        padding: 0;
    }
}

.container{
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax (100px 1fr));
  }