* {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.Q1grid {
    background-color: #ddd;
    padding: 20px;
    width: 800px;
    height: 400px;
    display: grid;
    margin: 2px auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px 340px;
    gap: 10px;
    padding: 10px;
}

.Q1grid div {
    background-color: #607d8b;
    margin: 0;
    position: relative;

}

.Eone::after {
    content: "Element 1";
    color: white;
    position: absolute;
    right: 80px;
    top: 13px;
    font-weight: 600;
    font-size: 22px;
}

.Etwo::after {
    content: "Element 2";
    color: white;
    position: absolute;
    right: 80px;
    top: 13px;
    font-weight: 600;
    font-size: 22px;
}

.Ethree::after {
    content: "Element 3";
    color: white;
    position: absolute;
    right: 80px;
    top: 13px;
    font-size: 22px;
    font-weight: 600;
}

.Efour::after {
    content: "Element 4";
    color: white;
    font-weight: 600;
    position: absolute;
    right: 80px;
    top: 148px;
    font-size: 22px;
}

.Efive::after {
    content: "Element 5";
    color: white;
    position: absolute;
    right: 80px;
    font-weight: 600;
    top: 148px;
    font-size: 22px;
}

.Esix::after {
    content: "Element 6";
    color: white;
    font-weight: 600;
    position: absolute;
    right: 80px;
    top: 148px;
    font-size: 22px;
    /* it's better if you choose display flex then centerise them */
}

/* Question 2 */
.Q2layout {
    padding: 0;
    width: 100%;
    height: 600px;
    display: grid;
    margin-top: 3px;
    grid-template-rows: 50px auto 50px;
    grid-template-areas:
        "head head head head head head head head head head"
        "Sec Sec Sec Sec Sec Sec Sec sid sid sid "
        "foot foot foot foot foot foot foot foot foot foot";
}

header {
    grid-area: head;
    background-color: #03a9f4;
    color: white;
}

section {
    grid-area: Sec;
    background-color: #ff5722;
    color: white;
}

aside {
    grid-area: sid;
    background-color: #607d8b;
    color: white;
}

footer {
    grid-area: foot;
    color: white;
    background-color: #009688;
}


/* Question 3 */

.Q3grid {
    background-color: #ddd;
    padding: 20px;
    width: 800px;
    height: 400px;
    margin: 3px auto;
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: 1fr auto;
    padding: 10px;
    gap: 10px;
}

.Q3grid div {
    background-color: #403f3f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Question 4 */

.Q4grid {
    background-color: #ddd;
    padding: 20px;
    width: 800px;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    padding: 20px;
    gap: 20px;
    margin: 5px auto;
}

.Q4grid div {
    background-color: #2196f3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: large;
}

.Q4one {
    order: 8;
    grid-column: span 3;
}

.Q4two {
    order: 2;
    grid-column: span 2;
}

.Q4three {
    order: 3;
}

.Q4four {
    order: 4;
}

.Q4five {
    order: 5;
    grid-area: span 3 / span 2;
}

.Q4six {
    order: 6;
}

.Q4seven {
    order: 7;
}

.Q4eight {
    order: 1;
    grid-column: span 3;
}

/* Question 5 */
.Q5grid {
    background-color: #ddd;
    padding: 20px;
    width: 800px;
    height: 400px;
    margin: 10px auto;
    display: grid;
    padding: 20px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
}

.Q5grid div {
    background-color: #e91e63;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-weight: bold;
}


/* Question 6 */
.Q6grid {
    background-color: #eee;
    width: 70%;
    padding: 20px;
    gap: 20px;
    margin: 10px auto;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    font-size: small;
}

#card {
    background-color: white;
    padding: 10px;
    position: relative;
}

#card::after {
    content: "";
    background-color: #ff5722;
    width: inherit;
    height: 1px;
    position: absolute;
    top: 0;
}

.name {
    font-weight: bold;
}

.job {
    color: gray;
}

.OM {
    grid-column: span 2;
}

.SN {
    grid-row: span 3;
}

.MI {
    grid-row: span 2;
}

.MM {
    grid-column: span 2;
}

.EE {
    grid-column: span 2;
}

.SN,
.MM,
.IS {
    background-color: black !important;
    color: white;
}