:root {
    --color-primary: #1a92d4;
    --color-bg-white: #fff;
    --color-bg-grey: #e2e8f0;
    --color-accent: #f0b529;
    --paragraph-text-color: #6c6c6c;

    /* Text Decoration */
    --header1-font-size: 2.6rem;
    --header2-font-size: 1.8rem;
    --paragraph-font-size: 1.2rem;
}
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

html {
    font-size: 62.5%;
}

body {
    /* 4. Increase line-height */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    /* 4. Increase line-height */
    -webkit-font-smoothing: antialiased;
    /* 4. Increase line-height */
    line-height: 1.5;
}

/* 6. Improve media defaults */
img,
picture,
svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

ul {
    padding: 0;
    list-style: none;
}

.dashboard {
    display: grid;
    grid-template-areas:
        "sidebar header "
        "sidebar main ";
    grid-template-rows: 15rem 1fr;
    grid-template-columns: minmax(23rem, 1fr) 4fr;
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: var(--color-bg-white);
}

.icon {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.sidebar__logo {
    width: 4rem;
    height: 4rem;
}

/* sidebar */

.sidebar,
.sidebar__nav {
    display: flex;
    flex-direction: column;
    grid-area: sidebar;
    gap: 3rem;
    background-color: var(--color-primary);
}

.sidebar {
    padding: 1.5rem 2rem;
}

.sidebar__nav {
    padding-left: 1rem;
    font-size: var(--header2-font-size);
    font-weight: bold;
}

.sidebar__menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar__link {
    display: flex;
    gap: 1rem;
    align-items: center;
    color: var(--color-bg-white);
    text-decoration: none;
}

.sidebar__header {
    font-size: var(--header1-font-size);
    font-weight: bold;
    color: var(--color-bg-white);
}

/* Header */

.header {
    display: grid;
    grid-template-areas:
        "search profile"
        "greeting action";
    grid-template-rows: 1fr 1.5fr;
    grid-template-columns: 2fr 1fr;
    padding: 0 5vw;
}

.search {
    grid-area: search;
}

.header__profile {
    grid-area: profile;
    justify-self: flex-end;
}

.header__greeting {
    grid-area: greeting;
    gap: 2rem;
}

.header__action {
    display: flex;
    grid-area: action;
    gap: 2rem;
    align-items: center;
    justify-content: flex-end;
}

.search__input {
    width: clamp(35rem, 40vw, 55rem);
    font-size: var(--header2-font-size);
    font-weight: 500;
    appearance: none;
    background-color: var(--color-bg-grey);
    border: none;
    border-radius: 5rem;
}

.search,
.header__profile {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.header__greeting {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.profile.header__profile--greeting {
    width: 6rem;
    height: 6rem;
}

.header__message {
    display: flex;
    flex-direction: column;
}

.header__welcome {
    font-size: var(--paragraph-font-size);
}

.header__username--big {
    font-size: var(--header1-font-size);
}

.header__user-profile {
    display: flex;
}

.btn {
    width: 9rem;
    height: 3.5rem;
    font-size: var(--paragraph-font-size);
    font-weight: bold;
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: 5rem;
    transition: background-color 0.5s ease;
}

.btn:hover {
    background-color: var(--color-accent);
}

/* Main */
.main {
    display: grid;
    grid-area: main;
    grid-template-areas:
        "projects announcements"
        "projects trending";
    grid-template-rows: 36rem 1fr;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    padding: 2rem;
    overflow-y: auto;
    background-color: var(--color-bg-grey);
}

.projects {
    grid-area: projects;
}

.announcements {
    grid-area: announcements;
}

.trending {
    grid-area: trending;
}

.projects__heading,
.announcements__heading,
.trending__heading {
    padding-bottom: 1rem;
    font-size: var(--header2-font-size);
    font-weight: 600;
}

.projects__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 20rem;
    padding: 3rem 3rem;
    background-color: var(--color-bg-white);
    border-radius: 1rem;
}

.card__tittle {
    font-size: var(--header2-font-size);
    font-weight: 600;
}

.card__content {
    overflow-y: auto;
    font-size: var(--paragraph-font-size);
    font-weight: 600;
    color: var(--paragraph-text-color);
}

.card__action {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: auto;
}

.card__icon {
    fill: currentColor; /* makes fill-based icons use the same color */
    stroke: currentColor; /* ensures stroke icons also match if needed */
    transition: color 0.5s ease;
}

.card__icon:hover,
.card__icon:focus {
    color: var(--color-accent);
}

.card--border {
    border-left: 10px solid var(--color-accent);
}

/* Anoucnement Section */
.announcements__container,
.trending__container {
    overflow-y: auto;
    background-color: var(--color-bg-white);
    border-radius: 1rem;
}

.announcements__container {
    height: 32rem;
    padding: 3rem;
}

.announcements__list {
    display: flex;
    flex-direction: column;
}

.announcements__tittle,
.trending__handle {
    font-size: var(--paragraph-font-size);
    font-weight: bold;
}

.announcements__content,
.trending__project {
    font-size: var(--paragraph-font-size);
    font-weight: normal;
    color: var(--paragraph-text-color);
}

.announcements__line {
    margin: 1.5rem 0rem;
}

/* Trending Section */

.trending__container {
    height: 26rem;
    padding: 2rem;
}

.trending__list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2rem;
}

.trending__item {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.trending__info {
    display: flex;
    flex-direction: column;
}

.profile {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}