#statsHeader {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 10%;
    background-color: #242733;
    font-size: 0;
}

#statsHeader .statistic {
    display: inline-block;
    width: 35%;
    height: 100%;
}

.statistic {
    position: relative;
    padding: 0;
    padding-left: 3%;
    margin: 0;
}

.statistic img {
    display: inline-block;
    position: relative;
    top: 20%;
    height: 60%;
    filter: invert();
}

.statistic progress{
    display: inline-block;
    position: relative;
    border-style: none;
    top: 5%;
    left: 5%;
    margin: 0;
    padding: 0;
    background: black;
    height: 40%;
    width: 60%;
}

.statistic progress::-webkit-progress-bar {
    background: black;
}

.statistic progress::-moz-progress-bar { 
    background: green;
}

#streakIndicator {
    padding: 0;
    margin: auto;
    float: right;
    position: relative;
    top: 18%;
    width: 20%;
    height: 100%;
    text-align: center;
    font-size: calc(5 * var(--unit));
    line-height: calc(5 * var(--unit));
    border-left: calc(0.5 * var(--unit)) dashed #35373b;
}

#palWindow {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30%;
    background-color: green;
    overflow: hidden;
}

#palWindow img {
    position: absolute;
    top: -12%;
    width: 100%;
}

#palNameDisplay {
    display: block;
    float: right;
    position: relative;
    text-align: right;
    padding: 1% 2%;
    margin: 2%;
    background-color: rgba(0, 0, 0, 0.3);
    width: fit-content;
}

#mainTaskSection {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15%;
    text-align: center;
    border-bottom: calc(0.5 * var(--unit)) dashed #242733;
}

#mainTaskSection a {
    position: relative;
    top: 30%;
    font-size: calc(11 * var(--unit));
}

#mainTaskButton {
    display: block;
    float: left;
    position: relative;
    top: 20%;
    margin-left: 5%;
    height: 60%;
    width: 20%;
    background-color: green;
    border-radius: calc(3 * var(--unit));
    user-select: none;
}

#mainTaskButton.notFinished:active {
    background-color: rgb(0, 85, 0);
}

#mainTaskButton img{
    display: block;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 5%;
    height: 90%;
    filter: invert();
}

#mainTaskButton.notFinished #mainTaskCheck{
    display: none;
}

#mainTaskButton.finished #mainTaskFlag{
    display: none;
}

.roundButton {
    display: block;
    float: right;
    position: relative;
    top: 30%;
    margin-right: 5%;
    height: 50%;
    width: fit-content;
    aspect-ratio: 1;
    border-radius: 50%;
    user-select: none;
}

.roundButton img{
    display: block;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 18%;
    height: 60%;
    filter: invert();
}

#editTaskButton {
    background-color: rgb(160, 125, 11);
    user-select: none;
}

#editTaskButton:active {
    background-color: rgb(105, 82, 7);
}

.addButton {
    display: block;
    float: right;
    position: relative;
    top: 30%;
    margin-right: 5%;
    height: 50%;
    width: fit-content;
    aspect-ratio: 1;
    background-color: rgb(68, 142, 252);
    border-radius: 50%;
    user-select: none;
}

.addButton img{
    display: block;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 18%;
    height: 60%;
    filter: invert();
}

.addButton:active {
    background-color: rgb(20, 75, 159);
}

#removeTodoButton {
    background-color: red;
    user-select: none;
}

#removeTodoButton:active {
    background-color: darkred;
}

#finishTodoButton {
    display: none;
    background-color: green;
    user-select: none;
}

#finishTodoButton:active {
    background-color: rgb(0, 85, 0);
}

#todoSection {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 45%;
}

#todoHeader {
    margin: 0;
    padding: 0;
    padding-left: 5%;
    text-align: left;
    height: 20%;
    width: 95%;
}

#todoHeader a{
    font-size: calc(11 * var(--unit));
}

input[type="checkbox"] {
    position: relative;
    left: calc(-2 * var(--unit));
    top: calc(1 * var(--unit));
    width: calc(5 * var(--unit));
    height: calc(5 * var(--unit));
    accent-color: green;
}

#todoBody {
    margin: 0;
    padding: 0;
    padding-left: 10%;
    text-align: left;
    height: 80%;
    width: 90%;
    overflow-y: scroll;
}

#todoBody label img {
    display: none;
    position: relative;
    margin-right: 1.6%;
    top: calc(1 * var(--unit));
    left: calc(-2 * var(--unit));
    height: 0.9em;
    filter: invert(1) brightness(50%) sepia(100%) saturate(10000%);
}

#todoBody input:checked + label img{
    filter: invert(1) brightness(50%) sepia(100%) saturate(10000%) hue-rotate(120deg);
}

#todoSection .deleteMode input[type="checkbox"]{
    display: none;
}

#todoSection .deleteMode label img{
    display: inline-block;
}