@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Vibur&family=Rancho&family=Just+Another+Hand&display=swap');

:root {
    /* Colors (palette)*/
    --col-purewhite:     white;
    --col-white:         #f5f3ff;
    --col-black:         #474545;
    --col-accent-dark:   #7c3aed;
    --col-accent-medium: #a78bfa;
    --col-accent-light:  #ddd6fe;

    /* Colors (background)*/
    --bg-col:                   var(--col-purewhite);
    --header-bg-col:            var(--col-white);
    --header-search-bg-color:   var(--col-purewhite);
    --header-btn-bg-col-hover:  var(--col-purewhite);
    --nav-bg-col:               var(--col-black);
    --nav-itm-bg-col-hover:     var(--col-white);
    --main-bg-col:              var(--col-accent-light);
    --main-box-bg-col:          var(--col-white);
    --main-box-bg-col-hover:    var(--col-purewhite);
    
    /* Colors (text/icons)*/
    --col-txt:                  var(--col-black);
    --col-txt-alt:              var(--col-white);
    --col-highlight:            var(--col-accent-dark);

    --header-txt-col:           var(--col-txt);
    --nav-branding-with-toggle-color: var(--col-accent-medium);
    --nav-itm-txt-col:          var(--col-accent-light);
    --nav-itm-txt-col-hover:    var(--col-txt);
    --main-h2-col:              var(--col-txt);
    --main-box-title-col:       var(--col-txt);
    --main-box-txt-col:         var(--col-txt);
    --main-box-title-col-hover: var(--col-highlight);

    /* Colors (icons)*/
    --nav-itm-icon-col:         var(--col-txt-alt);
    --nav-itm-icon-col-hover:   var(--col-highlight);
    --header-icon-col:          var(--col-txt);
    --header-icon-col-hover:    var(--col-highlight);
    --main-box-icon-col:        var(--col-txt);
    --main-box-icon-col-hover:  var(--col-highlight);

    /* Font family */
    --main-font: 'Montserrat', sans-serif;

    /* Font sizes */
    --txt-fontsize:     18px;
    --txt-lineheight:   1.2;

    --header-fontsize:           1rem;
    --hello-greetings-fontsize:  0.7rem;
    --hello-myinfo-fontsize:     1.5rem;
    --hello-myusername-fontsize: 0.8em;
    --header-btn-fontsize:       6px;
    --header-search-width:       200px;

    --nav-itm-fontsize:          0.7rem;

    --main-h2-fontsize:                  1.2rem;

    --project-title-fontsize:           1.1rem;
    --project-description-name-fontsize:0.8rem;

    --announcements-title-fontsize:      0.9rem;
    --announcements-description-fontsize:0.7rem;
    --trending-username-fontsize:        0.7rem;
    --trending-project-name-fontsize:    0.9rem;

    /* Text clamping: number of lines */
    --main-itm-project-description-max-lines: 6;
    --main-itm-announcements-description-max-lines: 3;

    /* Maximum width (including dashboard margin) */
    --dashboard-max-width: min(1440px, 100%);

    /*Margins, gaps and paddings (+widths)*/
    --dashboard-margin:         20px;
    --dashboard-gap:            5px;

    --header-padding:           15px;
    --header-gap:               10px;
    --hello-row-gap:            0px;
    --header-search-padding-tb: 3px;
    --header-search-padding-lr: calc(var(--input-radius)/2);
    --header-btn-padding-tb:    2px;
    --header-btn-max-width:     calc(calc(var(--radius)) + 2.5em); 
    
    --nav-padding:              15px;
    --nav-gap:                  10px;
    --nav-list-gap:             2px;
    --nav-itm-padding:          2px 6px; 
    --nav-itm-gap:              10px;

    --main-padding:             15px;
    --main-gap:                 26px;
    --main-child-hdr-gap:       8px;

    --main-box-padding:         6px;
    --main-list-gap:            6px;
    --main-itm-padding:         8px 6px;
    --main-itm-gap:             5px 10px;
    --main-itm-buttons-gap:     2px;

    --main-projects-list-gap:     16px;
    --main-box-project-max-width: 300px; 
    --main-itm-project-image-gap: 20px;
    --main-itm-project-actions-extra-gap-top: 10px;
    --main-itm-project-actions-gap:           5px;

    /* Images / avatars / icons size */
    --header-icon-len:         1.5rem;
    --nav-branding-with-toggle-icon-len: 2.5rem;
    --nav-itm-icon-len:        1.5rem;
    --nav-itm-icon-tablet-min-len: calc(4*var(--nav-itm-fontsize));
    --hello-avatar-icon-len:   4rem;

    --main-box-icon-len:                  1.5rem;
    --trending-avatar-icon-len:           2.2rem;
    --main-itm-project-image-width:       25%;
    --main-itm-project-hover-image-width: 5%;

    /* Radius */
    --radius:           10px;
    --input-radius:     var(--radius);

    /* Branding logo */
    --branding-fontsize: 1.8rem;
    --branding-part1-font-family: 'Vibur', serif;
    --branding-part2-font-family: 'Rancho', sans-serif;
    --branding-part3-font-family: 'Just Another Hand', sans-serif;
    --branding-part1-color: var(--col-white);
    --branding-part2-color: var(--col-accent-medium);
    --branding-part3-color: var(--col-accent-light);

    /* Shadows */
    --outset-shadow: 2px 2px 8px var(--col-accent-medium);
    --outset-shadow-btn-active: 2px 2px 5px var(--col-accent-medium);
    --inset-shadow: 2px 2px 2px var(--col-accent-light) inset;

    /* Animations on hover / active / ...*/
    --time-transition-color:            0.2s;
    --time-transition-bg-color:         0.6s;
    --time-transition-transform:        0.2s;
    --time-transition-project-img-width:1s;
    --time-transition-active:           0.2s;
    --time-transition-search:           0.6s;
}


html {
    background-color: var(--bg-col);
    color: var(--col-txt);
    font-family: var(--main-font), sans-serif;
    font-weight: 400;
    font-size: var(--txt-fontsize);
    line-height: var(--txt-lineheight);
}

* {
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    margin: 0 auto;
    height: 100vh;
    /*it is assumed the same for <html>*/
    width: 100%;
    /* or max-width -- this avoids horizontal scroll bars */
}

/*****************************************************/

/* || Generic */

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul{
    list-style: none;    
}

a,
a:hover,
a:active,
a:visited{
    text-decoration: none;
}


hr{
    margin: 0 auto;
    background-color: var(--nav-itm-txt-col);
    width: 95%;
    height: 1px;
    border-width:0;
    border-radius: var(--radius);
}

/* || Dashboard (general structure) */

.dashboard-container{
    flex: 1;
    padding: var(--dashboard-margin);
    width: 100%;
    max-width: var(--dashboard-max-width);
}

.dashboard{
    display: grid;
    gap: var(--dashboard-gap);
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content 1fr;
    grid-template-areas: 
        'nav'
        'header'
        'main';
    height: 100%;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

/* || Header */

header{
    grid-area: header;
    display: grid;
    grid-template-areas: 
        'actions1'
        'hello'
        'actions2';
    gap: var(--header-gap);
    padding: var(--header-padding);
    color: var(--header-txt-col);
    background-color: var(--header-bg-col);
    font-size: var(--header-fontsize);
}

/* Icons and avatars (in header actions 1, 2 and hello subsection) */
/* The svg sources are specified at the end of the file */

.header-hello::before,
.header-actions-1 .actions div::before,
.header-actions-2 button::before{
    display: inline-block;
    content:"";
    width: var(--header-icon-len); 
    height: var(--header-icon-len); 
    background-size: var(--header-icon-len) var(--header-icon-len);
    background-color: var(--header-icon-col);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.header-actions-1 .actions div:hover::before,
.header-actions-2 button:hover::before{
    background-color: var(--header-icon-col-hover);
}

.header-hello::before,
.header-actions-1 .actions div.account::before{
    background-color: inherit;
    /* background-size: contain; */
    background-repeat: no-repeat;
    background-position: center;
}

.header-hello::before{
    width: var(--hello-avatar-icon-len); 
    height: var(--hello-avatar-icon-len); 
    background-size: var(--hello-avatar-icon-len) var(--hello-avatar-icon-len);
}

.header-actions-1 .actions div.account:hover::before{
    transform: scale(1.3);
}

.header-actions-1 .actions div.account:active::before{
    transform: scale(1);
}

/* Hello subsection */

.header-hello{
    grid-area: hello;
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
        'avatar greetings'
        'avatar myinfo';
    gap: var(--main-itm-gap); /* same as main-itm */
    row-gap: var(--hello-row-gap) !important; /*override main-itm  gap*/
}

.header-hello .greetings{
    grid-area: greetings;
    font-size: var(--hello-greetings-fontsize);
    align-self: end;
}

.header-hello .myinfo{
    grid-area: myinfo;
    font-size: var(--hello-myinfo-fontsize);
    align-self: start;
    font-weight: bold;
}

.header-hello .myinfo .myusername{
    font-size: var(--hello-myusername-fontsize);
    font-style: italic;
    font-weight: normal;
}

.header-hello::before{
    grid-area: avatar;
}

/*  Header Actions 1 */

.header-actions-1{
    grid-area: actions1;
}

.header-actions-1 .actions{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--main-itm-gap);
}

.header-actions-1 .actions div{
    display: flex;
    align-items: center;
}

/* Header actions 2 */

.header-actions-2{
    grid-area: actions2;
}

.header-actions-2 .actions{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--main-itm-buttons-gap);
}

/* Search input (in header actions 1) */
.header-actions-1 .actions div.search{
    border-radius: var(--input-radius);
    padding: var(--header-search-padding-tb) 0;
    overflow: hidden;
}

.header-actions-1 .actions div.search:active,
.header-actions-1 .actions div.search:focus-within{
    background-color: var(--header-search-bg-color);
    box-shadow: var(--inset-shadow);
    padding-left: var(--header-search-padding-lr);
}

.header-actions-1 .actions div.search input{
    max-width: 0;
    width: 0;
    border: none;
    outline: none;
    opacity: 0;
    background-color: inherit;
}

.header-actions-1 .actions div.search:active input,
.header-actions-1 .actions div.search input:focus{
    max-width: var(--header-search-width);
    width: var(--header-search-width);
    padding: 0 var(--header-search-padding-lr);
    border: none;
    outline: none;
    opacity: 1;
}

.header-actions-1 .actions div.search,
.header-actions-1 .actions div.search input{
    transition: all var(--time-transition-search) ease-in !important;
}

/* Header buttons (in header actions 2) */

.header-actions-2 .actions li{
    width: 100%;
    max-width: var(--header-btn-max-width);
}

.header-actions-2 button{
    padding-top: var(--header-btn-padding-tb);
    padding-bottom: var(--header-btn-padding-tb);
    background-color: inherit;
    border: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 0;
    line-height: calc(var(--txt-lineheight)*var(--header-btn-fontsize));
    user-select: none;   
}

.header-actions-2 button:hover{
    /* background-color: var(--header-btn-bg-col-hover); */
    /* box-shadow: var(--outset-shadow); */
    font-weight: bold;
    border: none;
    font-size: var(--header-btn-fontsize);
}

.header-actions-2 button:active{
    border: none;
    background-color: var(--header-btn-bg-col-hover);
    /* box-shadow: var(--outset-shadow-btn-active); */
}



/* || Nav (Sidebar - branding) */
nav{
    grid-area: nav;
    background-color: var(--nav-bg-col);
}

.nav-visible{
    padding: var(--nav-padding);
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap);
    height: 100%;
    max-height: calc(100vh - var(--dashboard-margin));
}

/* branding */

a.branding{
    text-align: center;
    font-size: var(--branding-fontsize);
    user-select: none;
}

.branding-part1{
    font-family: var(--branding-part1-font-family);
    font-weight: normal;
    color: var(--branding-part1-color); 
}

.branding-part2{
    font-family: var(--branding-part2-font-family);    
    font-weight: bolder;
    color: var(--branding-part2-color);
}

.branding-part3{
    font-family: var(--branding-part3-font-family); 
    font-weight: normal;
    color: var(--branding-part3-color);
}


/* navigation items */

ul.nav-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--nav-list-gap);
}

.nav-itm{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--nav-itm-gap);
    padding: var(--nav-itm-padding);
    border-radius: var(--radius);
    font-size: var(--nav-itm-fontsize);
    color: var(--nav-itm-txt-col);
}

.nav-itm::before{
    display: inline-block;
    content:"";
    width: var(--nav-itm-icon-len); 
    height: var(--nav-itm-icon-len); 
    background-size: var(--nav-itm-icon-len) var(--nav-itm-icon-len);
    background-color: var(--nav-itm-icon-col);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.nav-itm a{
    width: 100%;
    user-select: none;    
}

.nav-sep{
    flex: 1;
    min-height: 1.5rem;
}

.nav-itm:hover,
.nav-itm:active{
    background-color: var(--nav-itm-bg-col-hover);
    color: var(--nav-itm-txt-col-hover);
    font-weight: bold;
}

.nav-itm:hover::before,
.nav-itm:active::before{
    background-color: var(--nav-itm-icon-col-hover);
}

/* || Main */

main{
    grid-area: main;
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        'projects'
        'announcements'
        'trending';
    grid-gap: var(--main-gap);
    padding: var(--main-padding);
    background-color: var(--main-bg-col);
}

main>*{
    display: flex;
    flex-direction: column;
    gap: var(--main-child-hdr-gap);
}

main h2{
    color: var(--main-h2-col);
    font-size: var(--main-h2-fontsize);
}

.main-box{
    background-color: var(--main-box-bg-col);
    padding: var(--main-box-padding);
    border-radius: var(--radius);
    box-shadow: var(--outset-shadow);
}

.main-list{
    display: flex;
    flex-direction: column;
    gap: var(--main-list-gap);
}

.main-itm{
    display: grid;
    align-items: center;
    gap: var(--main-itm-gap);
    padding: var(--main-itm-padding);
    border-radius: var(--radius);
}

/* Project items */

.main-projects{
    grid-area: projects;
}

.main-projects-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--main-box-project-max-width), 100%), 1fr));
    gap: var(--main-projects-list-gap);
}

.main-box-project{
    display: grid;
    grid-template-columns: var(--main-itm-project-image-width) 1fr;
    grid-template-areas:
        'image item';
}

.main-box-project::before {
    grid-area: image;
    content: '';
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius) 0 0 var(--radius);
}

.main-itm-project{
    grid-area: item;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'info'
        'actions';
    border-radius: 0 var(--radius) var(--radius) 0;
    padding-left: var(--main-itm-project-image-gap);
}

.main-itm-project a{
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'title'
        'description';
    gap: var(--main-itm-gap);
}

.main-itm-project .title{
    grid-area: title;
    color: var(--main-box-title-col);
    font-size: var(--project-title-fontsize);
    font-weight: bold;
}

.main-itm-project .description{
    grid-area: description;
    color: var(--main-box-txt-col);
    font-size: var(--project-description-name-fontsize);
}

.main-itm-project .actions{
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: var(--main-itm-project-actions-gap);
    font-size: 0;
    padding-top:  var(--main-itm-project-actions-extra-gap-top);
}

.main-itm-project .actions div::before,
.main-itm-project .actions a::before{
    display: inline-block;
    content:"";
    width: var(--main-box-icon-len); 
    height: var(--main-box-icon-len); 
    background-size: var(--main-box-icon-len) var(--main-box-icon-len);
    background-color: var(--main-box-icon-col);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.main-box-project:hover{
    grid-template-columns: var(--main-itm-project-hover-image-width) 1fr;
}

.main-box-project:hover .main-itm-project{
    background-color: var(--main-box-bg-col-hover);
    box-shadow: var(--inset-shadow);
}

.main-box-project:hover .main-itm-project .title{
    color: var(--main-box-icon-col-hover);
}

.main-box-project .actions div:hover::before,
.main-box-project .actions a:hover::before{
    background-color: var(--main-box-icon-col-hover);
}


/* Announcements/Trending subsection */

.main-announcements{
    grid-area: announcements;
}

.main-itm-announcements{
    grid-template-columns: 1fr;
    grid-template-areas: 
        'title'
        'description';
}

.main-itm-announcements .title{
    grid-area: title;
    color: var(--main-box-title-col);
    font-size: var(--announcements-title-fontsize);
    font-weight: bold;
}

.main-itm-announcements .description{
    grid-area: description;
    color: var(--main-box-txt-col);
    font-size: var(--announcements-description-fontsize);
}



.main-trending{
    grid-area: trending;
}

.main-itm-trending{
    grid-template-columns: auto 1fr;
    grid-template-areas: 
        'avatar username'
        'avatar project-name';
}

.main-itm-trending::before{
    grid-area: avatar;
    display: inline-block;
    content:"";
    width: var(--trending-avatar-icon-len); 
    height: var(--trending-avatar-icon-len); 
    background-size: var(--trending-avatar-icon-len) var(--trending-avatar-icon-len);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.main-itm-trending .username{
    grid-area: username;
    color: var(--main-box-title-col);
    font-size: var(--trending-username-fontsize);
    font-weight: bold;
}

.main-itm-trending .project-name{
    grid-area: project-name;
    color: var(--main-box-txt-col);
    font-size: var(--trending-project-name-fontsize);
}


.main-itm-announcements:hover,
.main-itm-announcements:active,
.main-itm-trending:hover,
.main-itm-trending:active{
    background-color: var(--main-box-bg-col-hover);
    box-shadow: var(--inset-shadow);
}

.main-itm-announcements:hover .title,
.main-itm-announcements:active .title,
.main-itm-trending:hover .username,
.main-itm-trending:active .username{
    color: var(--main-box-icon-col-hover);
}

.main-itm-trending:hover .project-name,
.main-itm-trending:active .project-name{
    font-weight: bold;
}

/* || Clamp the displayed text in some main-itm elements */
/* e.g., on the text displaying the projects */
/* Also, possibly show empty lines if the text is shorter than the number of lines set*/

.main-itm-project .title,
.main-itm-project .description,
.main-itm-announcements .description{
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.main-itm-project .title{
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.main-itm-project .description{
    -webkit-line-clamp: var(--main-itm-project-description-max-lines);
    line-clamp: var(--main-itm-project-description-max-lines);
    /* Show empty lines if the text does not span the maximum number of lines*/
    min-height: calc(calc(1em*var(--txt-lineheight))*var(--main-itm-project-description-max-lines));
}

.main-itm-announcements .description{
    -webkit-line-clamp: var(--main-itm-announcements-description-max-lines);
    line-clamp: var(--main-itm-announcements-description-max-lines);
}

/* || Toggle nav */

.nav-branding-with-toggle{
    font-size: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-branding-with-toggle::after{
    display: inline-block;
    content:"";
    width:  var(--nav-branding-with-toggle-icon-len); 
    height: var(--nav-branding-with-toggle-icon-len); 
    background-size: var(--nav-branding-with-toggle-icon-len) var(--nav-branding-with-toggle-icon-len);
    background-color: var(--nav-itm-icon-col);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.nav-branding-with-toggle:hover::after{
    background-color: var(--nav-branding-with-toggle-color);
}

.nav-branding-with-toggle~.nav-hr,
.nav-branding-with-toggle~.nav-list{
    display: none;
}

.nav-branding-with-toggle.set~.nav-hr,
.nav-branding-with-toggle.set~.nav-list{
    display: flex;
}

/* || Transitions */

*:hover,
*:hover *{
    transition: color var(--time-transition-color) ease-out, 
                background-color var(--time-transition-bg-color) ease-in-out;
}

*:hover::before{ /* icons color / scale */
    transition: background-color var(--time-transition-color) ease-out,
                transform var(--time-transition-transform) ease-out;
}

*:hover .main-box-project{ /* project side image */
    transition: grid-template-columns var(--time-transition-project-img-width) ease-out;
}


*:active, /* button push */
*:active::before{ /* account avatar push */
    transition: all var( --time-transition-active) ease-in-out;
}

/* || Responsiveness */

/* tablet only */
@media only screen and (min-width: 768px) and (max-width: 1023px){
    ul.nav-list{
        flex-direction: row;
    }

    .nav-itm{
        flex-direction: column;
    }

    .nav-itm::before{
        min-width: var(--nav-itm-icon-tablet-min-len);
    }
    
    .nav-itm a{
        text-align: center;
    }
}

/* tablet and desktop */
@media only screen and (min-width: 768px) {
    main{
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            'projects projects'
            'announcements trending';
    }
}

/* desktop */

@media only screen and (min-width: 1024px) {
    .dashboard{
        grid-template-columns: max-content 1fr;
        grid-template-rows: max-content 1fr;
        grid-template-areas: 
            'nav header'
            'main main'
    }

    .dashboard.showNav{
        grid-template-areas: 
            'nav header'
            'nav main';
    }

    header{
        grid-template-areas: 
            'actions1 actions1'
            'hello actions2';
    }
    
    a.branding{
        text-align: left;
    }

    .header-actions-2 .main-itm.actions{
        margin-top: 0;
    }

    main{
        grid-template-columns: 2fr 1fr;
        grid-template-areas: 
            'projects announcements'
            'projects trending';
    }
}

/* || Icons and images (sources) */

.header-actions-1 .actions div.account::before{
    background-image: url(../img/avatar.svg);
}

.header-actions-1 .actions div.search::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>magnify</title><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>');
}

.header-actions-1 .actions div.notifications::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>bell-ring-outline</title><path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" /></svg>');
}

.header-actions-1 .actions div.notifications.set::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>bell-ring</title><path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" /></svg>');
}



.header-hello::before{
    background-image: url(../img/avatar.svg);
}



.header-actions-2 button.new::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>plus-thick</title><path d="M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z" /></svg>');
}
.header-actions-2 button.upload::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>upload</title><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>');
}
.header-actions-2 button.share::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>share-variant</title><path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>');
}



.nav-branding-with-toggle::after{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>chevron-down</title><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>');
}

.nav-branding-with-toggle.set::after{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>chevron-up</title><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>');
}


#nav-home::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>home</title><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>');
}

#nav-profile::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>card-account-details-outline</title><path d="M22,3H2C0.91,3.04 0.04,3.91 0,5V19C0.04,20.09 0.91,20.96 2,21H22C23.09,20.96 23.96,20.09 24,19V5C23.96,3.91 23.09,3.04 22,3M22,19H2V5H22V19M14,17V15.75C14,14.09 10.66,13.25 9,13.25C7.34,13.25 4,14.09 4,15.75V17H14M9,7A2.5,2.5 0 0,0 6.5,9.5A2.5,2.5 0 0,0 9,12A2.5,2.5 0 0,0 11.5,9.5A2.5,2.5 0 0,0 9,7M14,7V8H20V7H14M14,9V10H20V9H14M14,11V12H18V11H14" /></svg>');
}

#nav-messages::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>message-text</title><path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" /></svg>');
}

#nav-history::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>history</title><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>');
}

#nav-tasks::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>checkbox-marked-circle-auto-outline</title><path d="M12 22C12.8 22 13.6 21.9 14.3 21.7C13.9 21.2 13.5 20.6 13.3 19.9C12.9 20 12.4 20 12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4C12.8 4 13.5 4.1 14.2 4.3L15.8 2.7C14.6 2.3 13.3 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22M6.5 11.5L7.9 10.1L11 13.2L19.6 4.6L21 6L11 16L6.5 11.5M19 14L17.74 16.75L15 18L17.74 19.26L19 22L20.25 19.26L23 18L20.25 16.75L19 14Z" /></svg>');
}

#nav-communities::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>account-group</title><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" /></svg>');
}

#nav-settings::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cog</title><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>');
}

#nav-support::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>help-circle</title><path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>');
}

#nav-privacy::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>shield-check</title><path d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" /></svg>');
}



.main-itm-project .actions div.like::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>star-plus-outline</title><path d="M5.8 21L7.4 14L2 9.2L9.2 8.6L12 2L14.8 8.6L22 9.2L18.8 12H18C17.3 12 16.6 12.1 15.9 12.4L18.1 10.5L13.7 10.1L12 6.1L10.3 10.1L5.9 10.5L9.2 13.4L8.2 17.7L12 15.4L12.5 15.7C12.3 16.2 12.1 16.8 12.1 17.3L5.8 21M17 14V17H14V19H17V22H19V19H22V17H19V14H17Z" /></svg>');
}

.main-itm-project .actions div.like.set::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>star-check</title><path d="M5.8 21L7.4 14L2 9.2L9.2 8.6L12 2L14.8 8.6L22 9.2L18.8 12H18C14.9 12 12.4 14.3 12 17.3L5.8 21M17.8 21.2L22.6 16.4L21.3 15L17.7 18.6L16.2 17L15 18.2L17.8 21.2" /></svg>');
}

.main-itm-project .actions div.watch::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye-plus-outline</title><path d="M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C12.36,19.5 12.72,19.5 13.08,19.45C13.03,19.13 13,18.82 13,18.5C13,18.14 13.04,17.78 13.1,17.42C12.74,17.46 12.37,17.5 12,17.5C8.24,17.5 4.83,15.36 3.18,12C4.83,8.64 8.24,6.5 12,6.5C15.76,6.5 19.17,8.64 20.82,12C20.7,12.24 20.56,12.45 20.43,12.68C21.09,12.84 21.72,13.11 22.29,13.5C22.56,13 22.8,12.5 23,12C21.27,7.61 17,4.5 12,4.5M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M18,14.5V17.5H15V19.5H18V22.5H20V19.5H23V17.5H20V14.5H18Z" /></svg>');
}

.main-itm-project .actions div.watch.set::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye-check</title><path d="M23.5,17L18.5,22L15,18.5L16.5,17L18.5,19L22,15.5L23.5,17M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,17C12.5,17 12.97,16.93 13.42,16.79C13.15,17.5 13,18.22 13,19V19.45L12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5C17,4.5 21.27,7.61 23,12C22.75,12.64 22.44,13.26 22.08,13.85C21.18,13.31 20.12,13 19,13C18.22,13 17.5,13.15 16.79,13.42C16.93,12.97 17,12.5 17,12A5,5 0 0,0 12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17Z" /></svg>');
}

.main-itm-project .actions a.fork::before{
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>source-fork</title><path d="M6,2A3,3 0 0,1 9,5C9,6.28 8.19,7.38 7.06,7.81C7.15,8.27 7.39,8.83 8,9.63C9,10.92 11,12.83 12,14.17C13,12.83 15,10.92 16,9.63C16.61,8.83 16.85,8.27 16.94,7.81C15.81,7.38 15,6.28 15,5A3,3 0 0,1 18,2A3,3 0 0,1 21,5C21,6.32 20.14,7.45 18.95,7.85C18.87,8.37 18.64,9 18,9.83C17,11.17 15,13.08 14,14.38C13.39,15.17 13.15,15.73 13.06,16.19C14.19,16.62 15,17.72 15,19A3,3 0 0,1 12,22A3,3 0 0,1 9,19C9,17.72 9.81,16.62 10.94,16.19C10.85,15.73 10.61,15.17 10,14.38C9,13.08 7,11.17 6,9.83C5.36,9 5.13,8.37 5.05,7.85C3.86,7.45 3,6.32 3,5A3,3 0 0,1 6,2M6,4A1,1 0 0,0 5,5A1,1 0 0,0 6,6A1,1 0 0,0 7,5A1,1 0 0,0 6,4M18,4A1,1 0 0,0 17,5A1,1 0 0,0 18,6A1,1 0 0,0 19,5A1,1 0 0,0 18,4M12,18A1,1 0 0,0 11,19A1,1 0 0,0 12,20A1,1 0 0,0 13,19A1,1 0 0,0 12,18Z" /></svg>');
}



.main-box-project-1::before {
    background-image: url('https://picsum.photos/200/300?random=1');
}
.main-box-project-2::before {
    background-image: url('https://picsum.photos/200/300?random=2');
}
.main-box-project-3::before {
    background-image: url('https://picsum.photos/200/300?random=3');
}
.main-box-project-4::before {
    background-image: url('https://picsum.photos/200/300?random=4');
}
.main-box-project-5::before {
    background-image: url('https://picsum.photos/200/300?random=5');
}
.main-box-project-6::before {
    background-image: url('https://picsum.photos/200/300?random=6');
}



.main-itm-trending-1::before{
    background-image: url(../img/avatar_1.svg);
}

.main-itm-trending-2::before{
    background-image: url(../img/avatar_2.svg);
}

.main-itm-trending-3::before{
    background-image: url(../img/avatar_3.svg);
}

.main-itm-trending-4::before{
    background-image: url(../img/avatar_4.svg);
}

/* || Footer */
footer {
    --light-grey: rgb(210, 210, 210);
    --black: rgb(0, 0, 0);
    --ftr-fontsize: 12px;
    --ftr-font: 'Montserrat';
    --ftr-padding: 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--light-grey);
    color: var(--black);
    font-family: var(--ftr-font), sans-serif;
    font-size: var(--ftr-fontsize);
    font-weight: 400;
    line-height: 1.2;
    padding: var(--ftr-padding);
}

footer i {
    font-size: 1.3em;
}