| 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; |
| } |
