* {
  margin: 0;
  padding: 0;
  cursor: url(images/regcursorv4.png) 20 15, auto;
}

body {
  background-color: rgba(6, 19, 53, 255);

  font-family: "Nunito", sans-serif;
  font-weight: bold;
  color: white;
}

@keyframes hiIntro {
  from {
    opacity: 0;
    bottom: 40%;
  }
  to {
    opacity: 1;
    bottom: 50%;
  }
}
@keyframes hiOutro {
  from {
    opacity: 1;
    bottom: 50%;
  }
  to {
    opacity: 0;
    bottom: 40%;
  }
}
@keyframes whoIntro {
  from {
    opacity: 0;
    bottom: 32%;
  }
  to {
    opacity: 1;
    bottom: 42%;
  }
}
@keyframes whoOutro {
  from {
    opacity: 1;
    bottom: 42%;
  }
  to {
    opacity: 0;
    bottom: 32%;
  }
}

#textHi {
  font-size: 48px;
  position: fixed;
  bottom: 40%;
  left: 10%;
  opacity: 0;
  animation: hiIntro 1.5s ease 0.3s 1 forwards;
}

#textWho {
  font-size: 48px;
  position: fixed;
  bottom: 32%;
  left: 11.5%;
  opacity: 0;
  animation: whoIntro 1.5s ease 0.3s 1 forwards;
}
button {
  position: fixed;
  top: 1%;
  opacity: 0;

  cursor: url(images/pointerv7.png) 20 20, auto;

  background-color: transparent;
  border: none;

  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: white;
}
button:after {
  display: block;
  content: "";
  border-bottom: solid 3px #9368e4;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
button:hover:after {
  transform: scaleX(1);
}

button:hover {
  transform: scale(1.1);
}

@keyframes navBarBtnsIntro {
  from {
    opacity: 0;
    top: 1%;
  }
  to {
    opacity: 1;
    top: 3.5%;
  }
}

@keyframes navBarBtnsOutro {
  from {
    opacity: 1;
    top: 3.5%;
  }
  to {
    opacity: 0;
    top: 1%;
  }
}



#btnWork {
  left: 3%;
  animation: navBarBtnsIntro 1s ease 1.3s 1 forwards;
}
#btnAbout {
  left: 15%;
  animation: navBarBtnsIntro 1s ease 1.7s 1 forwards;
}
#btnContact {
  left: 27%;
  animation: navBarBtnsIntro 1s ease 2.1s 1 forwards;
}

.image_layers {
  position: relative;
}

@keyframes pfpIntro {
  from {
    opacity: 0;
    top: 10%;
  }
  to {
    opacity: 1;
    top: 0%;
  }
}
@keyframes pfpOutro {
  from {
    opacity: 1;
    top: 0%;
  }
  to {
    opacity: 0;
    top: 10%;
  }
}

@keyframes homePfpScaleDown {
  from {
    transform: scale(1);
    border-radius: 0;
    top: 0%;
    right: 0%;
  }
  to {
    transform: scale(0.42);
    border-radius: 50%;
    top: -18.4%;
    right: 1.6%;
  }
}
@keyframes homePfpCenter {
  from {
    transform: scale(0.42);
    top: -18.4%;
    right: 1.6%;
  }
  to {
    transform: scale(0.1);
    top: -44.5%;
    right: 26%;
  }
}

#pfp {
  position: fixed;
  top: 10%;
  right: 0;
  opacity: 0;
  animation: pfpIntro 1.5s ease 0.7s 1 forwards;
}

@keyframes homePfpOutro {
  from {
    opacity: 1;
    top: -44.5%;
    transform: scale(0.1);
    right: 26%;
    border-radius: 50%;
  }
  to {
    opacity: 0;
    top: -47%;
    transform: scale(0.1);
    right: 26%;
    border-radius: 50%;
  }
}

#homePfp {
  position: fixed;
  top: 10%;
  right: 0;
  opacity: 0;
  cursor: url(images/pointerv7.png) 20 20, pointer;
  animation: pfpIntro 1.5s ease 0.7s 1 forwards,
    homePfpScaleDown 1.5s ease 3.2s 1 forwards,
    homePfpCenter 1.5s ease 5.2s 1 forwards; 
}


@keyframes githubLogoIntro {
  from {
    opacity: 0;
    top: 0.5%;
  }
  to {
    opacity: 1;
    top: 1.5%;
  }
}

@keyframes githubLogoOutro {
  from {
    opacity: 1;
    top: 1.5%;
  }
  to {
    opacity: 0;
    top: 0.5%;
  }
}

#github {
  position: fixed;
  cursor: url(images/pointerv7.png) 20 20, pointer;
  top: 0.5%;
  right: 1%;
  width: 3%;
  opacity: 0;

  animation: githubLogoIntro 0.7s ease 2.5s 1 forwards;
}