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

body{
    background-color: hsl(214, 17%, 92%);
    font-family: 'Barlow Semi Condensed', sans-serif;
}

/* Main Styling */

/* Avatars */
.daniel, .johnathan, .jeanette, .patrick, .kira{
    display: flex;
    flex-direction: column;
    background-color: hsl(263, 55%, 52%);
    color: white;
    
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;

    justify-content: center;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;

}

.avatar {
    display: flex;
    flex-direction: row;
}


img{
    border-radius: 25px;
    align-self: center;
    border-color: 5px solid hsl(264, 82%, 80%);
}

.name{
    justify-content: space-around;
    margin: 20px;
    font-weight: 200;
    letter-spacing: 1.2px;
    font-size: 11px;
    font-weight: 500;
}

.name p{
    margin-bottom: 10px;
    margin-top: 10px;
}


h1{
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 19px;
    max-width: 98%;
    align-self: center;
}

q{
    font-weight: 400;
    font-size: 13px;
    max-width: 98%;
    align-self: center;
}

/* Inividual Avatars */
.daniel{
    grid-column-start: 1;
    grid-column-end: 3;
}

.johnathan{
    background-color: hsl(217, 19%, 35%);
}

.jeanette{
    background-color: hsl(0, 0%, 100%);
    color: hsl(224, 10%, 45%);

}

.patrick{
    background-color: hsl(219, 29%, 14%);

    grid-column: span 2;
}

.kira{
    background-color: hsl(0, 0%, 100%);
    color: hsl(224, 10%, 45%);

    grid-column-start: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

/* Grid Function */
.grid-container{
    display: grid;
    grid-template-rows: repeat(4, 270px);
    grid-template-columns: repeat(2, 245px);

    gap: 20px;

    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 50px;
    margin-right: 50px;

    justify-content: center;
}
/* Tablet Responseiveness */
@media screen and (max-width: 1100px) and (min-width: 699px){

    .daniel{
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: 3
    }

    .johnathan{
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start:1;
        grid-column-end: 2;
    }

    .jeanette{
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start:2;
        grid-column-end: 3;
    }

    .patrick{
        grid-row-start:3;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .kira{
        grid-row-start: 4;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

@media screen and (max-width: 700px){
    .grid-container {
        display: flex;
        flex-direction: column;
        margin: 35px;
    }

    .daniel h1, .johnathan h1, .jeanette h1, .patrick h1, .kira h1{
        align-self: flex-start;
    }
}