@font-face {
    font-family: 'robotoregular';
    src: url('./fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('./fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root{
    --the-font-for-everything: robotoregular,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root.light{
    --black: black;
    --white: white;
    --blue: rgb(45, 157, 255);
    --yellow: rgb(255, 200, 19);
    --shadow-gray: rgb(194, 194, 194);
    --search-bar-gray: rgb(220, 220, 220);
    --main-content-background-gray: rgb(235, 235, 235);
    --para-text-gray: rgb(116, 116, 116);
    --announcement-inner-line-gray: rgb(205, 205, 205);

    --color-text-sidebar: var(--white);
    --color-svg-sidebar: var(--white);
    --color-text-header: var(--black);
    --color-svg-header: var(--black);
    --color-btn-header: var(--white);
    --color-shadow-header: var(--shadow-gray);
    --color-headings-main-content: var(--black);
    --color-titles-project-card: var(--black);
    --color-para-text-project-card: var(--para-text-gray);
    --color-left-border-project-card: var(--yellow);
    --color-svg-project-card: var(--black);
    --color-svg-hover-project-card: var(--yellow);
    --color-titles-announcement-card: var(--black);
    --color-shadow-project-card: var(--shadow-gray);
    --color-para-text-announcement-card: var(--para-text-gray);
    --color-inner-lines-announcement-card: var(--announcement-inner-line-gray);
    --color-shadow-announcement-card: var(--shadow-gray);
    --color-titles-trending-card: var(--black);
    --color-para-text-trending-card: var(--para-text-gray);
    --color-shadow-trending-card: var(--shadow-gray);
    --bg-color-sidebar: var(--blue);
    --bg-color-search-header: var(--search-bar-gray);
    --bg-color-header: var(--white);
    --bg-color-btn-header: var(--blue);
    --bg-color-main-content: var(--main-content-background-gray);
    --bg-color-project-card: var(--white);
    --bg-color-announcement-card: var(--white);
    --bg-color-trending-card: var(--white);
}
:root.dark{
    --black: black;
    --white: white;
    --dark-mode-gray: rgb(58, 58, 58);
    --dark-mode-purple: rgb(119, 3, 99);
    --shadow-gray: rgb(194, 194, 194);
    --search-bar-gray: rgb(108, 108, 108);
    --main-content-background-gray: rgb(109, 109, 109);
    --para-text-gray: rgb(255, 255, 255);
    --announcement-inner-line-gray: rgb(205, 205, 205);

    --color-text-sidebar: var(--white);
    --color-svg-sidebar: var(--white);
    --color-text-header: var(--white);
    --color-svg-header: var(--white);
    --color-search-header: var(--white);
    --color-btn-header: var(--white);
    --color-shadow-header: var(--shadow-gray);
    --color-headings-main-content: var(--white);
    --color-titles-project-card: var(--white);
    --color-para-text-project-card: var(--para-text-gray);
    --color-left-border-project-card: var(--dark-mode-purple);
    --color-svg-project-card: var(--white);
    --color-svg-hover-project-card: var(--dark-mode-purple);
    --color-titles-announcement-card: var(--white);
    --color-shadow-project-card: var(--shadow-gray);
    --color-para-text-announcement-card: var(--para-text-gray);
    --color-inner-lines-announcement-card: var(--announcement-inner-line-gray);
    --color-shadow-announcement-card: var(--shadow-gray);
    --color-titles-trending-card: var(--white);
    --color-para-text-trending-card: var(--para-text-gray);
    --color-shadow-trending-card: var(--shadow-gray);
    --bg-color-sidebar: var(--dark-mode-purple);
    --bg-color-search-header: var(--search-bar-gray);
    --bg-color-header: var(--dark-mode-gray);
    --bg-color-btn-header: var(--dark-mode-purple);
    --bg-color-main-content: var(--main-content-background-gray);
    --bg-color-project-card: var(--dark-mode-gray);
    --bg-color-announcement-card: var(--dark-mode-gray);
    --bg-color-trending-card: var(--dark-mode-gray);
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main_grid_container{
    display: grid;
    grid-template-columns: 1fr 4fr;
    font-family: var(--the-font-for-everything);
}

/* sidebar styles */

.sidebar{
    grid-column: 1/2;
    grid-row: 1/3;
    display: grid;
    gap: 50px;
    padding: 15px;
    background-color: var(--bg-color-sidebar);
    color: var(--color-text-sidebar);
    align-content: start;
    z-index: 2;
}
.sidebar svg{
    fill: var(--color-svg-sidebar);
}
.sidebar_heading>svg{
    width: 3.5rem;
}
.sidebar_heading>h1{
    font-size: 2.5rem;
}
.sidebar .navigation>.navigation_cells>svg{
    width: 1.5rem;
}
.sidebar .navigation>.navigation_cells>a{
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-text-sidebar);
}
.sidebar_heading,
.sidebar .navigation_cells{
    display: flex;
    align-items: center;
}
.sidebar_heading{
    gap: 13px;
}
.navigation{
    padding-left: 10px;
    display: grid;
    gap: 18px;
}
.navigation_cells{
    gap: 20px;
}

/* header styles */

.header{
    display: grid;
    grid-template-columns: 3fr 2fr;
    padding: 20px 60px;
    gap: 28px 40px;
    box-shadow: 0px 5px 30px var(--color-shadow-header);
    z-index: 1;
    background-color: var(--bg-color-header);
    color: var(--color-text-header);
}
.header svg{
    width: 1.7rem;
    fill: var(--color-svg-header);
}
.header_search>input{
    background-color: var(--bg-color-search-header);
    color: var(--color-search-header);
    border: none;
    border-radius: 25px;
    height: 30px;
    flex: 1;
    padding-left: 20px;
    font-size: 1rem;
}
.header_search>input:focus{
    outline: none;
}
.header_search>input::-webkit-search-cancel-button{
    appearance: none;
}
.top_right_pfp>img{
    border-radius: 50%;
    width: 2.7rem;
}
.top_right_username{
    font-size: 1.2rem;
    font-weight: bold;
}
.header_profile>.main_pfp>img{
    border-radius: 50%;
    width: 4.2rem;
}
.header_profile>.profile_right>.greetings{
    font-size: 1rem;
    font-weight: bold;
}
.header_profile>.profile_right>.main_username{
    font-size: 1.7rem;
    font-weight: bold;
}
.header_buttons>button{
    padding: 8px 24px;
    border-radius: 25px;
    color: var(--color-btn-header);
    border: none;
    background-color: var(--bg-color-btn-header);
    font-size: 1.1rem;
}
.header_search{
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 40px;
}
.header_top_right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}
.header_profile{
    display: flex;
    align-items: center;
    gap: 30px;
}
.header_buttons{
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: flex-end;
}

/* main content styles */

.main_content{
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding: 20px;
    background-color: var(--bg-color-main-content);
    gap: 20px;
    color: var(--color-headings-main-content);
}
.project_grid_container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap: 20px;
    margin-top: 15px;
}
.project_cards{
    background-color: var(--bg-color-project-card);
    padding: 20px;
    border-radius: 10px;
    border-left: 8px solid var(--color-left-border-project-card);
    box-shadow: 1px 3px 15px var(--color-shadow-project-card);
}
.project_card_icon_holder>svg{
    width: 1.5rem;
    fill: var(--color-svg-project-card);
}
.project_card_icon_holder{
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 34px;
}
.project_cards>h3{
    margin-bottom: 5px;
    color: var(--color-titles-project-card);
}
.project_cards>p{
    color: var(--color-para-text-project-card);
}
.announcement_and_trending_section{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
    align-content: start;
    margin-right: 20px;
}
.announcement_section>h2{
    margin-bottom: 15px;
}
.announcement_card{
    padding: 30px;
    background-color: var(--bg-color-announcement-card);
    border-radius: 10px;
    box-shadow: 1px 3px 15px var(--color-shadow-announcement-card);
}
.announcement_card h4{
    color: var(--color-titles-announcement-card);
}
.announcement_card>div:first-of-type{
    padding-bottom: 20px;
}
.announcement_card>div:first-of-type+div{
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--color-inner-lines-announcement-card);
    border-bottom: 1px solid var(--color-inner-lines-announcement-card);
}
.announcement_card>div:last-of-type{
    padding-top: 20px;
}
.announcement_card>div>p{
    color: var(--color-para-text-announcement-card);
}
.trending_section>h2{
    margin-bottom: 15px;
}
.trending_card{
    background-color: var(--bg-color-trending-card);
    border-radius: 10px;
    padding: 20px;
    display: grid;
    gap: 20px;
    box-shadow: 1px 3px 15px var(--color-shadow-trending-card);
}
.trending_card_cells{
    display: flex;
    gap: 15px;
}
.trending_card_cells p:last-of-type{
    color: var(--color-para-text-trending-card);
}
.trending_card_cells p:first-of-type{
    color: var(--color-titles-trending-card);
}
.trending_card_cells img{
    border-radius: 50%;
    width: 2.3rem;
}
.header_buttons>button,
.project_cards svg,
.header>.header_top_right svg{
    cursor: pointer;
}
.header_buttons>button:hover,
.sidebar a:hover{
    opacity: 0.5;
    transform: scale(1.07);
    transition: 0.2s;
}
.project_cards:hover,
.header>.header_top_right svg:hover{
    transform: scale(1.02);
    transition: 0.2s;
}
.project_cards svg:hover{
    fill: var(--color-svg-hover-project-card);
}
.header>.header_top_right svg:hover{
    transform: scale(1.15);
    transition: 0.2s;
}