* {
    font-family: 'Inter', sans-serif;
}

/* color refs: https://designpixie.com/blogs/creative-design-ideas/pastel-color-palettes-with-color-codes */
/* should be opposite color */
/* yellow/orange - purple/blue */
/* red - green */

body {
    margin: auto;
    max-width: 800px;
}

#big-ui {
    border-radius: 25px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* idle color*/
    background-color: #f2ebcc;
    /* background-color: #fcdce1;  */
    /* background-color: #f7dde8; */
    /* on going color */
    /* background-color: #c8ceee; */
    /* background-color: #cde3dc;  */
    /* background-color: #cde5d9; */

    /* this is for the comment box to use as reference */
    position: relative;
}

#pip-message {
    border-radius: 25px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fcdce1;
    font-size: 1.5em;
    font-weight: bold;
}

#big-ui-time {
    text-align: center;
    font-size: 3em;
    font-weight: bold;
}

#big-ui-task,
#big-ui-current-task {
    /* depends on the button height */
    min-height: 36px;
    align-content: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

#big-ui-current-task {
    font-style: italic;
}

#task-done-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
    margin: 8px 0px;
    background-color: #c8ceee;
    overflow: hidden;
    border-radius: 10px;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

#task-done-table th,
td {
    padding: 10px 3px;
}

button {
    all: unset;
    cursor: pointer;
    background-color: #cde5d9;
    margin: 3px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8em;
}

#big-ui-task-title {
    border-radius: 10px;
    padding: 3px 10px;
}

#big-ui-comment-box {
    position: absolute;
    right: 3%;
    z-index: 100;
    padding: 10px;
    /* center it vertically */
    top: 50%;
    transform: translate(0, -50%);

    border-radius: 10px;
    background-color: #f2ebcc;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#big-ui-comment-textarea {
    border-radius: 8px;
    min-width: 100px;
    min-height: 80px;
    resize: none;
}

#big-ui-tracking-elems {
    /* depends on the button height */
    min-height: 36px;
    text-align: center;

    /* use grid, set width, auto columns evenly */
    display: grid;
    min-width: 10%;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

#big-ui-end-button {
    background-color: #fcdce1;
}

#big-ui-small-time {
    font-size: 0.8em;
    font-weight: bold;
}

[hidden] {
    display: none !important;
}