* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
}

:root {
    --sidebar-bg: #1992D4;
    --sidebar-font-color: white;
    --sidebar-font-size: 24px;
    --main-bg: #E2E8F0;
    --header-card-bg: #ffff;
    --buttons-bg: #1992D4;
    --card-content-color: #727272;
    --card-border-color: #EFB329;
    --card-border-radius: 10px;

    --button-font-size: 16px;

    font-family: "Ubuntu", serif;
    font-weight: 500;
}

a {
    text-decoration: none;
}

a:visited {
    color: initial;
}

a:active {
    color: green;
}

button.picture {
    display: block;
    cursor: pointer;
    border: none;
    background-color: #ffff;

    & :active {
        border-bottom: 2px solid green;
    }
}

body {
    background-color: var(--main-bg);
    display: grid;
    height: 100vh;
    grid-template-columns: 1.1fr 5fr;
    grid-template-rows: 1fr 8fr;
}

header {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    background-color: var(--header-card-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1.5rem;
    padding: 1rem 3rem;
    box-shadow: 0px 4px 20px rgb(167, 166, 166);
    z-index: 1;
}

.header-info {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 4rem;

    .searchbar {
        display: grid;
        grid-template-columns: 1fr 20fr;
        gap: 0.7rem;
        grid-column: 1 / 2;

        input {
            grid-column: 2 / -1;
            background-color: var(--main-bg);
            border-radius: 20px;
            border: none;
            padding: 0.4em 1em;
            font-size: medium;
            font-weight: 500;
        }
    }

    .user-info {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 30px;
        grid-column: 2 / 3;

        .user-avatar {
            width: 50px;
            height: 50px;
        }
    }
}

.user-avatar,
.trending-logo {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(115, 48, 222, 0.522);
    border-radius: 50%;

    img {
        width: 85%;
    }
}

.header-panel {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    justify-content: space-between;
    align-items: center;

    .user-greatings {
        display: grid;
        grid-template-columns: 1fr 6fr;
        justify-content: center;
        align-items: center;
        gap: 0.5em;

        .user-avatar {
            width: 100px;
            height: 100px;
        }
    }

    .activity-controls {
        display: flex;
        gap: 2em;

        button {
            font-size: var(--button-font-size);
            font-weight: 600;
            color: white;
            background-color: var(--buttons-bg);
            border: none;
            border-radius: 2em;
            padding: 0.8em 2em;
            cursor: pointer;

            &:active {
                box-shadow: 4px 4px 10px var(--buttons-bg);
            }
        }
    }
}

.sidebar {
    background-color: var(--sidebar-bg);
    grid-row: 1 / 3;

    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 20px 25px;

    .logo-container a,
    .navigation a,
    .helpers a {
        display: flex;
        gap: 1em;
        color: white;

        & :active {
            color: green;
        }

        img {
            border-radius: 10px;
        }
    }

    .logo-container a {
        align-items: center;

        h2 {
            font-size: 28px;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
    }

    .navigation li:not(:last-of-type),
    .helpers li:not(:last-of-type) {
        margin-bottom: 1em;
    }

    p {
        color: var(--sidebar-font-color);
        font-size: var(--sidebar-font-size);
        font-weight: 500;
    }
}

.main {
    background-color: var(--main-bg);
    --top-bot-paddings: 1.5em;
    --left-right-paddings: 1.5em;
    padding: var(--top-bot-paddings) var(--left-right-paddings);

    grid-column: 2 / -1;

    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5em;


    .projects-container {
        display: flex;
        flex-direction: column;
        gap: 1.5em;

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5em;

            .card {
                background-color: var(--header-card-bg);
                border-left: 6px solid var(--card-border-color);
                border-radius: var(--card-border-radius);
                padding: var(--top-bot-paddings) var(--left-right-paddings);
                box-shadow: 1px 3px 10px gray;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                p {
                    margin-top: 0.5em;
                    color: var(--card-content-color);
                }

                .card-controls {
                    display: flex;
                    gap: 1.5em;
                    justify-content: flex-end;
                    margin-top: 1em;
                    margin-bottom: 0.5em;
                }
            }
        }
    }

    .media-container {
        display: flex;
        flex-direction: column;
        gap: 2.5em;

        .announcements-container,
        .trending-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .announcements-container {
            .announcement-panel {
                background-color: var(--header-card-bg);
                border-radius: var(--card-border-radius);
                padding: var(--top-bot-paddings) var(--left-right-paddings);

                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 1em;
                box-shadow: 1px 3px 10px gray;

                .announcement-card:not(:last-child) {
                    padding-bottom: 1.4em;
                    border-bottom: 1px solid var(--card-content-color);
                }

                .announcement-card {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5em;
                    

                    p {
                        color: var(--card-content-color);
                        font-size: 13px;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                                line-clamp: 3; 
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }

        .trending-container {
            .trending-panel {
                background-color: var(--header-card-bg);
                border-radius: var(--card-border-radius);
                padding: var(--top-bot-paddings) var(--left-right-paddings);

                display: grid;
                grid-template-rows: repeat(auto-fit, 1fr);
                gap: 1.5rem;
                box-shadow: 1px 3px 10px gray;
                
                .trending-card {
                    display: flex;
                    gap: 0.7rem;
                    align-items: center;

                    .trending-logo {
                        width: 50px;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .trending-item-info {
                        .description {
                            color: var(--card-content-color);
                        }
                    }
                }
            }
        }
    }
}