#dynamic-shape {
    width: 0;
    height: 0;
    border-radius: 50%;

    top: 50%;
}

#header-text {
    transform: translateY(100%);
    opacity: 0;
}

#task-input {
    display: none;
    opacity: 0;
    background-color: var(--input-background-color);
    transition: background-color 700ms;
    padding: var(--font-size);
}

#task-input:read-only {
    background-color: var(--background-color);
}

#hints-list {
    display: none;
    opacity: 0;
}

#todo-table,
#focus-table {
    display: none;
    opacity: 0;
}

#focus-timer {
    display: none;
    opacity: 0;
}

#timer-negative {
    display: none;
    opacity: 0;
    color: red;
}