@font-face {
    font-family: Pacifico;
    src: url('../static/pacifico-regular.ttf');
}

h1#title {
    font-family: Pacifico;
}

img#logo {
    width: 5rem;
}

.circular-progress {
    --progress: 0;
    width: 3.5rem;;
    height: 3.5rem;
    border-radius: 50%;
    background: conic-gradient(#0d6efd calc(var(--progress) * 1%), #d9d9d9 0);
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.circular-progress::before {
    content: '';
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 50%;
}

span.task-timeleft {
    position: relative;
    z-index: 99;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    font-size: smaller;
    line-height: 1;
}

p.task-meta {
    font-size: small;
}