* {
    padding: 0;
    margin: 0;
    font-family: Helvetica;
}

body {
    height: 100vh;
    width: 100vw;
    display: grid;
    overflow-x: hidden;
    grid-template-columns: 1.5fr 5fr;
    grid-template-rows: repeat(6, 20vh);
    grid-template-areas: "Dashboard Header"
        "Dashboard Body"
        "Dashboard Body"
        "Dashboard Body"
        "Dashboard Body"
        "Dashboard Body"

    ;
}

.Dashboard {
    grid-area: Dashboard;
    display: grid;
    background-color: #1992D4;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Times New Roman', Times, serif;
    grid-template-rows: repeat(12, 1.5rem);
    align-items: flex-start;
    padding-left: 1rem;
    padding-top: 1rem;
    gap: 0.9rem;


}

.Dashboard div:not(.Main) {
    display: flex;
    align-items: center;
    padding-left: 0.4rem;
}

.Main {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}

.Dashboard .Main img {
    width: 2.5rem;
    height: 2.5rem;
}

.Dashboard img {
    width: 1.2rem;
    height: 1.2rem;
    padding-right: 0.75rem;
    filter: brightness(0) invert(1);
}

.Header {
    grid-area: Header;
    position: relative;
    z-index: 10;
    background-color: #FFFFFF;
    display: grid;
    box-shadow: 0 0.05rem 1rem 0 rgba(0, 0, 0, 0.2);
    grid-template-columns: repeat(4, 1fr) 1.5fr;
    grid-template-rows: 2fr 3fr;
    grid-template-areas: "Search Search Search Fit Noti"
        "Entry Entry Blank Extra Extra";
}

.Header img {
    height: 1.2rem;
    width: 1.2rem;
    padding-right: 0.5rem;
}

.Search {
    grid-area: Search;
    display: flex;
    padding-top: 1rem;
    padding-left: 2.5rem;
    align-items: center;
    gap: 0.5rem;
}

form {
    width: 100%;
    height: 2rem;
}

input {
    border-radius: 10px 10px 10px 10px;
    background-color: #E2E8F0;
    border-width: 0px;
    width: 90%;
    height: 85%
}

input::placeholder {
    padding-left: 1rem;
}

.Notification {
    grid-area: Noti;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    font-weight: 700;
    justify-content: flex-end;
}

img[src="Thumbs.jpeg"] {
    width: 2rem;
    height: 2rem;
    padding-left: 1rem;
}

.Notification p {
    margin-left: auto;
    padding-right: 2.5rem;
}

.Entry {
    grid-area: Entry;
    display: flex;
}

.Entry img[src="Thumbs.jpeg"] {
    padding-top: 0.5rem;
    width: 3em;
    height: 3rem;
    padding-left: 2rem;
}

.Entry div p:first-child {
    font-size: 0.6rem;
    font-weight: 700;
    padding-top: 1rem;

}

.Entry div p:nth-child(2) {
    font-weight: 700;
    padding-top: 0.25rem;
}

.Extra {
    grid-area: Extra;
    display: flex;
    gap: 1.5rem;
    color: white;
    align-items: center;
    justify-content: end;
    padding-right: 2.5rem;

}

.Extra>div {
    background-color: #1992D4;
    font-size: 0.7rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    font-weight: 700;
    border-radius: 100px;
    justify-content: flex-end;
}

.Body {
    grid-area: Body;
    display: grid;
    background-color: #E2E8F0;
    min-height: 20vh;
     height: 100%; 
    grid-template-columns: 3fr 1.5fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "Projects Announce"
        "Projects Trending";
}


.Projects > p, .Trending > p {
    grid-column: 1 / 3;
    font-size: 1rem;
    font-weight: 700;
    padding-top: 4vh;
    padding-left: 1.5vw;
    justify-self: start;

}

.Projects {
    display: grid;
    grid-area: Projects;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr repeat(3,minmax(150px, 1fr));
    justify-items: center;
    gap: 1.2rem;

}

.Projects:nth-child(odd) {
    padding-left: 0.5rem;
}


.Projects div {
    position: relative;
    width: 90%;
    height: 25vh;
    gap: 2rem;
    background-color: white;
    box-shadow: -6px 0 0 0 #F0B429, 2px 2px 4px grey;;
    border-radius: 8px;
   font-weight: 700;
   padding-top:1.7rem;
   font-size:0.9rem;
   padding-left: 1.5rem;
   padding-right:1rem;
   box-sizing: border-box;
   
}

.Projects [class*="Project"] p:nth-child(2) {
    font-weight: 700;
    color:rgba(109, 109, 109, 0.704);
    padding-top: 0.25rem;
}

.Projects img{
    position: absolute;
    bottom:1rem;
    right:1rem;
    height: 5vh;
    width: 5vh;
}

.Projects img:hover {
    filter: invert(37%) sepia(82%) saturate(3571%) hue-rotate(183deg) brightness(97%) contrast(97%);
}

.Announcements {
    grid-area: Announce;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    padding-top: 4vh;
    padding-left: 1.5vw;
    flex-direction: column;
    gap: 1.2rem;
}

.Announce{
    width: 90%;
    background-color: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px grey;

}

.Announce p:nth-child(even) {
    font-weight: 100;
    font-size: 0.75rem;
    border-top: 0;
}

.Announce p:nth-of-type(2),
.Announce p:nth-of-type(4) {
    border-bottom: 2px solid #ccc;
}

.Announce p:nth-child(odd) {
    font-weight: 700;
    font-size: 0.9rem;

}

.Announce p:nth-child(2n+1) {
    padding-top: 1rem;
}

.Announce:last-child, .Announce p:nth-child(2n)  {
    padding-bottom: 1rem;
}

.Trending {
    position: relative;
    grid-area: Trending;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    padding-top: 4vh;
    padding-left: 1.5vw;
    flex-direction: column;
    gap: 1.2rem;
    
}

.People {
    display: flex;
    height: 70%;
    justify-content: start;
    width: 90%;
    background-color: white;
    border-radius: 8px;    
    box-sizing: border-box;
    padding-top: 1rem;
    padding-left:1rem;
    color:grey;
    box-shadow: 2px 2px 4px grey;
}

.People p {
    opacity: 0.5;
    font-weight:700
}