* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(180deg, #ff6b6b 0%, #ee5a6f 100%);
color: #2d3436;
line-height: 1.8;
}
/* TASK BOARD HEADER */
.taskboard-header {
background: linear-gradient(135deg, #4834d4 0%, #686de0 100%);
padding: 55px 30px;
text-align: center;
border-bottom: 10px solid #f9ca24;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}
.taskboard-header h1 {
font-size: 2.7em;
color: #fff;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
}
/* CHECKLIST CONTAINER */
.checklist-container {
max-width: 1000px;
margin: 0 auto;
padding: 60px 30px;
}
/* INTRO CARD */
.intro-card {
background: #fff;
padding: 40px;
margin-bottom: 40px;
border-radius: 15px;
border: 5px solid #4834d4;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}
.intro-card h2 {
font-size: 2em;
color: #4834d4;
margin-bottom: 20px;
font-weight: 800;
}
.intro-card p {
font-size: 1.1em;
color: #2d3436;
margin-bottom: 1.5em;
text-align: justify;
}
.intro-card p:last-child { margin-bottom: 0; }
/* CHECKLIST ITEMS */
.checklist-item {
background: #fff;
padding: 35px 40px 35px 80px;
margin-bottom: 25px;
border-radius: 12px;
border-left: 8px solid #ff6b6b;
position: relative;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
}
.checklist-item:hover {
transform: translateX(10px);
}
/* CHECKBOX ICON */
.checklist-item::before {
content: '✓';
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: #ff6b6b;
color: #fff;
font-size: 1.8em;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
.checklist-item:nth-child(even)::before {
background: #4834d4;
box-shadow: 0 4px 15px rgba(72, 52, 212, 0.4);
}
.checklist-item:nth-child(3n)::before {
background: #f9ca24;
box-shadow: 0 4px 15px rgba(249, 202, 36, 0.4);
}
.checklist-item h3 {
font-size: 1.7em;
color: #4834d4;
margin-bottom: 18px;
font-weight: 800;
}
.checklist-item p {
font-size: 1.08em;
color: #2d3436;
margin-bottom: 1.4em;
text-align: justify;
line-height: 1.85;
}
.checklist-item p:last-child { margin-bottom: 0; }
.checklist-item a {
color: #4834d4;
text-decoration: none;
font-weight: 800;
border-bottom: 3px solid #4834d4;
transition: all 0.3s;
}
.checklist-item a:hover {
color: #686de0;
border-bottom-color: #686de0;
}
/* COMPLETION FOOTER */
.completion-footer {
background: linear-gradient(135deg, #686de0 0%, #4834d4 100%);
padding: 50px 30px;
text-align: center;
border-top: 10px solid #f9ca24;
margin-top: 60px;
}
.completion-footer h2 {
font-size: 2.4em;
color: #fff;
font-weight: 900;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.taskboard-header h1 { font-size: 2.1em; }
.checklist-container { padding: 40px 20px; }
.intro-card { padding: 30px 25px; }
.intro-card h2 { font-size: 1.7em; }
.checklist-item {
padding: 30px 30px 30px 70px;
}
.checklist-item::before {
width: 35px;
height: 35px;
font-size: 1.5em;
left: 15px;
}
.checklist-item h3 { font-size: 1.5em; }
}