@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
body{background-color: var(--Background)}
html{scroll-behavior: smooth;}

:root{
--Text: #fbfbfb;
--Text-Light: #d9d6dc;
--Text-Lighter: #a79fac;
--Background: #1a181b;
--Foreground: #272329;
--Border: #413b45;

--Text-Shadow: rgba(0, 0, 0, 0.333);

--Colour-Green-Lighter: #baffff;
--Colour-Green-Light: #a0efda;
--Colour-Green: #85c7b6;
--Colour-Green-Dark: #43645b;
--Colour-Green-Darker: #1b2824;

--Colour-Blue-Lighter: #ddffff;
--Colour-Blue-Light: #beebff;
--Colour-Blue: #9EC4EE;
--Colour-Blue-Dark: #4f6277;
--Colour-Blue-Darker: #202730;

--Colour-Purple-Lighter: #fc99ff;
--Colour-Purple-Light: #d883ff;
--Colour-Purple: #B46DDE;
--Colour-Purple-Dark: #9057b2;
--Colour-Purple-Darker: #6c4185;

--Colour-Red-Lighter: #cd5f5f;
--Colour-Red-Light: #ef6f6f;
--Colour-Red: #ab4f4f;
--Colour-Red-Dark: #893f3f;
--Colour-Red-Darker: #672f2f;


--Font: 'Ubuntu', sans-serif;
--Font-P: 20px;
--Font-Small: 16px;
--Font-H1: 30px;
--Font-H2: 27px;
--Font-H3: 20px;
--Font-H: 16px;
--Font-LH: 1.5rem;

    }
    
html,body{padding: 0;margin: 0;}
*{font-family: var(--Font);}

/* SideBar */

.SideBar{
    transform: translate(30vw, 0);
    right:0;
    bottom: 0;
    position: fixed;
    z-index: 50;
    top:40px;
    background-color: var(--Colour-Blue-Darker);
    display: flex;
    flex-direction: column;
    padding: 4px;
    color: var(--Text);
    transition: all 0.3s ease;
    border-left: 2px solid var(--Border);
    visibility: hidden;
}

.SideBarActive{
    visibility: visible;
    transform: translate(0, 0);
}

.SideBar hr{
    width: 90%;
    border: 1px solid var(--Text-Lighter);;
}

.SideBarItem{cursor: pointer;}

.SideBarItem,.SideBarItemNH{
    padding: 0 5px;
    font-size: 18px;
    min-height: 40px;
    align-items: center;
    display: flex;   
    transition: background-color 0.3s ease;
}
.SideBarItem:hover{
    background-color: var(--Colour-Green-Dark);
}

.SideBar span{
    padding: 0 10px;
    text-align: right;
    text-shadow: -2px 2px 1px var(--Text-Shadow);
}

.SideBarIcon{
    font-size: 20px;
    color: var(--Text);
    margin-inline: 1px;
    padding: 3px;
    transition: all 0.3s ease;
}
.SideBarIcon:hover{color: var(--Colour-Green); transform: scale(1.4);}

.SideBarSpacer{flex: 1;
}
/* Nav */
.burgericon{font-size: 30px; transition: color 0.3s ease;}
.burgericonActive{color: var(--Colour-Green); background-color: var(--Colour-Blue-Darker);}

.Header {
    top: 0;
    display: flex;
    justify-content: flex-end;
    height: 40px;
    width: 100%;
    background-color: var(--Colour-Purple-Dark);
    position: fixed;
    z-index: 1000;
}

.FAWeight i{
    font-weight: 400 !important;
}

.Footer a{
    text-decoration: none;
}
.SideBarItem,.SideBarItemNH,
    .NavItemNoFade,
    .NavItem{
        height: 40px;
        font-weight: 700;
        letter-spacing: 1px;
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 0 10px;
        color: var(--Text);
        }

        .NavSection{
            display: flex;
            flex-direction: row;
        }
        
        .NavItemNoFade,
        .NavItem span{
            text-shadow: -2px 2px 1px var(--Text-Shadow);
        }
        
        .Header img{height: 90%;padding: 0;margin: auto;}

.NavItem{transition: background-color ease 0.3s;}
.NavItem:hover{
    background-color: var(--Colour-Purple-Darker);
}

.Content{
    margin-top: 40px;
    min-height: calc(100vh - 80px);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--Colour-Purple-Darker);
}
::-webkit-scrollbar-thumb {
    background-color: var(--Colour-Purple-Dark);
    border-radius: 16px;

}

::-webkit-scrollbar {
    width: 8px;
  }

  body::-webkit-scrollbar {
    border-top: 40px solid var(--Colour-Purple-Dark);
  }

  .Footer{
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 100%;
    background-color: var(--Colour-Purple-Dark);
  }

  .Footer span{
    text-shadow: -2px 2px 1px var(--Text-Shadow);
  }