@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* Primary */
    --Purple-50: hsl(260, 100%, 95%);
    --Purple-300: hsl(264, 82%, 80%);
    --Purple-500: hsl(263, 55%, 52%);
    /* Neutral */
    --White: hsl(0, 0%, 100%);
    --Grey-100: hsl(214, 17%, 92%);
    --Grey-200: hsl(0, 0%, 81%);
    --Grey-400: hsl(224, 10%, 45%);
    --Grey-500: hsl(217, 19%, 35%);
    --Dark-blue: hsl(219, 29%, 14%);
    --Black: hsl(0, 0%, 7%);
}

* {
    margin: 0;
    padding: 0;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 500;
}

body {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--Grey-100);
}


/* Parent  Container - Outside box area */
.container {
    padding: 4.5rem 0;
    width: 81%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* Card Section - Each Card seperate styling */
.card {
    padding: 2rem;
    background: var(--Purple-500);
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 10px;
    box-shadow: 40px 40px 30px 0px var(--Grey-200);
    
    .profile {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    
    .user-img {
        width: 26px;
        border: 2px solid var(--Purple-300);
        border-radius: 50%;
    }
    
    .user-info {
        display: flex;
        flex-direction: column;
    }
    
    .name {
        font-size: 13px;
        color: var(--Purple-50);
        font-weight: 600;
    }
    
    .subject {
        font-size: 20px;
        color: var(--White);
        font-weight: 600;
    }
    
    .verify {
        font-size: 11px;
        margin-top: 2px;
        color: var(--Purple-50);
    }
    
    .brief {
        font-size: 13px;
        line-height: 1.38;
        margin-top: 3px;
        color: var(--Purple-50);
    }
}

.second {
    background-color: var(--Grey-500);
    
    .user-img { border: 2px solid var(--Grey-400); }
    
    .name { color: var(--Grey-100); }
    
    .verify, .brief { color: var(--Grey-200); }
}

.third, .fifth {
    background-color: var(--White);
    
    .user-img { border: 2px solid var(--Grey-100); }
    
    .name { color: var(--Grey-500); }
    
    .subject { color: var(--Grey-500); }
    
    .verify, .brief { color: var(--Grey-400); }
}

.fourth {
    background-color: var(--Dark-blue);
    
    .user-img { border: 2px solid var(--Purple-500); }
    
    .name { color: var(--Grey-100); }
    
    .subject { color: var(--Grey-100); }
    
    .verify, .brief { color: var(--Grey-200); }
}


/* Individual Element style */
.coder {
    color: var(--Dark-blue);
    padding: 20px 0 2rem;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
}


/* Responsive Design - Media Queries */
@media screen and (min-width:500px) {
    .container { width: 400px; }
}

@media screen and (min-width:900px) {
    .container {
        width: 800px;
        display: grid;  
        grid-template: repeat(3, auto), repeat(2, 1fr);
    }
    
    .first { grid-area: 1 / 1 / 3 / 2; }
    .second { grid-area: 1 / 2 / 2 / 3; }
    .third { grid-area: 2 / 2 / 3 / 3; }
    .fourth { grid-area: 3 / 1 / 4 / 2; }
    .fifth { grid-area: 3 / 2 / 4 / 3; }
}

@media screen and (min-width:1120px) {
    .container {
        width: 1110px;
        display: grid;
        grid-template: repeat(2, auto) / repeat(4, 1fr);
        padding: 2rem 0 0;
    }
    
    .first {
        background: url("./assets/images/bg-pattern-quotation.svg") no-repeat, var(--Purple-500);
        background-position: top right 60px;
        grid-area: 1 / 1 / 2 / 3;
    }
    .second { grid-area: 1 / 3 / 2 / 4; }
    .third { grid-area: 2 / 1 / 3 / 2; }
    .fourth { grid-area: 2 / 2 / 3 / 4; }
    .fifth { grid-area: 1 / 4 / 3 / 5; }
}