<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">main {
    padding-bottom: 100px !important;
    box-sizing: border-box;
}

#general-desc {
    grid-column: 1;
    display: grid;
    grid-template-columns: subgrid;
}

.description {
    grid-column: 1;
    margin-bottom: 20px;

    .grade-desc {
        padding-right: 40px;
    }
    
    p {
        margin-bottom: 30px;
    }

    .button {
        /* grid-column: 3; */
        height: 80px;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
}

h2 {
    margin-top: 0;
}

.instructions {
    display: grid;
    grid-template-rows: min-content 1fr;
    transition: grid-template-rows 0.5s ease;

    .collapsible {
        grid-column: 1;
        transition: all 0.5s ease;
        display: grid;
        grid-template-columns: subgrid;
        overflow-y: hidden;
        opacity: 1;
        padding-bottom: 50px;
        box-sizing: border-box;
    }

    .collapsible-header {
        display: flex;
        cursor: pointer;
        grid-column: 1;
        align-items: center;
        padding-right: 10px;
        margin-bottom: 35px;

        &amp;:active, &amp;:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        h2 {
            flex: 1;
            margin: 0;
            padding-right: 20px;
        }

        .collapsible-icon {
            height: 2em;
            rotate: -180deg;
            transition: all ease 0.3s;
        }
    }

    &amp;:not(&amp;:has(.collapsible-header.selected)) {
        grid-template-rows: min-content 0fr;

        .collapsible {
            opacity: 0;
            padding: 0px 0;
        }

        .collapsible-icon {
            rotate: 0deg;
        }
    }

    .steps {
        grid-column: 1;
        display: grid;
        grid-template-columns: subgrid;

        ol {
            grid-column: 1;
            display: grid;
            grid-template-columns: subgrid;
            padding: 0;

            li {
                grid-column: 1;
                display: grid;
                grid-template-columns: subgrid;
                margin-bottom: 10px;
            }

            h3 {
                grid-column: 1;
                margin-top: 0;
                margin-bottom: 4px;
                display: list-item;
                list-style-position: inside;
                font-size: 1.4rem;
                &amp;::marker {
                    color: var(--accent);
                    /* font-size: ; */
                }
            }

            p {
                grid-column: 1;
                margin-bottom: 10px;
            }
        }
    }
}

.note-p {
    padding: 20px;
    border: 2px var(--primary);
    border-style: solid none;

}

.page-title, #general-desc, .description, .instructions {
    grid-column: 1 / -1;
}</pre></body></html>