@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto-Regular.woff2') format('woff2'),
         url('./assets/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --system-ui: system-ui, 
                 "Segoe UI", 
                 Roboto, 
                 Helvetica, 
                 Arial, 
                 sans-serif, 
                 "Apple Color Emoji", 
                 "Segoe UI Emoji", 
                 "Segoe UI Symbol",
                 "Noto Color Emoji";
}

:root.light-theme {
    --primary-color: #459cce;
    --primary-color-hover: #6ab3dd;
    --secondary-color: #e6c844;
    
    --font-color: #202020;
    --lighter-font-color: #3b3b3b;
    --bg-color-1: #fff;
    --bg-color-2: #e8eff7;
    --shadow-color: #d8d8d8;
    --img-border-color: rgba(60, 60, 60, 0.25);
}

:root.dark-theme {
    --primary-color: #3f5f74;
    --primary-color-hover: #44728f;
    --secondary-color: #a08a2b;

    --font-color: #fff;
    --lighter-font-color: #e2e2e2;
    --bg-color-1: #525252;
    --bg-color-2: #383838;
    --shadow-color: #303030;
    --img-border-color: rgba(120, 120, 120, 0.25);
}

body {
    font-family: 'Roboto', var(--system-ui);
    letter-spacing: 0.2px;
    color: var(--font-color);
}

.container {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 200px 1fr;
    grid-template-areas: 
        "sidebar header"
        "sidebar main-content";
}

#sidebar {
    grid-area: sidebar;
    background-color: var(--primary-color);
    padding: 32px;
    color: #fff;
    display: grid;
    grid-template-rows: 4rem 16rem 1fr;
    align-items: start;
    gap: 32px;
    z-index: 2;

    .navigation {
        display: grid;
        grid-template-columns: 2rem 1fr;
        column-gap: 16px;
        grid-auto-rows: 40px;
        align-items: center;
        font-size: 1.15rem;
        font-weight: 600;

        .icon {
            width: 1.75rem;
            cursor: pointer;
        }

        span {
            cursor: pointer;
        }
    }
}

#branding {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 8px;
    
    img {
        width: 50px;
    }

    span {
        font-size: 2rem;
        font-weight: 600;
    }
}

#header {
    grid-area: header;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    background-color: var(--bg-color-1);
    box-shadow: 0 4px 5px var(--shadow-color);
    z-index: 1;
    padding: 8px 64px 16px 64px;
    text-wrap: nowrap;
}

#header-top {
    display: grid;
    grid-column: 1 / -1;
    grid-row-start: 1;
    grid-template-columns: 40px 1fr 40px 40px 60px auto;
    align-items: center;
    justify-items: center;
    column-gap: 16px;

    .search-bar {
        background-color: #dee5ec;
        border-radius: 16px;
        height: 2rem;
        width: max(400px, 60%);
        border: none;
        padding: 0 16px;
        justify-self: start;
    }

    .search-bar:focus {
        outline: 2px solid #888888;
    }

    .icon {
        width: 28px;
        cursor: pointer;
    }

    .user-name {
        font-size: 1.25rem;
        font-weight: 600;
        padding: 0 16px;
        justify-self: start;
    }
}

.user-image {
    border-radius: 50%;
    border: 2px solid var(--img-border-color);
}

#user-info {
    display: grid;
    grid-column-start: 1;
    grid-row-start: 2;
    grid-template-columns: 90px 1fr;
    grid-template-rows: 40px 40px 20px;
    align-items: center;
    gap: 0 24px;
    position: relative;
    background-color: inherit;

    .user-image {
        grid-column-start: 1;
        grid-row: 1 / -1;
    }

    .status-icon {
        position: absolute;
        top: 5px;
        left: 72px;
    }

    .status {
        font-size: 0.9rem;
        color: var(--lighter-font-color);
    }

    .text {
        font-size: 1.15rem;
        font-weight: 600;
        align-self: end;
    }

    .user-name {
        font-size: 1.5rem;
        font-weight: 600;
        align-self: start;
    }
}

#buttons {
    display: grid;
    grid-column-start: 2;
    grid-row-start: 2;
    grid-template-columns: 150px 150px 150px;
    align-items: center;
    justify-items: center;
    justify-content: end;
    padding-top: 24px;

    button {
        border-radius: 32px;
        padding: 8px 36px;
        border: none;
        background-color: var(--primary-color);
        color: #fff;
        font-weight: 600;
        cursor: pointer;
        
        &:hover {
            background-color: var(--primary-color-hover);
        }
    }
}

#main-content {
    grid-area: main-content;
    background-color: var(--bg-color-2);
    padding: 32px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    grid-template-areas: 
        "projects trending"
        "projects announcements";

    .title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 12px;
    }
}

#projects {
    grid-area: projects;
}

#projects .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;

    .card {
        display: grid;
        grid-template-rows: 20px 1fr 30px;
        gap: 8px;
        padding: 32px 16px;
        border-radius: 8px;
        border-left: 8px solid var(--secondary-color);

        .project-name {
            font-size: 1.2rem;
            font-weight: 600;
        }

        .description {
            color: var(--lighter-font-color);
            font-size: 1rem;
        }

        .options {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 30px;
            gap: 16px;
            align-items: center;
            justify-items: center;
            justify-content: end;

            .icon {
                cursor: pointer;
            }
        }
    }
}

#announcements {
    grid-area: announcements;
}

#announcements .content {
    display: grid;
    padding: 32px;
    border-radius: 8px;
    gap: 24px;

    .announcement {
        display: grid;

        .title {
            font-size: 1rem;
            margin-bottom: 4px;
        }

        .text {
            font-size: 0.9rem;
            color: var(--lighter-font-color);
        }
    }    

    .horizontal-line {
        height: 2px;
        width: auto;
        background-color: #dadada;
    }
}

#trending {
    grid-area: trending;
}

#trending .content {
    display: grid;
    gap: 32px;
    padding: 24px;
    border-radius: 8px;
    
    .user {
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-rows: 30px 30px;
        align-items: center;
        gap: 0 16px;
        position: relative;
        background-color: inherit;
        
        .user-image {
            grid-column-start: 1;
            grid-row: 1 / -1;
        }

        .status-icon {
            position: absolute;
            top: 0px;
            left: 45px;
            font-size: 0.9rem;
        }

        .nickname {
            font-weight: 600;
            align-self: end;
        }

        .featured-project {
            align-self: start;
            color: var(--lighter-font-color);
        }
    }
}

#projects .card,
#announcements .content,
#trending .content {
    background-color: var(--bg-color-1);
    box-shadow: 0 4px 5px var(--shadow-color);
}