@primary_color : #067BC2;
// @lime_color : #32CD32;
@lime_color : #6C63FF;
@dark_color: #000;
@light_color: #FFF;


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
html {  
    scroll-behavior: smooth;
}

body { 
    background-image:
    linear-gradient(to bottom, rgba(45, 46, 48, 0.52), rgba(56, 49, 49, 0.73)),
    url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;

    font-family: 'Poppins', sans-serif; 
    overflow-x: hidden; 
}
#title-description {
  font-size: 21px;

  // text-align: ;
}
.voltage-button {
  position: relative;
}

.voltage-button button {
  color: white;
  background: #0D1127;
  padding: 1rem 3rem 1rem 3rem;
  border-radius: 5rem;
  border: 5px solid #5978F3;
  font-size: 1.2rem;
  line-height: 1em;
  letter-spacing: 0.075em;
  transition: background 0.3s;
}

.voltage-button button:hover {
  cursor: pointer;
  background: #0F1C53;
}

.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
  opacity: 1;
}

.voltage-button svg {
  display: block;
  position: absolute;
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

.voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow");
}

.voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}

.voltage-button .dots .dot {
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
}

.voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite;
}

.voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: 0.5s;
}

.voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s;
}

.voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s;
}

.voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s;
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}

@keyframes fly-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(-1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(-3rem) scale(0.2);
  }
}

@keyframes fly-down {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }

  5% {
    opacity: 1;
    transform: translateY(1.5rem) scale(0.4);
  }

  10%, 100% {
    opacity: 0;
    transform: translateY(3rem) scale(0.2);
  }
}


.button-generate {
  border: none;
  display: block;
  position: relative;
  padding: 0.7em 2.4em;
  font-size: 18px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  color: royalblue;
  z-index: 1;
  font-family: inherit;
  font-weight: 500;
}

.button-generate .custom-span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  border: 4px solid royalblue;
}

.button-generate .custom-span::before {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  height: 500%;
  background: var(--lightgray);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 0.3s;
}

.button-generate:hover .custom-span::before {
  transform: translate(-50%, -50%) rotate(-125deg);
  width: 100%;
  background: royalblue;
}

.button-generate:hover {
  color: white;
}

.button-generate:active .custom-span::before {
  background: #2751cd;
}

.custom-generate-btn {
  color: #fff;
	padding: 10px 20px;
  // font-size: 1.2rem;
	text-decoration: none;
	background-color: #6C63FF;
}

.title-text {
  color: #6C63FF;
  // font-style: italic;
}

.custom-generate-btn:hover {
  color: #6C63FF;
	border: 2px solid #6C63FF;
	text-decoration: none;
  font-weight: bold;
	background-color: #fff;
}

.github_account, #title_page{
    background-image: linear-gradient(
        to right,
        @lime_color,
        @lime_color 50%,
        @light_color 50%
    );
    font-size: 2.5rem;
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out; 
}

.card-header h4{
    background-image: linear-gradient(
        to right,
        @primary_color,
        @primary_color 50%,
        @dark_color 50%
    );
    // font-size: 2.5rem;
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    // padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out; 
}

.github_account:before, #title_page:before{
    content: '';
    background: @lime_color;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    font-weight: bold;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

 .card-header h4:before{
    content: '';
    background: @primary_color;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    font-weight: bold;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

.github_account:hover, #title_page:hover, .card-header h4:hover {
    background-position: 0;
}

.github_account:hover::before, #title_page:hover::before{ 
    width: 100%;
}

.author {
  color: @light_color;
  font-weight: bold;
  margin-top: 70px;
  font-size: 1rem;
}

#link_account {
  color: @lime_color;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 30px;
    z-index: 99;
    font-size: 25px;
    border: none;
    outline: none;
    background-color: @dark_color;
    color: @lime_color;
    // border: 1px dashed @lime_color;
    cursor: pointer;
    padding: 15px 22px;
    border-radius: 100px;
}

.subject_title {
  // background-color: red;
  font-size: 0.9em;
}

//   for custom scrollbar 

/* width */
  ::-webkit-scrollbar {
    // width: 14px;
    width: 5px;
    background-color: #000000;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: @lime_color; 
    // border-radius: 10px;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #708bf5; 
  }