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

  :root {
    --formStart: 122.5px;
    --formEnd: 102.5px;
  }
  
  body {
    background-color: rgba(6, 19, 53, 255);
    animation: bgTransition 2s ease-in-out 0s 1 forwards;
  
    font-family: "Nunito", sans-serif;
    font-weight: bold;
    color: white;
  }
  
  @keyframes contactFormLogoIntro {
    from {
      opacity: 0;
      top: var(--formStart);
    }
    to {
      opacity: 1;
      top: var(--formEnd);
    }
  }
  
  @keyframes contactFormLogoOutro {
    from {
      opacity: 1;
      top: 15%;
    }
    to {
      opacity: 0;
      top: 17%;
    }
  }

  #contactForm {  
    position: absolute;
    /* top: 400px; */
    /* right: 4%; */
    opacity: 0;

    
    /* transform: scale(1.2); */

    
    

    animation: contactFormLogoIntro 0.9s ease 3s 1 forwards;

    
  }

  .formSections {
    text-align: center;
  }
  
  .formSections input {
    background-color: #9368e4;
    margin-top: 0px;
    padding: 1px;
    margin-bottom: 4px;
    border-radius: 7px;
    font-size: 16px;
    font-family: "Nunito", sans-serif;
    cursor: url(images/textCursor.png) 17 20, auto;
  }
  .formSections label {
    font-size: 24px;
    cursor: url(images/textCursor.png) 17 20, auto;
  }
  
  .formSections #submit {
    font-weight: bold;
    font-size: 22px;
    padding: 5px;
    margin-left: 1%; 
    margin-top: 5px;
    cursor: url(images/pointerv7.png) 20 20, auto;
  }
  .formSections textarea {
    background-color: #9368e4;
    margin-top: 0px;
    padding: 1px;
    margin-bottom: 4px;
    border-radius: 7px;
    font-size: 16px;
    font-family: "Nunito", sans-serif;
    resize: none;
    cursor: url(images/textCursor.png) 17 20, auto;
  }
  .formSections textarea::placeholder {
    color: black;
  }

  @keyframes hiIntro {
    from {
      opacity: 0;
      bottom: 40%;
    }
    to {
      opacity: 1;
      bottom: 50%;
    }
  }
  @keyframes hiOutro {
    from {
      opacity: 1;
      bottom: 50%;
    }
    to {
      opacity: 0;
      bottom: 40%;
    }
  }
  
  #textHi {
    font-size: 48px;
    position: fixed;
    bottom: 40%;
    left: 10%;
    opacity: 0;
    animation: hiIntro 1.5s ease 0.3s 1 forwards;
    cursor: url(images/textCursor.png) 17 20, auto;
  }
  
  button {
    position: fixed;
    top: 1%;
    opacity: 0;
  
    cursor: url(images/pointerv7.png) 20 20, auto; /*32 px*/
  
    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;
  }
  
  @keyframes homePfpIntro {
    from {
      opacity: 0;
      top: 10%;
    }
    to {
      opacity: 0;
      top: 0%;
    }
  }
  
  @keyframes homePfpOutro {
    from {
      transform: scale(0.1);
      top: -44.5%;
      right: 26%;
      opacity: 1;
    }
    to {
      transform: scale(0.1);
      top: -47%;
      right: 26%;
      opacity: 0;
    }
  }

  @keyframes homePfpScaleDown {
    from {
      transform: scale(1);
      top: 0%;
      right: 0%;
    }
    to {
      transform: scale(0.42);
      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%;
    }
  }
  @keyframes homePfpUp { 
    from {
      transform: scale(0.1);
      top: -44.5%;
      right: 26%;
    }
    to {
      transform: scale(0.1);
      top: -47%;
      right: 26%;
    }
  }
  @keyframes homePfpDown {
    from {
      transform: scale(0.1);
      top: -47%;
      right: 26%;
    }
    to {
      transform: scale(0.1);
      top: -44.5%;
      right: 26%;
      opacity: 1;
    }
  }
  
  #homePfp {
    position: fixed;
    top: 10%;
    right: 0;
    opacity: 0;
    border-radius: 50%;
    cursor: url(images/pointerv7.png) 20 20, pointer; 
    animation: homePfpIntro 0.5s ease 0.5s 1 forwards,
      homePfpScaleDown 0.5s ease 1s 1 forwards,
      homePfpCenter 0.5s ease 1.5 forwards,
      homePfpUp 0.5s ease 2s forwards,
      homePfpDown 1s ease 2.5s 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 3.4s 1 forwards;
  }