:root {
  --cursorDay: rgb(34, 34, 34);
  --backgroundDay: rgb(255, 255, 255);
  --iconDay: rgb(41, 41, 41);
  --cborderDay: 1px rgb(41, 41, 41) solid;
  --mBorderDay: 2px solid #e9e3e3;
}

* {
  padding: 0;
  margin: 0;
}

body {
  background: #202020;
  cursor: none;
  font-family: 'Barlow', sans-serif;
  color: white;
  transition: 1s;
}

body::-moz-selection {
  background: #ff961e;
  color: black;
}

body::selection {
  background: #ff961e;
  color: black;
}

body.day-theme {
  background: var(--backgroundDay);
}

.cursor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 10px;
  height: 10px;
  border: 1px white solid;
  background: white;
  border-radius: 50%;
  position: absolute;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: fixed;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1500;
  pointer-events: none;
}

.cursor-overlay {
  width: 30px;
  height: 30px;
  border: 1px white solid;
  border-radius: 50%;
  position: absolute;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: fixed;
  -webkit-animation: cursorBounce .5s infinite alternate;
          animation: cursorBounce .5s infinite alternate;
  z-index: 1001;
}

.cursor.day-theme {
  background: black;
}

.cursor-overlay.day-theme {
  border: 1px black solid;
}

.cursorClick {
  border: 3px solid orange;
  -webkit-animation: cursorExClick .5s forwards;
          animation: cursorExClick .5s forwards;
}

@-webkit-keyframes cursorBounce {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: .6;
  }
}

@keyframes cursorBounce {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: .6;
  }
}

@-webkit-keyframes cursorHover {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: .6;
  }
}

@keyframes cursorHover {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: .6;
  }
}

@-webkit-keyframes cursorExClick {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes cursorExClick {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(3);
            transform: scale(3);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

.mainbody {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: 100%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: row;
  z-index: 1000;
  cursor: none;
}

#navContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5%;
  height: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  z-index: 2;
  cursor: none;
}

#hamIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  height: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  cursor: none;
}

#hamIcon.day-theme {
  color: var(--iconDay);
}

#hamIcon:hover {
  color: orange;
}

#reactiveNbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 30%;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  cursor: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#slidIndexCon.off{
  display: none;

}
#slidIndexCon.on{
  display: flex;

}

#reactiveNbar a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  white-space: nowrap;
  height: 40px;
  text-decoration: none;
  font-size: 20px;
  cursor: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff961e), to(#e28a05));
  background-image: linear-gradient(#ff961e, #e28a05);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

#reactiveNbar a:hover {
  background-size: 120% 1px, auto;
}

#myLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 20%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  font-size: 20px;
  cursor: none;
}

#myLinks a {
  text-decoration: none;
  cursor: none;
}

#navContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: none;
}

#navbarItemsCon {
  z-index: 500;
  overflow-x: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  width: 300px;
  height: 100%;
  -ms-grid-column-align: center;
      justify-self: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: none;
  position: absolute;
  -webkit-transition: 1s ease-in;
  transition: 1s ease-in;
  -webkit-animation: slideNav 1s forwards;
          animation: slideNav 1s forwards;
  border-right: 1px white solid;
  background: #ff8800;
  -webkit-box-shadow: 0px 3px 11px #202020;
          box-shadow: 0px 3px 11px #202020;
}

#navbarItemsCon a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 10%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 20px;
  cursor: none;
  text-decoration: none;
}

#navbarItemsCon.day-theme {
  border-right: 1px #00000030 solid;
}

@-webkit-keyframes slideNav {
  from {
    left: -300px;
  }
  to {
    left: 0px;
  }
}

@keyframes slideNav {
  from {
    left: -300px;
  }
  to {
    left: 0px;
  }
}

.mainbody::-moz-selection {
  background: #ff961e;
  color: black;
}

.mainbody::selection {
  background: #ff961e;
  color: black;
}

#navbarItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  cursor: none;
}

.cursorShrink {
  color: white;
  cursor: none;
}

.cursorShrink::-moz-selection {
  background: #ff961e;
  color: black;
}

.cursorShrink::selection {
  background: #ff961e;
  color: black;
}

.cursorShrink.day-theme {
  color: var(--iconDay);
}

#navbarItem:hover {
  background: orange;
}

#insta:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  -webkit-transition: 0.5s ease-in;
  transition: 0.5s ease-in;
}

#facebook:hover {
  color: #4267b2;
  font-size: 30px;
  -webkit-transition: 0.5s ease-in;
  transition: 0.5s ease-in;
}

#github:hover {
  background: black;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  -webkit-transition: 0.5s ease-in;
  transition: 0.5s ease-in;
}

#navbarOne {
  display: flex;
  width: 80%;
  height: 50px;
  position: absolute;
  align-items: center;
  top: 4%;
  left: 10%;
  align-self: center;
  justify-self: center;
  justify-content: space-between;
}
#navTitle{
  display: flex;
    justify-content: center;
    align-items: center;
}

#navTitle img{
  width: 20%;
}

#mode {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5vh;
  height: 40%;
  border: 2px solid #5e5757;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 30px;
  padding: 5px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#modeBall {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 115%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: white;
  border-radius: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#modeBall:active {
  -webkit-transition: 1s ease-in;
  transition: 1s ease-in;
}

#projects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 90%;
  height: 80%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-wrap: nowrap;
  flex-wrap: wrap;
  /* overflow: scroll; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: scroll;
  position: fixed;
}

#projects::-webkit-scrollbar {
  display: none;
  scrollbar-width: 0px;
}

#projectButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  width: 90%;
  height: 20%;
  background: red;
  z-index: 1;
}

.slidButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 4%;
  height: 4%;
  position: fixed;
  z-index: 2;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.slidButton.day-theme {
  color: black;
}

.slidButton:hover {
  font-size: 22px;
}

.slidButton:active {
  color: orange;
}

#buttonOne {
  -ms-flex-item-align: self-start;
      -ms-grid-row-align: self-start;
      align-self: self-start;
  margin-left: 10px;
}

#buttonTwo {
  -ms-flex-item-align: self-end;
      -ms-grid-row-align: self-end;
      align-self: self-end;
  margin-right: 10px;
}

.project {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  #border-top: white solid 1px;
  #border-bottom: white solid 1px;
  position: relative;
  -webkit-animation: slide 2s infinite;
  animation: slide 2s infinite;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-evenly;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#projectTitleCon p::-moz-selection, h2::-moz-selection {
  background: #ff961e;
  color: black;
}

#projectTitleCon p::selection, h2::selection {
  background: #ff961e;
  color: black;
}

.project.day-theme {
  color: black;
  border-top: black solid 1px;
  border-bottom: black solid 1px;
}

#slidIndexCon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 40%;
  height: 15%;
  position: fixed;
  z-index: 2;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  bottom: 150px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
  align-items: center;
  -ms-flex-item-align: end;
      align-self: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
}

.slidIndex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50%;
  background: #ffffffbf;
  width: 5%;
  -webkit-box-shadow: 0 1px 3px 0 #202020;
          box-shadow: 0 1px 3px 0 #202020;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.slidIndex.day-theme {
  background: var(--iconDay);
}

.slidIndex:hover {
  border-radius: 0;
  background: #ffffffd2;
  height: 60%;
}

@-webkit-keyframes slide {
  from {
    -webkit-transform: 0.1;
            transform: 0.1;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide {
  from {
    -webkit-transform: 0.1;
            transform: 0.1;
  }
  to {
    opacity: 1;
  }
}

#projectTitleCon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 40%;
  height: 80%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: normal;
      -ms-flex-pack: normal;
          justify-content: normal;
  -ms-flex-item-align: center;
      align-self: center;
  gap: 10px;
}

#projectTitleCon::-moz-selection {
  background: #ff961e;
  color: black;
}

#projectTitleCon::selection {
  background: #ff961e;
  color: black;
}

#projectTitleCon br::-moz-selection {
  background: #ff961e;
  color: black;
}

#projectTitleCon br::selection {
  background: #ff961e;
  color: black;
}

#projectTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 5%;
  -ms-flex-item-align: start;
      align-self: flex-start;
  gap: 20px;
}

#projectGitLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
}

#projectDesc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 4px;
}

#projectText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: self-start;
      align-self: self-start;
  margin-top: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#projectText b {
  font-size: 16px;
  color: #ff961e;
}

#projectText b::-moz-selection {
  background: #ff961e;
  color: black;
}

#projectText b::selection {
  background: #ff961e;
  color: black;
}

#projectText a {
  color: orange;
}

#projectText a:hover {
  color: #008cff;
}

#projectVid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  width: 40%;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 5px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#projectVid video {
  width: 100%;
  -webkit-box-shadow: 0px 3px 11px #202020;
          box-shadow: 0px 3px 11px #202020;
}

#projectTextV iframe{
  width: 40%;
}

#projectTextV {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

#projectTextVI {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

#projectVidButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: none;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#projectVidButtons i {
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#projectVidButtons i:hover {
  color: orange;
  font-size: 20px;
}

#projectTextV a, #projectTextV video {
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#projectTextV a:hover, #projectTextV video:hover {
  -webkit-filter: brightness(1);
          filter: brightness(1);
}

#projectText p::-moz-selection {
  background: #ff961e;
  color: black;
}

#projectText p::selection {
  background: #ff961e;
  color: black;
}
/*# sourceMappingURL=main.css.map */


#modeBall.day-theme{
  background: #202020;
}


#homeTitle{
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 70%;
  font-size: 30px;
}

#Homelogo ::-moz-selection {
  background: #ff961e;
  color: black;
}


#navBarItemsButCon {
  width: 100%;
  display: flex;
  height: 84%;
  flex-direction: column;
  padding-top: 32%;
  justify-content: space-between;
}
  
  #nBILink{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 10px;
  }

  .proLangCon{
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    gap: 40px;
  }
  
  #progressBarCon{
    display: flex;
    width: 400px;
    flex-direction: column;
    gap:5px;
    background: #1c1b1b;
    padding: 15px;
    border-radius: 8px;
    z-index: 100;
    justify-content: center;
    transition: 0.5s ease-in-out;
    box-shadow: 0px 0px 2px transparent;
  }
  
  
  #progressBar{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  #progressbarTitle{
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 20px;
  }
  
  #progessCon{
    background: #403f3f;
  }
  
  #progress{
    background: #ff961e;
    height: 20px;
    border-radius: 2px;
    animation: loadingIn 2s  forwards;
  }
  
  @-webkit-keyframes loadingIn {
    from {
      width: 0%;
    }
  }
  
  
  #aboutTitleCon {
    width: 90%;
    gap: 10px;
    flex-direction: column;
    font-size: 25px;
  }
  
  
  
  #progressBarCon.day-theme{
    background: #fff;
    box-shadow: 0 0 2px rgb(0 0 0 );
    transition: 0.5s ease-in-out;
  }
  
  #progessCon.day-theme{
    background: #e1e1e1;
  }
  
  #progressBarCon:hover{
    transform: scale(1.1);
  }
  
  
  #aboutTitle {
    display: flex;
    align-self: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    width: 90%;
    height: 85%;
    gap: 60px;
  }

@media only screen and (max-width: 768px) {
  .mainbody {
    width: 100%;
    height: 100%;
    align-items: center;
    position: absolute;
  }

  #projects {
    width: 90%;
    height: 90%;
    flex-direction: row;
    gap: 20px;
    /* position: absolute; */
    align-self: flex-end;
    justify-content: center;
}

#aboutTitle{
  height: 100%;
}

#pThree{
padding-bottom: 60px;
}

.slidButton{
  display: none;
}
#navbarOne {
  z-index: 400;
}

#pFour{
  height: 100%;
}

#about{
  
}
.project {
  flex-direction: column;
  height: auto;
  width: 90%;
    gap: 20px;
    border-top: none;
    /* overflow: hidden; */
}
#projectTitleCon {
  width: 90%;
  gap: 10px;
  flex-direction: column;
}
#projectText {
  flex-direction: column;
}
#projectVid {
  width: 100%;
}
#homeTitle{
  text-align: center;
  width: 100%;
}
#slidIndexCon{
  width: 100%;
  height: 20%;
}
#navContainer{
  padding-left: 10px;
}
#navbarItemsCon{
  width: 100%;
  height: 100%;
  padding:0px;
  position: relative;
}

#slideIndex{
  width: 50%;
}

#slidIndexCon{
flex-direction: column;
right: 0;
gap: 10px;
flex-wrap: nowrap;
}

#navbarOne{
  top: 0%;
}

}


/* #projectVid::-webkit-scrollbar {
  background: transparent;
}

#projectVid::-webkit-scrollbar-thumb {
  background-color: #ff961e;
  border-radius: 3px;
  height: 4px;
  width: 5px;
  outline: 1px solid #2e313400;
}
#projectVid::-webkit-scrollbar-thumb:hover {
  background-color: #c96e05;
}

#projectVid::-webkit-scrollbar-track {
  background: #0000007d;
  border-radius: 3px;
} */