src/index.css

html,
body {
 margin: 0;
 padding: 0;
 font-family: Arial, sans-serif;
 background-color: var(--background-color);
}

.container {
 margin: 0;
 padding: 0;
 display: flex;
 flex-flow: row wrap;
 justify-content: space-evenly;
}

.task-container {
 background-color: var(--primary-lightgray-color);
 box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.2);
 border-radius: 0.25rem;
 padding: 1rem;
 margin-bottom: 1rem;
}

.task-title {
 font-weight: bold;
 font-size: 1.25rem;
 line-height: 1.5;
 color: var(--text-color);
}

.task-deadline {
 font-size: 0.75rem;
 line-height: 1.25;
 color: var(--text-color);
}

.task-description {
 font-size: 0.875rem;
 line-height: 1.25;
 color: var(--text-color);
}

.task-field {
 width: 100%;
 outline: none;
 background-color: var(--primary-beige-color);
 padding: 0.5rem;
 border: none;
 border-radius: 0.25rem;
 text-align: center;
}

.task-button {
 display: inline-block;
 width: 100%;
 font-size: 1.25rem;
 background-color: var(--primary-color);
 color: #fff;
 border: none;
 cursor: pointer;
 padding: 1rem;
 transition: background-color 0.3s ease;
}

.task-button:hover {
 background-color: var(--primary-color);
 color: #fff;
}