@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    font-family: 'Roboto', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#container {
    display: grid;
    grid-template: 150px 6fr / 300px 5fr;
    grid-template-areas: "sidebar header"
                         "sidebar main";
    min-height: 100dvh;
    & > * {
        box-sizing: border-box;
    }
    #sidebar {
        grid-area: sidebar;
        background-color: #1d87d8;
        z-index: 3;
        color: #fff;
        #title {
            font-size: 2.2rem;
            margin: 20px 0 0 20px;
            cursor: pointer;
            font-weight: bold;
            &.split {
                display: flex;
                gap: 10px;
                i {
                    flex: 0 0 50px;
                    text-align: center;
                    display: block;
                }
            }
        }
        ul {
            font-size: 1.5rem;
            margin: 50px 30px;
            font-weight: bold;
            i {
                position: relative;
                /* bottom: -1px; */
                display: inline-block;
                /* margin-right: 10px; */
            }
            li {
                margin: 25px 0;
                cursor: pointer;
                .split {
                    display: flex;
                    gap: 10px;
                    i {
                        flex: 0 0 50px;
                        text-align: center;
                        display: block;
                    }
                }
            }
        }
    }
    #header {
        box-shadow: 0 0 6px -2px #000;
        grid-area: header;
        z-index: 2;
        display: grid;
        grid-template: 2fr 3fr / 3fr 2fr;
        padding: 10px 40px;
        gap: 10px;
        & > *:nth-child(2n) {
            justify-self: end;
        }
        #search {
            display: flex;
            align-items: center;
            gap: 10px;
            i {
                display: block;
                position: relative;
                top: -1px;
                font-size: 1em;
            }
            #search-box {
                width: 100%;
                border: none;
                outline: none;
                background-color: #E2E7F1;
                font-size: 1.2em;
                padding: 8px 12px;
                border-radius: 25px;
            }
        }
        #profile {
            display: flex;
            /* align-items: center; */
            width: 100%;
            gap: 28px;
            position: relative;
            align-items: center;
            justify-content: flex-end;
            i {
                font-size: 1.2em;
            }
            img {
                max-height: 50px;
                border-radius: 50%;
                aspect-ratio: 1/1;
                max-width: 50px;
                border: 1px solid #454545;
                filter: invert(0.5);
            }
            #name {
                font-weight: bold;
            }
        }
        #welcome {
            display: flex;
            gap: 12px;
            img {
                /* max-height: 100%; */
                max-width: 68px;
                align-self: stretch;
                aspect-ratio: 1/1;
                display: block;
                /* max-width: 70px; */
                border-radius: 50%;
                border: 1px solid #454545;
                filter: invert(0.5);
            }
            #text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 6px;
                font-weight: bold;
                #hi {
                    font-size: 0.9em;
                }
                #person {
                    font-size: 1.4em;
                }
            }
        }
        #actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            gap: 15px;
            button {
                flex: 0 0 120px;
                display: block;
                background-color: #1D87D8;
                color: #fff;
                border: none;
                outline: none;
                font-size: 1em;
                padding: 10px 7px;
                border-radius: 20px;
                cursor: pointer;
                font-weight: bold;
            }
        }

    }
    #main {
        display: grid;
        grid-template: 1fr 1fr / 6fr 2fr;
        grid-template-areas: "projects announcements"
                             "projects trending";
        background-color: #E2E7F1;
        grid-area: main;
        gap: 20px;
        padding: 30px 18px;
        #projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: calc(auto-fill);
            gap: 18px;
            grid-area: projects;
            .project {
                border-left: 6px solid #F1BC00;
                border-radius: 5px;
                background-color: #fff;
                box-shadow: 3px 3px 6px -5px #000;
                padding: 20px 15px 15px 18px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                height:100%;
                h3 {
                    font-weight: bold;
                }
                span {
                    flex: 1;
                    color: #545454;
                }
                .icons {
                    color: #333333;
                    display: flex;
                    justify-content: flex-end;
                    gap: 10px;
                    font-size: 1.2em;
                    justify-self: flex-end;
                }
                .icons > * {
                    cursor: pointer;
                }
            }
        }
        #announcements {
            grid-area: announcements;
            display: flex;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 3px 3px 6px -5px #000;
            padding: 15px 25px;
            flex-direction: column;
            height:100%;
            box-sizing: border-box;
            justify-content: center;
            .announcement {
                padding: 20px 10px;
                h3 {
                    font-weight: bold;
                }
                span {
                    /* flex: 1; */
                    color: #545454;
                }
                & + & {
                    border-top: 1px solid #dcdcdc;
                }
            }
        }
        #trending {
            grid-area: trending;
            display: flex;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 3px 3px 6px -5px #000;
            padding: 8px;
            flex-direction: column;
            height:100%;
            box-sizing: border-box;
            justify-content: center;
            .trend {
                padding: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                img {
                    max-height: 50px;
                    aspect-ratio: 1/1;
                    display: block;
                    max-width: 50px;
                    border-radius: 50%;
                    border: 1px solid #454545;
                    filter: invert(0.5);
                }
                #description {
                    color: #545454;
                }
            }
        }
    }
}