/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2024 */

@font-face {
    font-family: 'araboto';
    src: url('fonts/araboto_normal_400-webfont.woff2') format('woff2'),
         url('fonts/araboto_normal_400-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'araboto';
    src: url('fonts/araboto_bold_400-webfont.woff2') format('woff2'),
         url('fonts/araboto_bold_400-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

.container {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 5fr);
    grid-template-rows: minmax(min-content, 1.3fr) minmax(min-content, 5fr);
    height: 100vh;
}

.sidebar {
    background-color: #1992d4;
    color: white;
    grid-row: 1 / 3;
    font-weight: bold;
    display: grid;
    padding: 1.3rem;
    grid-auto-rows: min-content;
    gap: 2.3rem;
}

.logo {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    font-size: 1.5rem;
    gap: 1rem;
}

.sidebar img {
    width: 2.3rem;
    justify-self: center;
}

.sidebar .logo img {
    width: 3rem;
}

.sidebar ul {
   display: flex;
   flex-direction: column;
   gap: .8rem;
}

.sidebar ul li {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    font-size: 1.2rem;
}

.header {
    padding: 1.3rem 2rem;
    padding-bottom: .8rem;
    display: grid;
    grid-template-columns: 2fr 1.4fr;
    grid-template-rows: 1fr 1.4fr;
    gap: 1rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

button {
    padding: 0px;
    border: 0px;
}

input {
    padding: 0px;
    border: 0px;
    border-radius: 1rem;
    background-color: #e2e8f0;
}

.search div {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: min-content;
}

.search-icon {
    width: 3rem;
}

.search-bar {
    height: 1.8rem;
    width: 100%;
    align-self: center;
}

.header .profile img {
    width: 3rem;
}

.header .intro img {
    width: 5rem;
}

.intro {
    display: flex;
}

.profile > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.3rem;
    font-weight: bold;
}

.intro {
    padding-left: 1rem;
    display: grid;
    grid-template-columns: 1fr 6fr;
    grid-auto-flow: column;
    gap: 6px;
}

.intro > div > div:first-child {
    font-weight: bold;
    margin-bottom: .5rem;
    
}

.intro > div > div:nth-child(2) {
    font-weight: bold;
    font-size: 1.5rem
}

.create {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.create button {
    background-color: #1992d4;
    color: white;
    font-weight: bold;
    padding: .7rem 1rem;
    border-radius: 2rem;
    width: 7rem;
}

.main {
    padding: 2rem;
    background-color: #e2e8f0;
    display: grid;
    grid-template-columns: 2.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
}

.projects {
    grid-row: 1 / 3;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 30px;
    row-gap: 30px;
}

.project-card {
    border-left: 10px solid #f0b429;
    border-radius: 10px;
    min-width: 232px;
    height: 9rem;
    background-color: white;
    padding: 2rem 1rem;
    line-height: 1.1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);

    display: grid;
    grid-template-rows: 1fr 5fr;
}

.project-card > div:first-child {
    font-weight: bold;
    margin-bottom: 3px;
}

.project-card > div:nth-child(2) {
    color: #808080;
    font-size: .95rem;
}

.projects > div:first-child {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.announcements > div:first-child {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.trending > div:first-child {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.interact {
    align-self: flex-end;
    justify-self: flex-end;

    display: grid;
    grid-auto-flow: column;
    column-gap: 10px;
}

.project-card img {
    width: 2rem;
}

.announcements {

}

.announcement-card {
    background-color: white;
    display: grid;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.announce > div:first-child {
    font-weight: bold;
    margin-bottom: .3rem;
}

.announce > div:nth-child(2) {
    color: #808080;
    font-size: .9rem;
}

hr {
    width: 100%;
    margin: 1.2rem 0rem;
}

.trending img {
    width: 3rem;
}

.trending-card {
    background-color: white;
    display: grid;
    border-radius: 10px;
    padding: 2rem;
    gap: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.trending-profile {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: .4fr 1fr;
}

.trending-profile > div > div:nth-child(2) {
    color: #808080;
    margin-top: .3rem;
}