/* General */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --main-color: #841aad;
    --accent-color: #bc68dd;
    --background-color: #E2E8F0;
    --foreground-color: white;
    --shadow-color: #000000;

    --main-color-hover: hsl(from var(--main-color) h s calc(l - 10));
    --main-color-active: hsl(from var(--main-color) h s calc(l - 20));

    --small-profile-pic-size: 50px;
    --large-profile-pic-size: 100px;
}

body {
    font-family: "Roboto", sans-serif;

    display: grid;
    grid-template: max-content auto / max-content 1fr;
    height: 100vh;
}

h2 {
    font-size: 180%;
}

h3 {
    font-size: 140%;
}

.icon {
    height: 100%;
    width: auto;
}

.icon.white {
    /* Turn black SVG white */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(141deg) brightness(103%) contrast(101%);
}

.profile-pic {
    height: 100%;
    border-radius: 100%;
}

.profile-pic.small {
    width: var(--small-profile-pic-size);
    height: var(--small-profile-pic-size);
}

.profile-pic.large {
    width: var(--large-profile-pic-size);
    height: var(--large-profile-pic-size);
}

.rounded-box {
    background-color: var(--foreground-color);
    padding: 1.5rem;
    border-radius: 1rem;
}

.hover-shadow:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0px 0px 10px 10px #BABABA;
}

.hover-shadow.down:hover {
    box-shadow: 0px 10px 7px 0px #BABABA;
}

.hover-shadow.up:hover {
    box-shadow: 0px -10px 7px 0px #BABABA;
}


/* Header */
#header {
    grid-row: 1;
    grid-column: 2;

    display: grid;
    grid-template: max-content max-content / 1.5fr max-content;
    gap: 2rem;
    padding: 2rem 4rem;
    align-items: center;

    background-color: var(--foreground-color);
}

#search {
    display: flex;
    gap: 2rem;
}

#search .icon {
    height: 50px;
}

#search input {
    flex: 1;
    border-radius: 20px;
    background-color: var(--background-color);
    border: none;
    padding: 1rem;
}

#search input:focus {
    outline: 4px solid var(--main-color);
}

#misc-info {
    display: grid;
    grid-template-columns: 30px var(--small-profile-pic-size) max-content;
    align-items: center;
    gap: 3rem;
    margin: 0 auto;
}

#user-display {
    display: grid;
    grid-template: 1fr 1fr / var(--large-profile-pic-size) 1fr;
    font-weight: bold;
}

#user-display > .profile-pic {
    grid-row: 1 / -1;
    align-self: center;
}

#user-display > .text {
    align-self: flex-end;
    padding-left: 2rem;
}

#user-display > .name {
    align-self: flex-start;
    font-size: 150%;
    padding-left: 2rem;
}

#interaction-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

#interaction-buttons > button {
    color: white;
    background-color: var(--main-color);
    border: none;
    width: 10rem;
    padding: 0.5rem;
    border-radius: 2rem;
}

#interaction-buttons > button:hover {
    background-color: var(--main-color-hover);
}

#interaction-buttons > button:active {
    background-color: var(--main-color-active);
}

/* Sidebar */
#sidebar {
    grid-row: 1 / span 2;
    grid-column: 1;

    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 2rem;

    background-color: var(--main-color);
    color: white;
    font-weight: bold;
}

#sidebar h2, .nav li {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 40px;
    align-items: center;
    gap: 2rem;
}

#sidebar h2 {
    max-width: 250px;
}

.nav li {
    margin: 1rem 0;
    font-size: 20px;
}

.nav li:hover {
    background-color: var(--main-color-hover);
    outline: 0.5rem solid var(--main-color-hover);
    border-radius: 0.5rem;
}

.nav li:active {
    background-color: var(--main-color-active);
    outline: 0.5rem solid var(--main-color-active);
    border-radius: 0.5rem;
}

/* Content */
#content {
    grid-row: 2;
    grid-column: 2;
    
    display: grid;
    grid-template: 1fr 1fr / 3fr 1fr;
    gap: 2rem;
    padding: 2rem;
    background-color: var(--background-color);
}

#content h2 {
    margin-bottom: 1rem;
}

#content .text {
    color: rgb(100, 100, 100);
}

#projects { 
    grid-row: 1 / -1;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    border-left: 6px solid var(--accent-color);
    height: fit-content;

    display: grid;
    grid-template-rows: max-content max-content 40px;
}

.card > .buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

#announcements > ul {
    display: grid;
    grid-template-rows: max-content auto max-content auto max-content;
    gap: 1rem;
}

#announcements hr {
    margin: none;
    border: 2px solid var(--accent-color);
}

#announcements .title {
    font-weight: bold;
}

#announcements .text {
    font-size: 80%;
}

#trending > ul {
    display: grid;
    grid-template-rows: repeat(4, max-content);
    gap: 1rem;
}

#trending .user {
    display: grid;
    grid-template: repeat(2, max-content) / var(--small-profile-pic-size) auto;
}

#trending .user img {
    grid-row: 1 / -1;
    align-self: center;
}

#trending .handle {
    padding-left: 1rem;
    font-weight: bold;
}

#trending .text {
    padding-left: 1rem;
}