style.css

:root {
    --inputPlaceholder: #444e55;
    --inputBackground: #011929;
    --prussianBlue: #023252;
    --inputField: #b767e9;
    --taskElementText: #EEE;
    --headerColor: #048A81;
    --editButtonColor: #9d56c4;
    --deleteButtonColor: #da4160;
    --checkButtonColor: #4dad52;
    --editTextColor: #9d56c4;
}
/*var(--white) to use*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
/*The Above is applied to all elements by default*/

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--prussianBlue);
    color: white;
}

header {
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

header h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--headerColor);
}

#taskForm {
    display: flex;
}

input, button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
}

/*Input for the task*/
#newTaskInput {
    flex: 1 1 0%;
    background-color: var(--inputBackground);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--inputField);
    font-size: 1.25rem;
}

/*Changing placeholder text color for empty field*/
#newTaskInput::placeholder {
    color: var(--inputPlaceholder);
}

/*Styling the add button*/
#newTaskSubmit {
    color: var(--inputField);
    font-size: 1.25rem;
    font-weight: 510;
    background-color: #011929;
    padding: 1rem;
    border-radius: 1rem;
}

/*Lowers opacity on hover*/
#newTaskSubmit:hover {
    opacity: 0.8;
}

/*Lowers opacity even more on click*/
#newTaskSubmit:active {
    opacity: 0.5;
}

main {
    flex: 1 1 0%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.taskList {
    padding: 1rem;
}
.taskList h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--headerColor);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#tasks .task {
    display: flex;
    justify-content: space-between;
    background-color: #000e18;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    opacity: 1;
}

#tasks .task .content {
    flex: 1 1 0%;
}
#tasks .task .content .text {
    color: var(--taskElementText);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}

/*Text color when editing*/
#tasks .task .content .text:not(:read-only) {
    color: var(--editTextColor);
}

#tasks .task .actions {
    display: flex;
    margin: 0 -0.5rem;
}

.task .actions button {
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    /*text-transform: uppercase;*/
}

.task .actions button:hover {
    opacity: 0.8;
}

.task .actions button:active {
    opacity: 0.5;
}

.task .actions .edit {
    color: var(--editButtonColor);
}

.task .actions .delete {
    color: var(--deleteButtonColor);
}

/*new code*/
.task .actions .check {
    color: var(--checkButtonColor);
}