*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial;
    --light-white: #F8FAFC;
    --darker-white: #E2E8F0;
    --blue: #38BDF8;
    --purple: #6D28D9;
} 

main{
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 1fr 5fr;
}

/* sidebar */
#sidebar{
    background-color: var(--blue);
    color: var(--light-white);
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 40px;
}

#sidebar > *{
    padding: 16px;
}

.logo{
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
    gap: 16px;
}

.logo img{
    max-width: 40px;
    grid-column: 1 / 2;
}

.logo > h1{
    grid-column: 2 / 3;
}

#sidebar > ul > li{
    font-size: 24px;
    margin: 8px 0;
    list-style: none;
}

.sb-item > img{
    max-width: 16px;
}

.sb-item > a {
    text-decoration: none;
    color: var(--light-white);
    margin-left: 12px; 
    border-radius: 5px;
    padding: 6px;
}
.sb-item > a:hover{
    text-shadow: 2px 2px black;
}

/* header */
#header{
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 2fr;
    margin: 1rem;
}

/* search bar */
#header .search-container{
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.search-container > img {
    width: 30px;
}

.search-container > input{
    background-color: var(--darker-white);
    height: 2em;
    width: max(200px, 80%);
    border: solid 1px black;
    border-radius: 10px;
}


/* top right */
.icons-container{
    grid-column: 2 / 4;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, auto);
    justify-items: center;
}

.icons-container > img{
    width: 30px;
}
.icons-container > img:nth-child(2){
    border: solid 1px lightgray;
    border-radius: 50%;
    background-color: #893168;
}

/* bottom left */
.intro-container{
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    align-items: center;
    justify-items: start;
}

.intro-container > img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 100px;
    justify-self: center;
    border: solid 1px lightgray;
    border-radius: 50%;
    background-color: #893168;
}

.intro{
    grid-column: 2 / 3;
}
.intro-container > p{
    align-self: end;
}
.intro-container > h2{
    align-self: start;
}

/* bottom right */
.button-container{
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    gap: 2px;
}

.button-container > button{
    height: 3em;
    width: max(6em, 60%);
    justify-self: center;
    border: solid 1px black;
    border-radius: 10px;
    background-color: var(--purple);
    color: var(--light-white)
}
.button-container > button:hover{
    box-shadow: 2px 2px black;
}

/* main content */
#content{
    grid-column: 2 / 3;
    background-color: var(--darker-white);
    display: grid;
    grid-template-columns: 3fr 1fr;
}

#content > *{
    padding: 24px;
}

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

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

.proj-item {
    max-height: 250px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    background-color: var(--light-white);
    border: solid 1px black;
    border-radius: 16px;
    padding: 2em;
    align-items: start;
    gap: .8em;
}
.proj-item > h4{
    height: 1rem;
}
.proj-item > p{
    max-height: 200px;
}
.proj-item:hover{
    box-shadow: 5px 5px black;
}
.proj-icons{
    justify-self: right;
    align-self: end;
    margin-bottom: 8px;
    margin-right: 8px;
}

.proj-icons > img{
    width: min(30px, 2rem);
    margin: 0 2px;
}
.proj-icons > img:hover{
    filter: invert(16%) sepia(87%) 
    saturate(5279%) hue-rotate(263deg)
    brightness(88%) contrast(93%);
}


/* announcements */
.announcements{
    grid-column: 2 / 3;
}

.announce-grid{
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
    background-color: var(--light-white);
    border: solid 1px black;
    border-radius: 16px;
    padding: 1em;
}

.announce-item{
    margin: 5px;
    border-bottom: solid 1px black;
    padding: 1em;
}
.announce-item:nth-child(3){
    border-bottom: none;
}
.announce-item p:nth-child(1){
    font-weight: bold;
    font-size: 1.1rem;
}


/* trending */
.trending{
    grid-column: 2 / 3;
}

.trending-grid{
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
    background-color: var(--light-white);
    border: solid 1px black;
    border-radius: 16px;
    padding: 1em;
}

/* trending items */
.trend-item{
    margin: 1em;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(2, 1fr);
}

.trend-item > p {
    grid-column: 2 / 3;
    justify-self: start;
}

.trend-item img {
    width: 40px;
    grid-row: 1 / 3;
    align-self: center;
    border: solid 1px lightgray;
    border-radius: 50%;
}

.trending-grid > .trend-item:nth-child(1) > img {
    background-color: #4BC6B9;
}
.trending-grid > .trend-item:nth-child(2) > img {
    background-color: #C75146;
}
.trending-grid > .trend-item:nth-child(3) > img {
    background-color: #F18F01;
}
.trending-grid > .trend-item:nth-child(4) > img {
    background-color: #9BA2FF;
}
.trend-item p:nth-child(2){
    font-size: 1.1rem;
}

.cred{
    grid-column: 1 / 3;
    justify-self: end;
    align-self: end;
}
.cred a:link,
.cred a:visited{
    text-decoration: none;
    color: var(--blue);
}