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

:root {
    --blue: #1992d4;
    --white: #ffffff;
    --gray: #e2e8f0;
    --orange: #efb52f;

    --card-para-color: #555555;

    --sidebar-width: max(230px, 15vw);
    --header-gap: 20px;

    --main-card-shadow: 4px 8px 8px #00000061;
    --main-gap: 20px;
    --main-card-padding: 20px;
    --main-card-border-radius: 8px;
    --main-section-title-space: 10px;
}

html * {
    font-family: Roboto, Arial, serif;
}

body {
    display: grid;
    grid-template: auto 1fr / var(--sidebar-width) 4fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";

    height: 100vh;
}

.header {
    grid-area: header;

    display: grid;
    grid-template: 1fr 1fr / 3fr 1fr;
    gap: 5px;

    padding: 20px 40px;
    background-color: var(--white);
    position: relative;
    z-index: 999;
    box-shadow: 2px 4px 16px rgba(0,0,0,.06);
}

.header-search label{
    display: grid;
    grid-template-columns: max-content max(200px, 50%);
    gap: var(--header-gap);
    align-items: center;
}

.header-search input {
    appearance: none;
    border: none;
    background-color: var(--gray);
    border-radius: 25px;
    padding: 5px 20px;
}

.header-search input:focus {
    outline: 2px solid gray;
    outline-offset: 10px;
}

.header-user-info {
    justify-self: end;

    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: var(--header-gap);
    align-items: center;
}

.header-user-info img {
    height: 1.7rem;
}

.header-user-info .user-name {
    font-weight: bold;
}

.header-user-welcome {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: var(--header-gap);
    align-items: center;
}

.greeting {
    font-size: 0.9rem;
    font-weight: bold;
}

.greeting .full-user-name {
    font-size: 1.3rem;
}

.header-user-welcome img {
    height: 55px;
}

.header-user-actions {
    justify-self: end;

    display: grid;
    grid-template: 1fr / repeat(3, min-content);
    gap: var(--header-gap);
    align-items: center;
}

.header-user-actions button {
    background-color: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 25px;
    font-weight: bold;
    padding: 6px 32px;
}

.sidebar {
    grid-area: sidebar;

    display: grid;
    grid-template-rows: repeat(3, min-content);
    gap: 50px;

    padding: 20px;
    background-color: var(--blue);
    color: var(--white);
    font-weight: bold;
}

.sidebar-header,
.sidebar li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sidebar-header {
    gap: 10px;
}

.sidebar li {
    font-size: 1.2rem;
}

.sidebar img {
    height: 1.2rem;
}

.sidebar-header img {
    height: 2.2rem;
}

.sidebar ul {
    display: grid;
    gap: 20px;

    list-style-type: none;
    padding: 0;
}

.sidebar :link,
.sidebar :visited {
    text-decoration: none;
    color: var(--white);
}

.main {
    grid-area: main;

    display: grid;
    grid-template: 1fr 1fr / 3fr 1fr;
    grid-template-areas:
        "projects announcements"
        "projects trending";
    gap: var(--main-gap);

    background-color: var(--gray);
    padding: 25px 25px 25px 15px;
}

.main-projects {
    grid-area: projects;
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--main-gap);

    margin-top: var(--main-section-title-space);
}

.projects-container .card {
    display: grid;
    grid-template: 1fr min-content / 1fr;
    gap: var(--main-gap);

    padding: var(--main-card-padding);
    background-color: var(--white);
    border-radius: var(--main-card-border-radius);
    border-left: 8px solid var(--orange);
    box-shadow: var(--main-card-shadow);
}

.card p {
    color: var(--card-para-color);
}

.card .card-buttons {
    justify-self: end;
}

.header-user-info button,
.header-search button,
.card-buttons button {
    height: 25px;
    vertical-align: middle;
    background: transparent;
    border: none;
    cursor: pointer;
}

.header-search img,
.header-user-info button img,
.card-buttons img {
    height: 100%;
}

.main-announcements {
    grid-area: announcements;
}

.announcements-container {
    display: grid;
    gap: var(--main-gap);

    margin-top: var(--main-section-title-space);
    background-color: var(--white);
    padding: var(--main-card-padding);
    border-radius: var(--main-card-border-radius);
    box-shadow: var(--main-card-shadow);
}

.announcements-container .announcement:not(:last-child) {
    border-bottom: 2px solid var(--gray);
    padding-bottom: 15px;
}

.announcements-container p {
    color: var(--card-para-color);
    font-size: 0.8rem;
}

.main-trending {
    grid-area: trending;
}

.trending-profiles-container {
    display: grid;
    gap: var(--main-gap);

    background-color: var(--white);
    border-radius: var(--main-card-border-radius);
    padding: var(--main-card-padding);
    margin-top: var(--main-section-title-space);
    box-shadow: var(--main-card-shadow);
}

.trending-profiles-container .profile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--main-gap);
    align-items: center;
}

.profile p {
    color: var(--card-para-color);
    font-size: 0.9rem;
}

.profile .bold {
    color: black;
    font-weight: bold;
}

.main-trending img {
    height: 45px;
}