* {
    font-family: raleway-medium;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: raleway-medium;
    src: url(raleway/Raleway-Medium.ttf)
}

.container {
    display: grid;
    grid-template: max(130px, 18vh) 82vh / 1fr 6fr;
}

.sidebar {
    grid-area: 1 / 1 / span 2 / span 1;

    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 20px;
    min-width: 160px;

    background-color: #1f2937;
    box-shadow: inset -4px 0 40px rgb(0 0 0 / 40%);
}

.dashboard, .menu-1, .menu-2 {
    color: #cbd5e1;
    display: grid;
    grid-template: auto / 24px 100px;
    align-items: center;
    gap: 8px;
}

.menu-1 button, .menu-2 button {
    appearance: none;
    border: none;
    background-color: #1f2937;
    font-size: 1rem;
    text-align: left;
    color: #cbd5e1;
}

button:hover {
    cursor:pointer;
}

.dashboard h1 {
    font-size: 1.4rem;
}

.sidebar img, .header img:not([alt="Profile Picture"]), .card-icons {
    filter: invert(88%) sepia(11%) saturate(243%) hue-rotate(173deg) brightness(97%) contrast(89%);
}

img {
    width: 20px;
}

.logo {
    width: 1.8rem;
}

.header {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    flex-direction: column;
    position: relative;

    background-color: #374151;
    box-shadow: 0 0.3em 11px rgb(0 0 0 / 40%);;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
}


.header-top .username, .header-bottom .greeting {
    text-wrap: nowrap;
    color: #e5e5e5;
}

label {
    display: flex;
    align-items: center;
}

.header-top input {
    appearance: none;
    border: none;
    min-width: 10px;
    flex: 0 1 420px;
    height: 26px;
    background-color: #94a3b8;
    border-radius: 19px;
    box-shadow: inset 3px 3px 15px rgb(0 0 0 / 40%);

    padding: 8px;
    font-size: 0.8rem;
}

.header-top input:focus {
    border: none;
    outline: 2px solid #956bf7;
}

.empty {
    min-width: 10px;
    flex: 1;
}

img[alt="Profile Picture"] {
    clip-path: circle();
}

.header-top img[alt="Profile Picture"] {
    width: 32px;
    height: 32px;
}

.header-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 26px 12px;
}

.header-bottom img[alt="Profile Picture"] {
    width: 48px;
    height: 48px;
}

.header-bottom button {
    appearance: none;
    border: none;
    background-color:#0ea5e9;
    padding: 8px;
    width: 64px;
    border-radius: 20px;
    color: #cbd5e1;
    background:none;
    border: 1px solid white;
}

.header-bottom button:hover {
    border: 1px solid #956bf7;
    color: #956bf7;
}

.content {
    background: linear-gradient(135deg, #4338ca, #a21caf);
    
    grid: 2 / 2 / 3 / 3;
    display: grid;
    grid-template: auto / 3fr 1fr;

    overflow-y: scroll;
}

.projects-section {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 36px;
}

.your-projects-title, .announcements-title, .trending-title {
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 20px;
    color: #e5e7eb;
}

.cards {
    display: grid;
    grid-template: repeat(1, 1fr) / repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 42px;
    row-gap: 36px;
}

.card {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    background-color: white;
    border-radius: 18px;
    background: #252f3d;
    color: #e5e7eb;
    box-shadow: 3px 3px 15px rgb(0 0 0 / 60%);

    padding: 24px;
}

.card h5 {
    font-size: 1rem;
}

.card p {
    margin-top: 12px;
    font-size: 0.8rem;
    width: clamp(24ch, 36ch);
}

.card a {
    text-decoration: none;
    color: #e5e7eb;
}

.card a:hover {
    filter: invert(43%) sepia(50%) saturate(1827%) hue-rotate(230deg) brightness(99%) contrast(95%);
}

.card .card-icons {
    align-self: flex-end;
}

.card-icons img:not(:last-child) {
    margin-right: 4px;
}

.information {
    grid-area: 1 / 2 / span 1 / span 1;
    align-self: stretch;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px 36px 36px 0px;
}

.announcements-section, .trending-section {
    max-width: 240px;
    min-width: 180px;
}

.announcements, .trending {
    background-color: #252f3d;
    box-shadow: 3px 3px 15px rgb(0 0 0 / 60%);
    border-radius: 10px;
    padding: 18px;
    color: #cbd5e1;
}

.announcements p {
    font-size: 0.7rem;
    padding: 8px 0px;
    min-width: 28ch;
}

.announcement-title, .project-name {
    color: #e5e7eb;
}

.announcements hr {
    margin-bottom: 8px;
}

.information .empty {
    min-height: 30px;
    max-height: 52px;
}

.trending-user {
    margin-bottom: 14px;
    display: flex;
    gap: 10px;
}

.trending-user-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trending-user:last-child {
    margin-bottom: 0;
}

.trending-user .project-tag {
    font-size: 0.65rem;
}

.trending img {
    width: 32px;
    height: 32px;
}