:root {
    --bg-magenta: #d000d0;
    --bg-pink: #fce4ec;
    --bg-green: #22c55e;
    --text-white: #ffffff;
    --text-yellow: #facc15;
    --text-black: #000000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    background-color: #f5f5f5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.assignment {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.assignment-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
}

.assignment-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Assignment 1 */
.assignment-1 .assignment-content {
    background-color: var(--bg-magenta);
    flex-direction: column;
    gap: 1.5rem;
}

.btn {
    padding: 1.5rem 3rem;
    border-radius: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2.5rem;
    text-align: center;
    width: 80%;
    max-width: 600px;
}

.btn-frameworks {
    background-color: var(--bg-pink);
    color: var(--text-white);
}

.btn-programming {
    background-color: var(--bg-green);
    color: var(--text-yellow);
    text-transform: none; /* In the screenshot, "Programming" is capitalized but not all-caps */
    font-size: 2.2rem;
}

.btn-tech {
    background-color: var(--bg-pink);
    color: var(--text-black);
    width: auto;
    padding: 1rem 2rem;
    font-size: 1.8rem;
    text-transform: none;
}

/* Assignment 2 */
.assignment-2 .assignment-content {
    background-color: #ffffff;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem;
}

.diagonal-grid {
    display: grid;
    grid-template-columns: repeat(10, 50px);
    grid-template-rows: repeat(10, 50px);
}

.square {
    width: 100%;
    height: 100%;
}

.q1 { background-color: #ff0000; grid-column: 1; grid-row: 1; }
.q2 { background-color: #6a1b9a; grid-column: 2; grid-row: 2; }
.q3 { background-color: #2e7d32; grid-column: 3; grid-row: 3; }
.q4 { background-color: #fdd835; grid-column: 4; grid-row: 4; }
.q5 { background-color: #0d47a1; grid-column: 5; grid-row: 5; }
.q6 { background-color: #37474f; grid-column: 6; grid-row: 6; }
.q7 { background-color: #f8bbd0; grid-column: 7; grid-row: 7; }
.q8 { background-color: #78909c; grid-column: 8; grid-row: 8; }
.q9 { background-color: #ffa726; grid-column: 9; grid-row: 9; }
.q10 { background-color: #d84315; grid-column: 10; grid-row: 10; }

/* Assignment 3 */
.assignment-3 .assignment-content {
    background-color: #f5f5f5;
}

.frame-outer {
    background-color: #333;
    padding: 3rem;
    border-radius: 0.5rem;
}

.frame-inner {
    background-color: #fff;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 300px;
}

.color-block {
    height: 100px;
    width: 100%;
    border-radius: 1rem;
}

.block-top { background-color: #f5f5dc; } /* Beige */
.block-middle { background-color: #b03060; } /* Maroon */
.block-bottom { background-color: #ff3366; } /* Bright red */

/* Assignment 4 */
.assignment-4 .assignment-content {
    background-color: #f0f0f0;
    gap: 5rem;
    padding: 2rem;
    flex-direction: row; /* Two patterns side by side */
}

.pattern-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.diamond-grid-pattern {
    display: grid;
    grid-template-columns: repeat(5, 30px);
    grid-template-rows: repeat(5, 30px);
}

.tail-grid-left, .tail-grid-right {
    display: grid;
    grid-template-columns: repeat(4, 30px);
    grid-template-rows: repeat(3, 30px);
}

.s-red { background-color: #ff0000; }
.s-blue { background-color: #0000ff; }
.s-black { background-color: #000000; }

/* Diamond layout */
.d-top { grid-column: 3; grid-row: 1; }
.d-mid-up-l { grid-column: 2; grid-row: 2; }
.d-mid-up-r { grid-column: 4; grid-row: 2; }
.d-center-l { grid-column: 1; grid-row: 3; }
.d-center-r { grid-column: 5; grid-row: 3; }
.d-mid-low-l { grid-column: 2; grid-row: 4; }
.d-mid-low-r { grid-column: 4; grid-row: 4; }
.d-bottom { grid-column: 3; grid-row: 5; }

/* Tail Left layout */
.tl-1 { grid-column: 1; grid-row: 1; }
.tl-2 { grid-column: 2; grid-row: 2; }
.tl-3 { grid-column: 3; grid-row: 3; }
.tl-4 { grid-column: 4; grid-row: 3; }

/* Tail Right layout */
.tr-1 { grid-column: 4; grid-row: 1; }
.tr-2 { grid-column: 3; grid-row: 2; }
.tr-3 { grid-column: 2; grid-row: 3; }
.tr-4 { grid-column: 1; grid-row: 3; }