img {
    width: 50px;
    height: auto;
}

:root {
    --blue-background: #00bbf0;
    --grey-background: #EEEEEE;
    --yellow-background: #fdb44b;
    --lighter-text: #454545;

    --pfp-image: 50%;
    --pfp-image-small: 50px;
    --pfp-image-large: 70px;
    --bold: 600;
    --icon-size: 30px;
}

* {
    /* border: 1px solid red; */
    padding: 0px;
    margin: 0px;

    box-sizing: border-box;
    font-family: 'Roboto';
}

.container {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

/* remove all ul bullet point */
ul {
    list-style-type: none;
}

/* HEADER SECTION */
.header {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;

    padding: 10px 40px;
    margin: 10px 0px;
    box-shadow: 0px 8px 5px gray;
}

/* top section */
.header .top-section {
    display: grid;
    grid-template-columns: 2fr 1fr;

    /* gap between top section and bottom section */
    margin-bottom: 20px;
    /* gap between right and left section */
    gap: 24px;
}

/* bottom section */
.header .bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Header section: Top Section */
/* top and bottom section share the same column logic and are flex box for their children*/
.header .top-section .left-section,
.header .bottom-section .left-section {
    grid-column: 1 / span 1;
    display: flex;
}
.header .top-section .right-section,
.header .bottom-section .right-section {
    grid-column: 2 / span 1;
    display: flex;
}

/* left section of top section header have two children img and search input */
/* gap between search bar icon and search bar*/
.header .top-section .left-section {
    gap: 16px;
    align-items: center;
}
/* top section images are same size  except pfp*/
.header .top-section .left-section img,
.header .top-section .right-section img {
    width: var(--icon-size);
}
.header .top-section .left-section .search-input {
    background-color: var(--grey-background);
    padding: 8px 10px;
    border-radius: 16px;
    border: none;
    width: 100%;
}

/* right section of top section header have 2 image and one text */
.header .top-section .right-section {
    gap: 24px;
    align-items: center;
    justify-content: flex-end;
}
/* pfp image is round and larger*/
.header .top-section .right-section .pfp {
    border-radius: var(--pfp-image);
    width: var(--pfp-image-small);
}
/* text should be bold */
.header .top-section .right-section .text {
    font-weight: var(--bold);
}
   
/* Header Section: Bottom Section */
/* bottom section left section have image (pfp) and greeting section side by side */
.header .bottom-section .left-section {
    align-items: center;
    gap: 16px;
}
/* image pfp is large */
.header .bottom-section .left-section img {
    width: var(--pfp-image-large);
    border-radius: var(--pfp-image);
}

/* upper text is small and lower text is large for greeting section */
/* gap between two */
.header .bottom-section .left-section .greeting-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.header .bottom-section .left-section .greeting-section .greeting-text-small {
    font-size: 14px;
    font-weight: var(--bold);
}
.header .bottom-section .left-section .greeting-section .greeting-text-large {
    font-size: 24px;
    font-weight: var(--bold);
}

/* left section have three same size button */
.header .bottom-section .right-section {
    justify-self: flex-end;
}
/* new, upload, share button have gap between */
.header .bottom-section .right-section ul{
    display: flex;
    gap: 24px;
    align-items: center;
}
/* each button is blue backgrounda and white font*/
.header .bottom-section .right-section button {
    background-color: var(--blue-background);
    padding: 12px 28px;
    border-radius: 24px;
    color: white;
    font-size: 16px;
    border: none;
    font-weight: var(--bold);
}

.header .bottom-section .right-section button:hover {
    background:  rgb(0 187 240 / 0.5);
    color: black;
}

/* DASHBOARD SECTION */
.dashboard {
    grid-column: 1 / 2;
    grid-row: 1 / 4;

    background-color: var(--blue-background);
    padding: 10px;
}

/* all dashboard icon and text should be side by side */
.dashboard-top,
.dashboard-middle ul li,
.dashboard-end ul li {
    display: flex;
    color: white;
    align-items: center;
    font-size: 18px;
    font-weight: var(--bold);
    gap: 18px;
}

/* all dashboard image except dashboard icon and text (larger) should be same size */
.dashboard-top img {
    width: 60px;
}
.dashboard-top .icon-text {
    font-size: 32px;
}
.dashboard-middle img,
.dashboard-end img {
    width: 30px;
}

/* dashboard top, middle and end have some gap in between */
.dashboard-top {
    margin-bottom: 20px;
    gap: 4px;
}
.dashboard-middle {
    margin: 40px 0px;
    padding-left: 25px;
}
.dashboard-end {
    margin: 60px 0px;
    padding-left: 25px;
}

/* gap between ul */
.dashboard-middle ul,
.dashboard-end ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content {
    grid-column: 2 / 3;

    background-color: var(--grey-background);
    display: grid;
    grid-template-columns:  3fr 1fr;
    /* have gap and margin in between three grids */
    gap: 20px;
    padding: 20px;
    grid-auto-rows: min-content;
}

/* place the project trending and annoucement nicely */
/* have white color background */
.project .project-container .project-card, 
.announcement .section-container, 
.trending .trending-container{
    background-color: white;
}
/* title text */
.project > .text, 
.announcement > .text,
.trending > .text {
    font-weight: var(--bold);
    font-size: 18px;
    margin-bottom: 10px;
}
.content .trending {
    grid-column: 2 / span 1;
}

/* project card have gap in between */
.project .project-container {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.project .project-container .project-card {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 20px;
    /* radius for top right and bottom right */
    border-radius: 16px;

    /* shadow */
    box-shadow: 0px 8px 5px grey;
}
.yellow-border {
    background-color: var(--yellow-background);
    border-radius: 16px 0px 0px 16px;
}

/* inside project description  */
.project-description {
    flex: 1;
    padding: 20px;
}
/* all image is same size and at the end */
.card-img {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0px 0px 0px;
    gap: 24px;
}
.card-img img {
    width: 30px;
}
/* title should be large and bold */
.project-description .title {
    font-size: 22px;
    font-weight: var(--bold);
    margin-bottom: 10px;
}
/* text should be smaller and lighter color */
.project-description .text {
    font-size: 12px;
    color: var(--lighter-text);
}

/* ANNOUNCEMENT section and TRENDING section 
same format*/
.content-left-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.section-container, 
.trending-container{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 16px;

    box-shadow: 0px 8px 5px grey;
}

/* add line under each section */
/* and make sure there is margin between line and each title */
.section-container .section {
    border-top: 1px solid #ccc;
    margin-top: 15px;
}
.section-container .section .title {
    margin-top: 15px;
}

/* title larger description smaller */
.section-container .section .title,
.section-container .section-1 .title{
    font-weight: var(--bold);
}
.section-container .section .text,
.section-container .section-1 .text{
    font-size: 10px;
    color: var(--lighter-text);
}

/* TRENDING section */
/* pfp and pfp name side by side*/
.trending-container {
    gap: 10px;
}
.trending-container .section {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* pfp is round */
.trending-container .section img {
    border-radius: var(--pfp-image);
    width: var(--pfp-image-small);
}
/* text is small and detail is lighter color*/
.trending-container .section .text-container {
    font-size: 14px;
}
.trending-container .section .text-container .pfp-detail {
    margin-top: 3px;
    color: var(--lighter-text);
}