task {
    --main-color: var(--icons);

    display: flex;
    flex-direction: column;
    background-color: var(--quote-bg);
    border-inline-start: 0.4em solid var(--task-bg);

    margin-block: 1em;
}

task > task-title {
    display: flex;
    align-items: center;
    font-size: 1.25em;
    font-family: "Aleo", "Lato", "Open Sans", sans-serif;
    font-weight: 400;
    background: var(--task-bg);
    color: white;
    padding: 16px;
}

task-title > points {
    margin-inline-start: auto;
    text-wrap: nowrap;
    user-select: none;
}

task > task-link {
    display: flex;
    padding-inline: 16px;
    padding-block-end: 16px;
}

task > task-link > a {
    padding: 12px 24px;
    background-color: var(--task-bg);
    font-family: "Aleo", "Lato", "Open Sans", sans-serif;
    color: var(--task-bg-text) !important;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}

task > task-link > a:hover {
    background-color: var(--task-bg-hover) !important;
    color: var(--task-bg-hover-text) !important;
}

task > task-title::before {
    content: "";
    display: inline-block;
    width: 42px;
    height: 42px;
    margin-inline-end: 12px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M100.4 417.2C104.5 402.6 112.2 389.3 123 378.5L304.2 197.3L338.1 163.4C354.7 180 389.4 214.7 442.1 267.4L476 301.3L442.1 335.2L260.9 516.4C250.2 527.1 236.8 534.9 222.2 539L94.4 574.6C86.1 576.9 77.1 574.6 71 568.4C64.9 562.2 62.6 553.3 64.9 545L100.4 417.2zM156 413.5C151.6 418.2 148.4 423.9 146.7 430.1L122.6 517L209.5 492.9C215.9 491.1 221.7 487.8 226.5 483.2L155.9 413.5zM510 267.4C493.4 250.8 458.7 216.1 406 163.4L372 129.5C398.5 103 413.4 88.1 416.9 84.6C430.4 71 448.8 63.4 468 63.4C487.2 63.4 505.6 71 519.1 84.6L554.8 120.3C568.4 133.9 576 152.3 576 171.4C576 190.5 568.4 209 554.8 222.5C551.3 226 536.4 240.9 509.9 267.4z'/%3E%3C/svg%3E");
    filter: brightness(0) invert(1);
}

task > handout {
    padding: 16px;
}