/* CSS stylesheet */
* {
    --content-background-color: #e2e8f0;
    --dashboard-background-color: #0ea5e9;
    --card-color:white;
    --card-border-color:orange;
    --content-font-color: rgb(75,75,75);
    margin:0;
    padding:0;
}

/* overall page sectioning and font family*/
body {
    height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 150px 1fr;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.dashboard.section {
    padding:12px;
    padding-left:0;
    grid-row: 1/3;
    background-color: var(--dashboard-background-color);
}

.content.section {
    background-color: var(--content-background-color);
}

/* dashboard section */
.dashboard.section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* this is the 3 groups of dashboard options */
.dashboard.section>div {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 40px;
    color: white;
}

/* this is each pair of icon + dashboard option */
.dashboard.section>div>div {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 2px;
    align-items: center;
}

.dashboard.section .logo h1 {
    font-size: 25px;
}

.dashboard.section>div>div>p {
    font-weight: bold;
}

.logo img {
    height: 40px;
    justify-self: center;
}

.main-dashboard img,
.settings-dashboard img {
    height: 20px;
    justify-self: center;
}

/* changing SVG to white */
.dashboard.section img {
    filter: invert(100%) sepia(14%) saturate(2%) hue-rotate(88deg) brightness(115%) contrast(100%);
}

/* header section*/
.header.section {
    padding: 10px 20px;
    display: grid;
    grid-template-rows: 2fr 3fr;
    box-shadow: 2px 2px 5px rgb(155, 155, 155);
    z-index: 10;

    /* top side of header */
    & .header-top {
        display: flex;
        justify-content: space-between;
        gap: 30px;
    }

    /* topleft side of header */
    & .search-bar {
        flex: 1 1 100px;
        max-width: 800px;
        display: grid;
        grid-template-columns: 25px 1fr;
        align-items: center;
        gap: 10px;
    }

    & .search-bar input#image {
        height: auto;
    }

    & input[type=text] {
        width: 100%;
        padding: 6px 3px;
        border-radius: 15px;
        background-color: var(--content-background-color);
        border: none;
    }

    /* topright side of header */
    & .profile-area {
        display: grid;
        grid-template-columns: 20px 40px minmax(max-content,1fr);
        justify-content: end;
        align-items: center;
        gap: 15px;
    }

    & .profile-area img {
        height: auto;
    }

    & .profile-area img.icon {
        background-color: rgb(122, 255, 200);
        border-radius: 100%;
        height: auto;
        width: 100%;
        aspect-ratio: 1/1;
    }

    & .profile-area p {
        font-weight: bold;
    }

    /* bottom side of header */
    & .header-bottom {
        display: grid;
        grid-template-columns: 1fr 250px;
        grid-template-rows: 1fr;
    }

    /* bottomleft of header */
    & .intro-area {
        display: grid;
        grid-template-columns: 50px 1fr;
        grid-template-rows: 1fr 1fr;
        justify-content: start;
        align-items: center;
        gap: 0px 10px;
    }

    & .intro-area .welcome-text {
        grid-template-rows: 1/2;
        font-weight:bold;
        font-size:small;
        align-self:end;
    }

    & .intro-area .username-text {
        grid-column: 2/3;
        grid-row: 2/3;
        font-weight: bold;
        align-self:start;
    }

    & .intro-area img {
        background-color: rgb(122, 255, 200);
        border-radius: 100%;
        height: 50px;
        width: auto;
        aspect-ratio: 1/1;
        grid-row: 1/3;
    }

    /* bottomright of header */
    & .upload-button-area{
        justify-self: end;
        display:grid;
        grid-template-columns: repeat(3, 70px);
        justify-content: space-around;
        align-items: center;
        gap: 20px;
    }

    & .upload-button-area button{
        background-color: var(--dashboard-background-color);
        color: white;
        border-radius: 25px;
        border: none;
        padding: 7px;
    }
}

/* main content area */
.content.section{
    display:grid;
    grid-template-columns: 3fr minmax(240px,1fr);
    grid-template-rows: 1fr 1fr;
    padding:13px;
    gap: 15px;

    /* add shadow to all cards in content section */
    & .card{
        box-shadow: 2px 2px 5px rgb(155, 155, 155);
    }

    /* project section area */
    & .projects.section{
        grid-row: 1/3;
        display:grid;
        grid-template-rows: 20px;
        grid-auto-rows: 200px;
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); 
        gap: 15px;
    }

    & .projects.section .title{
        grid-column: 1 / -1;
        font-size: 18px;
    }

    & .projects.section .card{
        background-color: var(--card-color);
        border-radius: 8px;
        border-left: 8px solid var(--card-border-color);
        padding: 20px;
        display:grid;
        grid-template-columns: 1fr 20px 20px 20px;
        grid-template-rows: 30px 1fr 30px;
        gap: 0 10px;
    }

    & .projects.section .card h3{
        grid-column: 1/5;
        align-self: end;
        font-size: 18px;
    }

    & .projects.section .card p{
        grid-column: 1/5;
        font-size:14px;
        color: var(--content-font-color);
    }

    & .projects.section .card img{
        grid-row: 3/4;
    }

    & .projects.section .card .star{
        grid-column:2/3;
    }
    & .projects.section .card .eye{
        grid-column:3/4;
    }
    & .projects.section .card .arrow{
        grid-column:4/5;
    }

    & .projects.section .card .icon{
        height: 100%;
        width: 100%;
    }

    /* announcement area */
    .announcements.section {
        display:grid;
        grid-template-rows: 20px 1fr;
        gap: 15px;
    }

    .announcements.section .title{
        font-size: 18px;
    }

    .announcements.section .card{
        background-color: var(--card-color);
        border-radius: 8px;
        padding: 20px;
        display:grid;
        grid-template-rows: auto auto auto;
        gap: 2px;
    }

    .announcements.section .card h4{
        font-size: 14px;
    }

    .announcements.section .card p{
        font-size: 12px;
        color: var(--content-font-color);
    }


    /* trending area */
    .trending.section {
        display:grid;
        grid-template-rows: 20px 1fr;
        gap: 15px;
    }

    .trending.section .title{
        font-size: 18px;
    }

    .trending.section .card{
        background-color: var(--card-color);
        border-radius: 8px;
        padding: 20px;
        display:grid;
        grid-template-columns: auto 1fr;
        grid-auto-rows: 1fr;
        gap: 0 10px;
    }

    .trending.section .card img{
        grid-row: span 2;
        height:50px;
        width:auto;
        background-color: rgb(122, 255, 200);
        border-radius: 100%;
        align-self:center;
    }
    .trending.section .card img:nth-of-type(1){
        background-color: bisque;
    }
    .trending.section .card img:nth-of-type(3){
        background-color: red;
    }
    .trending.section .card img:nth-of-type(4){
        background-color: black;
    }

    .trending.section .card .name{
        font-size:14px;
        align-self:end;
    }

    .trending.section .card .project{
        font-size: 14px;
        align-self:start;
        color: var(--content-font-color);
    }
}