html, body {
    height: 100%;
}

.body-grid {
    height: 100%;
    display: grid;
    grid-template: 1fr 4fr / 1.5fr 5fr;
}

/* HEADER */

.header {
    grid-area: 1/2/1/2;
    display: grid;
    grid-template: 0.75fr 1fr / 2fr 1fr;
    padding-left: 30px;
    z-index: 2;
    box-shadow: 0px 5px 10px #887a7a;
}
 
/* Search */

.input-pair {
    padding-left: 10px;
    align-self: center;
    display: grid;
    grid-template-columns: 30px 1fr;
}

.search-button {
    height: 25px;
    width: 25px;
    background-color: rgba(0,0,0,0);
    border: none;
    vertical-align: bottom;
}

#search {
    width: 95%;
    border-radius: 15px;
    padding-left: 10px;
    background-color: #94a3b8;
    border: none;
    align-self: center;
}

/* User nav */

.user-nav {
    display: grid;
    grid-template-columns: 1fr 50px 130px;
    justify-items: end;
    column-gap: 15px;
}

.notifications {
    height: 25px;
    width: 25px;
    align-self: center;
    background-color: rgba(0,0,0,0);
    border: none;
}

.user-icon-top {
    height: 50px;
    width: 50px;
    align-self: center;
    background-color: rgba(0,0,0,0);
    border: none;
}

.user-nav-name {
    font-size: 1.25rem;
    font-weight: 700;
    align-self: center;
    justify-self: start;
}

/* User greeting */

.user-greet {
    display: grid;
    grid-template: 1fr / 75px 1fr;
    padding-bottom:20px;
}

.user-icon-bottom {
    height: 75px;
    width: 75px;
    grid-area: 1/1/3/1;
    align-self: center;
    background-color: rgba(0,0,0,0);
    border: none;
}

.greet-text {
    align-content: center;
}

.greeting {
    font-size: 0.75rem;
}

.user-name {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Dashboard nav */

.dash-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-content: center;
    column-gap: 15px;
    padding-right: 15px;
}

.dash-nav > * {
    background-color: #1843ef;
    color: #ffff;
    border: none;
    border-radius: 15px;
    padding: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* SIDE BAR */

.side-bar {
    grid-area: 1/1/3/1;
    background-color: #0f172a;
    display: grid;
    grid-template: 80px 300px 1fr / 1fr;
}

/* Branding */

.branding {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.brand-svg {
    fill: #ffff;
    height: 55px;
    width: 55px;
    min-width: 55px;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    align-self: center;
    padding-left: 10px;
    color: #ffff;
}

/* Menus */

.menu-top {
    padding-top: 30px;
}

.menu-link {
    display: flex;
    align-items: center;
    color: #ffff;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 7.5px;
    padding-top: 7.5px;
    padding-left: 20px;
}
.menu-link:hover {
    background-color: rgba(75, 75, 75, 0.5);
}

.menu-svg {
    height: 25px;
    width: 25px;
    fill: #ffff;
}

.menu-text {
    padding-left: 20px;
}

/* CONTENT */

.content {
    grid-area: 2/2/2/2;
    background-color: #94a3b8;
    display: grid;
    grid-template: 1fr / 2fr 260px;
    gap: 10px;
    padding: 20px;
    column-gap: 20px;
}

.content-title {
    font-size: 1.25rem;
    font-weight: 700;
}

/* projects */

.projects {
    grid-area: 1/1/3/2;
    background-color: rgba(0,0,0,0);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 20px;
}

.card {
    height: 200px;
    background-color: #ffff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    border-left:5px solid #1e293b;
    border-radius: 10px;
    box-shadow: 3px 3px 10px #887a7a;
}

.text-box {
    overflow: scroll;
    flex: 1;
}

.card-title {
    font-weight: 600;
}

.card-text {
    font-size: 0.8rem;
}

.card-svgs {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.card-img {
    fill: #64748b;
}

/* Announcements and trending */

.content-right {
    display: grid;
    grid-template-rows: 330px 330px;
    row-gap: 10px;
}

.announcements, .trending {
    display: grid;
    grid-template-rows: 30px 300px;
}

.card-right {
    background-color: #ffff;;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 5px;
    overflow: scroll;
    border-radius: 10px;
    box-shadow: 3px 3px 10px #887a7a;
}

.ann-pair {
    padding: 0px 10px 10px 10px;
    border-bottom: 3px solid grey;
}

.ann-title {
    font-size: 0.9rem;
    font-weight: 700;
}

.trend-group {
    display: flex;
    align-items: center;
}

.trend-text {
    padding-left: 12px;
   
}

.trend-user {
    font-size: 0.9rem;
    font-weight: 700;
}

.trend-project {
    font-size: 0.9rem;
}