:root {
    font-size: calc(0.625rem + 0.4vw);
}


* {
    font-family: 'Poppins', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template: auto  1fr / 1fr 4fr;
    overflow: auto;
}

.header {
    display: grid;
    grid-template: auto 1fr / 2fr 1fr;
    grid-area: 1 / 2 / 2 / -1;
    padding: 0.5rem 2rem;
    background-color: black;
}

.search-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    grid-area: 1 / 1 / 2 / 2;
    -webkit-box-align: center;
}

.search-container img {
    height: 2rem;
    width: 2rem;
    filter: invert(1);
}

.search-container .search-input {
    flex: 1;
    -webkit-box-flex: 1;
    border-radius: 20px;
    border: none;
    height: 1.5rem;
    background-color: rgb(255, 255, 255);
}

.profile-container {
    display: flex;
    align-items: center;
    grid-area: 1 / 2 / 2 / 3;
    gap: 1rem;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

.profile-container .bell {
    height: 1.7rem;
    cursor: pointer;
    filter: invert(1);
}

.profile-container .profile {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.profile-container .user-name {
    margin: 0;
    cursor: pointer;
    color: white;
}

.welcome-container {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template: 1fr 1fr / auto 1fr;
}

.welcome-container .profile-big {
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
}

.welcome-container .hi-there {
    margin: 0;
    align-self: flex-end;
    font-weight: bold;
    color: white;
}

.welcome-container .profile-name {
    margin: 0;
    align-self: flex-start;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.buttons-container button {
    cursor: pointer;
    color: white;
    background-color: rgb(34, 31, 28);
    border: none;
    width: 6rem;
    height: 2rem;
    font-weight: bold;
    border-radius: 20px;
    font-size: 1rem;
}

.sidebar {
    display: grid;
    grid-auto-rows: max-content;
    color: black;
    padding: 1rem;
    grid-area: 1 / 1 / -1 / 2;
    background-color: #7e22ce;
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar .logo .sidebar-img {
    cursor: pointer;
    height: 3rem;
}

.sidebar .logo h3 {
    margin: 0;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    border: 2px solid transparent;
    text-shadow: 0 0 8px violet;

}

.sidebar ul {
    padding: 0;
}

.sidebar ul li {
    list-style-type: none;
    display: flex;
    gap: 1rem;
    align-items: center;
    color: white;
}

.sidebar ul li img {
    height: 2rem;
    cursor: pointer;
}

.sidebar ul li p {
    cursor: pointer;
    border: 2px solid transparent;
    text-shadow: 0 0 8px violet;
    font-weight: bold;
}

.sidebar img {
    filter: invert(1);
}

.content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 1rem 2rem;
    gap: 1rem;
    box-shadow: inset 0 5px 5px violet;
    background: #701a75;
}

.content .projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: max-content;
    gap: 9rem 1rem;
}

.content .projects > h4 {
    margin: 0;
    grid-column: 1 / -1;
    font-size: 3rem;
    margin-bottom: -1.5rem;
    color: white;
    text-align: center;
    padding-top: 3.3rem;
}

.content .projects .project {
    background: white;
    border-radius: 13px;
    display: grid;
    grid-template: 1fr auto / 1rem 1fr;
    box-shadow: 0 0 3px 1px black;
}
.content .projects .project:hover {
    transition: 0.5s;
    transform: scale(1.01);
}

.block-color {
    grid-row: 1 / -1;
    border-radius: 20px 0 0 20px;
    width: 75%;
    background: linear-gradient(#009fff, #ec2f4b);
}

.text-block {
    padding: 1rem 1rem 0;
}

.project-name {
    margin: 0;
    font-size: 1.5rem;
}


.action-block {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem;
}

.content .projects .project .action-block .action-img:active {
            transform: scale(0.97);
  }

.trending-img {
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
}

.action-img {
    cursor: pointer;
    height: 2rem;
}

.rightbar-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 3rem;
}

.content .rightbar-container > div {
    display: flex;
    flex-direction: column;
}

.content .rightbar-container > div h4 {
    font-size: 1.4rem;
    margin: 0;
    margin-bottom: 0.5rem;
    color: white;
}

.announcements-content,
.trending-content {
    display: flex;
    flex: 1;
    background-color: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    justify-content: space-around;
    border-radius: 20px;
}

h6 {
    font-size: 0.9rem;
}

.announ p,
.text {
    opacity: 0.7;
}

.border {
    width: 100%;
    height: 1px;
    background-color: #009fff;
}

.trend {
    display: flex;
    align-items: center;
    gap: 1rem;
}

a {
    text-decoration: none;
    color: black;
}

a:visited {
    text-decoration: none;
}