:root{
  --waveAnimationLength: 0vw;
  --waveBackgroundColor: white;
}


.overflow{
  overflow: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.navbar .nav-link {
  color: #fff !important;
}

img{
  width: 100%;
  height: 80%;
}

li{
  list-style: none;
}

.expItem li{
  list-style-type: disc;
}

.jQuery, .flask, .cProgramming, .java, .mysql, .mongoDB{
  background: url("jquery-icon.svg");
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
}

.flask{
  background: url("Flask.png");
}

.cProgramming{
  background: url("c.png");
}

.java{
  background: url("java.png");
}

.mysql{
  background: url("mysql.png");
}

.mongoDB{
  background: url("mongoDB.png");
}
.text-orange{
  color: orange;
}

.text-purple{
  color: rgb(75,0,130);
}

.background-image{
  height: 100vh;
  width: 100%;
  z-index: 2;

  background-image: radial-gradient(
    rgba(10, 110, 253, 0.1) 20%,
    transparent 22%
  );
  background-position: 0% 0%;
  background-size: 8vw 8vw;

  position: absolute;
  top: 0%;
  left: 0%;
  transition: opacity 0.8s ease, background-size 0.8s ease, background-position 0.8s ease;
}

.background-image2{
  height: 100vh;
  width: 100%;
  z-index: 1;

  background-image: url("https://images.unsplash.com/photo-1522252234503-e356532cafd5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1325&q=80");
  background-position: center 50%;
  background-size: 110vw;
  opacity: 0.2;

  position: absolute;
  top: 0%;
  left: 0%;
  transition: opacity 0.8s ease, background-size 0.8s ease, background-position 0.8s ease;
}

#cover{
  height: 100vh;
  width: 100%;
  position: relative;
  text-align: center;
  margin-bottom: 50px;
  background-color: #212529;
  /*overflow-x: hidden;*/
}

.MainText{
  color: white;
  font-family: "Ibarra Real Nova", serif;
  position: absolute;
  top: 50%;
  left: 28%;
  text-align: left;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: clamp(2vw, 2vw, 3vw); 
}

.MainText h1{
  font-size: clamp(3vw, 3vw, 4vw); 
}

.MainText p{
  font-size: clamp(1.5vw, 1.5vw, 2.5vw); 
  /*color: rgba(106, 17, 203, 1);*/
}

.MainText hr{
  border: 2px solid blue;
  background-color: blue;
  border-radius: 5px;
  width: 120%;
}

.header{
  pointer-events: none; 
}

.fancyLink{
  color: white !important; 
  display: block;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.fancyLinkContainer:hover > .fancyLink{
  opacity: 0.1;
}

.fancyLinkContainer:hover > .fancyLink:hover{
  opacity: 1;
}

.MainText:hover ~ .background-image{
  background-size: 7vw 7vw;
  opacity: 0.4;
}

#cover[data-index="-1"] > .background-image{
  background-position: 0% 0%;
}

#cover[data-index="0"] > .background-image{
  background-position: 0% -25%;
}

#cover[data-index="1"] > .background-image{
  background-position: 0% -50%;
}

#cover[data-index="2"] > .background-image{
  background-position: 0% -75%;
}

#cover[data-index="3"] > .background-image{
  background-position: 0% -100%;
}

.MainText:hover ~ .background-image2{
  background-size: 100vw;
  opacity: 0.1;
}


#cover[data-index="-1"] > .background-image2{
  background-position: center 40%;
}

#cover[data-index="0"] > .background-image2{
  background-position: center 45%;
}

#cover[data-index="1"] > .background-image2{
  background-position: center 50%;
}

#cover[data-index="2"] > .background-image2{
  background-position: center 55%;
}

#cover[data-index="3"] > .background-image2{
  background-position: center 60%;
}



.SocialMedia a{
  margin-left: 20px;
  margin-right: 20px;
  font-size: 40px;
}

.fadeInO{
  animation: fadeInO 3s forwards;
}

@keyframes fadeInO {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes fadeIn {
  0% {opacity:0; transform: translate(0%, 0%)}
  100% {opacity:1; transform: translate(-50%, -50%)}
}

.fadeInLeft{
  animation: fadeInLeft 3s forwards;
}

@keyframes fadeInLeft {
  0% {opacity:0; transform: translateX(-20%);}
  100% {opacity:1; transform: translateX(0%);}
}

.fadeInRight{
  animation: fadeInRight 3s forwards;
}

@keyframes fadeInRight {
  0% {opacity:0; transform: translateX(20%);}
  100% {opacity:1; transform: translateX(0%);}
}

.box{
  background-color: hsl(220, 33.3%, 98.2%);
  border: 5px solid black;
  border-radius: 5px;
}

.move{
  margin-top: -20px;
  border: 0px solid transparent;
  border-radius: 15px;
}

.border1{
  border-left: 2px solid grey;
  border-right: 2px solid grey;
}

.border2{
  animation: colorChange 5s infinite alternate-reverse;
}

.border3{
  animation: colorChange2 5s infinite alternate-reverse;
}

@keyframes colorChange {
  0% {border-bottom: 2px solid rgba(106, 17, 203, 0.5);}
  100% {border-bottom: 2px solid rgba(37, 117, 252, 0.5);}
}

@keyframes colorChange2 {
  0% {border-left: 5px solid rgba(106, 17, 203, 0.5);
          border-right: 5px solid rgba(106, 17, 203, 0.5);}
  100% {border-left: 5px solid rgba(37, 117, 252, 0.5);
              border-right: 5px solid rgba(37, 117, 252, 0.5);}
}

/*.dot {
    height: 50px;
    width: 50px;
    background-color: #bbb;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 40%;
    right: 20%;
   animation:slide 5s ease-in-out infinite alternate;
}

.dot2, .dot4{
  animation-direction:alternate-reverse;
  right: 40%;
}

.dot3 {
  right: 80%;
}

.dot4 {
  right: 60%;
}*/

@keyframes slide {
  0% {transform:translateY(00%); background-color: rgba(106, 17, 203, 1); }
  100% {transform:translateY(200%); background-color: rgba(37, 117, 252, 1);}
}

.anchor{
  top: -75px;
  position: relative;
  display: block;
  visibility: hidden;
}

#first, #firstUl a{
  position: relative;
}

#firstUl a:after {
  bottom: 0px;
  width: 0px;
  content: "";
  height: 3px;
  right: 50%;
  position: absolute;
  background: white;
  transition: width 0.5s ease 0s, right 0.5s ease 0s;
}

#firstUl a:hover:after {
  width: 100%;
  right: 0px;
}

.border-custom3, .border-custom4{
  border-radius: 0px;
}

.border-custom3{
  animation: colorChange3 5s infinite alternate;
}

.border-custom4{
  animation: colorChange4 5s infinite alternate;
}

.proItem{
  border-radius: 5px;
  border: 2px solid transparent;
  z-index: 1;
  /*background-color: white;*/
  transform: scale(0.95);
  animation: proItemHoverR 0.25s forwards;
}

.proItem h3, .proItem p, .hobItem h3{
  pointer-events: none;
}

.proItem:hover, .proItemHover{
  animation: proItemHover 0.5s forwards;
  z-index: 2;
}

@keyframes proItemHover {
  0%{box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2); border: 2px solid transparent; transform: scale(0.95);}
  100%{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border: 2px solid black; transform: scale(1);}
}

@keyframes proItemHoverR {
  0%{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border: 2px solid black; transform: scale(1);}
  100%{box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2); border: 2px solid transparent; transform: scale(0.95);}
}

@keyframes colorChange3 {
  0% {border-left: 5px solid rgba(114, 175, 211, 1);
          border-right: 5px solid rgba(114, 175, 211, 1);}
  100% {border-left: 5px solid rgba(55, 236, 186, 1);
              border-right: 5px solid rgba(55, 236, 186, 1);}
}

@keyframes colorChange4 {
  0% {border-top: 5px solid rgba(55, 236, 186, 1);
          border-bottom: 5px solid rgba(114, 175, 211, 1);}
  100% {border-top: 5px solid rgba(114, 175, 211, 1);
              border-bottom: 5px solid rgba(55, 236, 186, 1);}
}

#wave{
  position: absolute;
  background-color: var(--waveBackgroundColor);
  height: var(--waveAnimationLength);
  width: 100%;
  top: 0%;
  left: 0%;
  transition: all 0.5s ease;
  z-index: -100;
}

/*#wave2{
  position: absolute;
  background-color: lightblue;
  height: 50%;
  width: var(--waveAnimationLength);
  top: 50%;
  right: 0%;
  transition: all 0.5s ease;
}*/

.hobItem{
  border: 2px solid transparent;
  height: 25vh;
  border-radius: 1vw;
  z-index: 1;
  position: relative;
  overflow: hidden;
  transform: scale(0.95);
  animation: hobItemHoverR 0.25s forwards;
}

.hobItem:hover{
  animation: hobItemHover 0.35s forwards;
  z-index: 2;

  color: white;
  /*background: url("https://upload.wikimedia.org/wikipedia/en/b/b6/Toronto_Maple_Leafs_2016_logo.svg");*/
  text-shadow: 1px 1px 10px #005FB8, 0 0 0.5em #005FB8, 0 0 0.2em #005FB8;
}

@keyframes hobItemHover {
  0%{box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2); border: 0px solid transparent; transform: scale(0.95);}
  100%{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border: 0px solid black; transform: scale(1);}
}

@keyframes hobItemHoverR {
  0%{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border: 0px solid black; transform: scale(1);}
  100%{box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2); border: 0px solid transparent; transform: scale(0.95);}
}

.hobItemBackgound{
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0.5;
  background-color: white;

  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  z-index: -1;
}

.hobItem:hover .hobItemBackgound{
  opacity: 1;
}

.desItem{
  text-indent: 50px;
}

canvas{
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: -100;
}

.pill-item-25{
  width: 20%;
}

@media (max-width: 1000px){
  .navbar-nav {
    text-align: center;
}
}

@media (max-width: 800px){
.MainText{
  left: 35%;
  text-align: left;
  font-size: 20px; 
}

.MainText h1{
  font-size: 30px; 
}

.MainText p{
  font-size: 25px; 
}
.background-image2{
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}
.MainText:hover ~ .background-image2{
  background-size: cover;
}
.pill-item-25{
  width: auto;
}
}

@media only screen and (max-width: 800px) {
  .overflow{
    overflow: scroll;
  }
}