body {
    font-family: "Montserrat", sans-serif;
    scroll-behavior: smooth;
  }
  
  canvas {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    ;
    z-index: -1;
  }
  
  .menu-item {
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .5s;
    font-size: 13px;
    line-height: 29px;
    text-decoration: none;
    cursor: pointer;
    /*navbar menu items hover underline gradient color*/
    background-image: -webkit-linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-image: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    ;
    background-position: 50% 100%;
    background-size: 0% 4px;
    background-repeat: no-repeat;
    transition: all 0.3s linear;
  }
  
  /*navbar menu items hover underline gradient color*/
  .menu-item:hover {
    background-size: 100% 4px;
  }
  
  /*underline format */
  /*Special Text Color Style */
  .underline-text {
    width: 200px;
    height: 3px;
    background-image: -webkit-linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-image: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-size: 100% 4px;
    margin: auto;
  }
  
  .navbar-brand {
    font-size: 5rem;
    font-weight: bold;
  }
  
  .nav-item {
    padding: 0 50px;
  }
  
  #logo {
    font-size: 1.5rem;
  }
  
  .nav-link {
    font-size: 1.2rem;
  }
  
  /* Button collapse */
  .line1, .line2, .line3 {
    width: 23px;
    height: 3px;
    margin: 5px;
    transition: all .1s;
    background-color: black;
  }
  
  .change .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .change .line2 {
    opacity: 0;
  }
  
  .change .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  
  /* End of Button collapse */
  /*icons*/
  .icon-header {
    padding: 1.25%;
    text-decoration: none;
    margin-top: 15px;
    background-image: -webkit-linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-image: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-position: 50% 100%;
    background-size: 0% 4px;
    background-repeat: no-repeat;
    transition: all 0.3s linear;
  }
  
  .icon-header:hover {
    background-size: 100% 4px;
  }
  
  /*banner introduction*/
  .banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }
  
  /*banner*/
  .banner-heading {
    animation-name: anim;
    animation-duration: 2s;
    letter-spacing: .15em;
  }
  
  .banner-par {
    animation-name: anim;
    animation-duration: 3s;
    animation-delay: .9s;
    animation-fill-mode: backwards;
  }
  
  /*Hello my name animation */
  /* DEMO-SPECIFIC STYLES */
  #myname {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    /*  border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 auto;
    /* Gives that scrolling effect as the typing happens */
    /* Adjust as needed */
    animation:
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }
  
  /*Project Left Right Animation */
  .fromLeft {
    animation-name: fromLeft;
    animation-duration: 3s;
  }
  
  .fromRight {
    animation-name: fromRight;
    animation-duration: 3s;
  }
  
  .fromBehind {
    animation-name: fromBehind;
    animation-duration: 5s;
  }
  
  @keyframes fromLeft {
    0% {
      transform: translateX(-120px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes fromBehind {
    0% {
      transform: translateZ(-100px);
      opacity: 0;
    }
  
    100% {
      transform: translateZ(0);
      opacity: 1;
    }
  }
  
  @keyframes fromRight {
    0% {
      transform: translateX(30px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* The typing effect */
  @keyframes typing {
    from {
      width: 0
    }
  
    to {
      width: 100%
    }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to {
      border-color: transparent
    }
  
    50% {
      border-color: red;
    }
  }
  
  /* Need help text -SLIDER */
  /* [SLIDER] */
  .sliding-text, .sliding-text-contain {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .sliding-text-contain {
    width: 150px;
    height: 70px;
    position: relative;
    -webkit-animation: slide 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    animation: slide 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  }
  
  .sliding-text {
    position: absolute;
    height: 50px;
    top: 200%;
    line-height: 60px;
    font-size: 50px;
    background: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .sliding-text:first-child {
    top: 100%;
  }
  
  .sliding-text:last-child {
    top: 300%;
  }
  
  @-webkit-keyframes slide {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  
    15%, 30% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  
    45%, 60% {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
    }
  
    75%, 90% {
      -webkit-transform: translateY(-300%);
      transform: translateY(-300%);
    }
  
    100% {
      -webkit-transform: translateY(-400%);
      transform: translateY(-400%);
    }
  }
  
  @keyframes slide {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  
    15%, 30% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  
    45%, 60% {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
    }
  
    75%, 90% {
      -webkit-transform: translateY(-300%);
      transform: translateY(-300%);
    }
  
    100% {
      -webkit-transform: translateY(-400%);
      transform: translateY(-400%);
    }
  }
  
  /* End of [SLIDER] */
  #intro-choice-text {
    animation-name: anim;
    animation-duration: 2s;
    animation-delay: .4s;
    animation-fill-mode: backwards;
  }
  
  @keyframes anim {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
  
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .myButton {
    background: #B080FF;
    background-image: -webkit-linear-gradient(top, #B080FF, #FF8090);
    background-image: -moz-linear-gradient(top, #B080FF, #FF8090);
    background-image: -ms-linear-gradient(top, #B080FF, #FF8090);
    background-image: -o-linear-gradient(top, #B080FF, #FF8090);
    background-image: linear-gradient(to bottom, #B080FF, #FF8090);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 50px;
    line-height: 50px;
    color: #FFFFFF;
    width: 289px;
    font-size: 20px;
    padding: 6px 80px;
    box-shadow: 1px 1px 20px 0px #000000;
    -webkit-box-shadow: 1px 1px 20px 0px #000000;
    -moz-box-shadow: 1px 1px 20px 0px #000000;
    text-shadow: 1px 1px 20px #000000;
    border: solid #B080FF 1px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
  }
  
  .myButton:hover {
    background: #DF87FF;
    background-image: -webkit-linear-gradient(top, #DF87FF, #FF7575);
    background-image: -moz-linear-gradient(top, #DF87FF, #FF7575);
    background-image: -ms-linear-gradient(top, #DF87FF, #FF7575);
    background-image: -o-linear-gradient(top, #DF87FF, #FF7575);
    background-image: linear-gradient(to bottom, #DF87FF, #FF7575);
    text-decoration: none;
  }
  
  .myButton:active {
    position: relative;
    top: 1px;
  }
  
  /*Intro choice text */
  #intro-choice-text {
    margin: 50px;
  }
  
  #intro-choice-text a {
    font-weight: bold;
    font-size: 3em;
    transition: all 500ms;
    text-decoration: none;
    color: white;
  }
  
  #intro-choice-text a:hover {
    font-size: 55px;
    font-size-adjust: 20px;
  }
  
  /*Button choice text animation */
  .items-wrapper {}
  
  /* .floating-item {
    background: rgba(0,0,0,.65);
    border-radius: 5px;
  } */
  .first-item {
    animation: float 10s infinite;
  }
  
  .second-item {
    animation: float 10s linear infinite;
  }
  
  @keyframes float {
    0% {
      transform: translate(0)
    }
  
    50% {
      transform: translateX(-60px);
    }
  
    100% {
      transform: translateX(0);
    }
  }
  
  /*Gallery*/
  .gallery-img {
    backface-visibility: hidden;
    transition: all .5s;
    opacity: 0.8;
    background-image: -webkit-linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    background-image: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    ;
    background-position: 50% 100%;
    background-size: 0% 4px;
    background-repeat: no-repeat;
    transition: all 0.3s linear;
  }
  
  .gallery-img:hover {
    transform: scale(1.05);
    opacity: 1;
    background-size: 100% 4px;
  }
  
  /*Contact Text Edit*/
  .contact-text {
    padding: 30px;
    line-height: 3.7em;
    background: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
  
  .contact-text-animate {
    animation: float 15s infinite;
  }
  
  /*End of Contact Text Edit*/
  /*Form Place Holder Text Edit*/
  input[placeholder], textarea[placeholder] {
    text-align: center;
    background-color: white;
  }
  
  /*End of Form Place Holder Text Edit*/
  /*Border color of contact-form */
  
  input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus{
    border-width: 2pt;
    border-image-source: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
     border-image-slice: 1;
     color: black;
  }
  
  /*Submit Button */
  #submit:hover {
    background: linear-gradient(270deg, #B080FF 0%, #FF8090 100%);
    font-weight: bold;
  }
  #submit:active, .myButton:active {
    transform: scale(.95);
    filter: brightness(95%);
    color: white;
  }
  .input-error {
    box-shadow: 0 0 5px red;
  }