.poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; font-style: normal; } .poppins-extralight { font-family: "Poppins", sans-serif; font-weight: 200; font-style: normal; } .poppins-light { font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; } .poppins-regular { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; } .poppins-medium { font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; } .poppins-semibold { font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal; } .poppins-bold { font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal; } .poppins-extrabold { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; } .poppins-black { font-family: "Poppins", sans-serif; font-weight: 900; font-style: normal; } .poppins-thin-italic { font-family: "Poppins", sans-serif; font-weight: 100; font-style: italic; } .poppins-extralight-italic { font-family: "Poppins", sans-serif; font-weight: 200; font-style: italic; } .poppins-light-italic { font-family: "Poppins", sans-serif; font-weight: 300; font-style: italic; } .poppins-regular-italic { font-family: "Poppins", sans-serif; font-weight: 400; font-style: italic; } .poppins-medium-italic { font-family: "Poppins", sans-serif; font-weight: 500; font-style: italic; } .poppins-semibold-italic { font-family: "Poppins", sans-serif; font-weight: 600; font-style: italic; } .poppins-bold-italic { font-family: "Poppins", sans-serif; font-weight: 700; font-style: italic; } .poppins-extrabold-italic { font-family: "Poppins", sans-serif; font-weight: 800; font-style: italic; } .poppins-black-italic { font-family: "Poppins", sans-serif; font-weight: 900; font-style: italic; }
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:"Poppins",sans-serif;
}

body {
    height: 100%;
    min-height:100%;
    background-color: lightblue;
}

.container {
    height: 100%;
    display:grid;
    grid-template: 1fr 6fr / 1fr 4fr;
}

.sidebar {
    grid-row: 1 / 3;
    background-color: rgb(35, 101, 123);
    color:white;
    padding:16px;
    display:grid;
    align-items:start;
    font-size:1.1rem
}

.sidebar * {
    list-style: none;
    margin-bottom:1rem;
    text-decoration: none;
    color: white;
}

.header {
    display:grid;
    grid-template-rows: 1fr 1fr;
    padding:1rem;
}

.search {
    display:grid;
    grid-template-columns: 32px 10fr 32px 32px 1fr;
    gap:16px;
    align-items:center;

}


.profile-actions {
    display:grid;
    grid-auto-flow: column;
    align-items:center;
    grid-template-columns: 32px 32px 4fr repeat(3, minmax(80px, 1fr));
    gap:16px;
}

.post-cta {
    border-radius: 100px;
    background-color: rgb(35, 101, 123);
    color:white;
    height:2rem;
}

.searchbar {
    background-color: white;
    border-radius: 2rem;
    margin:10px;
    height: 2rem;
    padding-left:1rem;
}

.sidebar nav{
    display:grid;
    gap: 10px;
}

.buttons {
    position:relative;
}

.star {
    position:absolute;
    bottom:0;
    right:68px;
}
.watch {
    position:absolute;
    bottom:0;
    right:34px;
}
.fork {
    position:absolute;
    bottom:0;
    right:0;
}

.welcome-text-container {
    display:grid;
    gap:0px;
}

.username {
    font-size: 18px;
}

.main {
    padding:1rem;
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "projects announcements"
    "projects trending";
    column-gap:2rem;
    row-gap:1rem;
}
.projects {
    grid-area:projects;
}
.announcements {
    grid-area:announcements;
}
.trending {
    grid-area:trending;
}
h2 {
    margin-bottom:1rem;
}
.announcements-grid, .trending-grid {
    display:grid;
    padding:1rem;
}
.project-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.announcements-grid, .trending-grid, .project-container {
    box-shadow: 2px 2px 4px gray;
    background-color: white;
    }
.project-container {
    background-color: white;
    padding:1rem;
    border-left: 8px solid gray;
    display:grid;
    grid-template-rows: 2rem 1fr 32px;
    gap:0px;
}
.trending,.announcements,.projects {
    display:grid;
    grid-template-rows: 2rem 1fr;
    row-gap:1rem;
}
.announcements-grid p {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid black;
}
.announcements-grid p:nth-last-child(1) {
    padding-bottom: 1rem;
    margin-bottom: 0rem;
    border-bottom: none;
}