css

src/App/App.css

@@ -94,7 +94,7 @@ p {
   text-align: justify;
 }
 a {
-  color: var(--lightblue) !important;
+  color: var(--accent-gradient-one-of-three) !important;
   text-decoration: none !important;
 }
 
@@ -130,13 +130,18 @@ code{
   text-shadow: 5px 5px 15px black;
   transition: all 0.1s linear;
 }
+.sideitem{
+  min-height: 40px;
+  display: inline-block;
+}
+
 .sidebar>div{
 overflow: hidden;
 text-align: center;
 cursor: pointer;
 }
 .sidebar>div>a>span{
-padding: 1rem;
+padding: 0.5rem;
 color: var(--text-primary);
 }
 .active-scroll-spy{
@@ -895,8 +900,9 @@ svg{
 .circle {
   display: flex;
   width: 10vw;
+  color: white;
   height: 10vw;
-  background-color: var(--lightblue) !important;
+  background-color: var(--text-primary) !important;
   box-shadow: 3px 3px 10px black !important;
   border-radius: 50%;
   margin: 1vw;

src/components/Sidebar.tsx

@@ -8,7 +8,7 @@ function SideItem({hesh, num}:{hesh: string; num: number}){
     return(
         <div>   
             <a href={link}>
-                <span id={subdi}>
+                <span id={subdi} className='sideitem'>
                     {hesh}
                 </span>
             </a>
@@ -99,11 +99,12 @@ function Sidebar(){
         let TopDistance = 100; 
         if (el != null && subtitle != null){
             if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
-                subtitle.style.color = "#FFF6F2";
-                subtitle.style.backgroundColor = "#850F78";
+                subtitle.style.color = "white";
+                subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
                 subtitle.style.borderRadius = "15px";
                 subtitle.style.borderWidth = "15px"; 
                 subtitle.style.borderColor = "#850F78"; 
+
 /*                 console.log("subtitle: ",subtitle)
                 console.log("style: ", subtitle.style)
                 console.log("color: ",subtitle.style.color)