src/styles.module.css

@import "./variables.css";

.container {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 2rem;
}

.task-container {
 border-radius: 0.25rem;
 background-color: #fff;
 padding: 1rem;
}

.task-title {
 font-weight: bold;
 font-size: 1.25rem;
}

.task-deadline {
 font-size: 0.875rem;
}

.task-description {
 font-size: 0.875rem;
}

.task-field {
 width: 100%;
 outline: none;
 background-color: #f5f5f5;
 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: #3498db;
 color: #fff;
 border: none;
 cursor: pointer;
 padding: 1rem;
 transition: background-color 0.3s ease;
}

.task-button:hover {
 background-color: #555;
 color: #fafafa;
}