#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

 @media (max-width: 750px) {
  #background-video { display: none; }
    body {
      background: url("../imgs/pages-galaxy.jpg") no-repeat;
      background-size: cover;
    }
}
@media (max-width: 420px) {
  #background-video { display: none; }
  body {
    background: url("../imgs/pages-galaxy.jpg") no-repeat;
    background-size: cover;
  }

}

:root {
  --font-family: "Share Tech Mono", sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #cf279d;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* Variables end */

html {
  scroll-behavior: smooth;
}
section{
  height: 100vh;
  width: 100vw;
}
/* CSS Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}
a {
  text-decoration: none; 
}



nav {
  position:static;
  top: 0%;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color:transparent;
}

nav a {
  color: var(--primary-color);
  transition: var(--transition);
}
nav a:hover {
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
}

nav ul {
  display: flex;
  gap: 1.9rem;
}

nav ul li {
  font-weight: var(--bold-font);
}
.burger-menu {
  color: var(--primary-color);
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}


  
.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #6b1839,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-family: 'Press Start 2P', 'sans-serif';
  text-transform: uppercase;
  font-size: 65px;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
  
}

 
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}



.DPDC a{
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
}

.DPDC{
  font-family: 'Share Tech Mono';
  justify-content: right;
 
  /* right: 50%;
  top: 50%;
   */

   
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;

  display:block!important;
  text-decoration:none!important;
  border:none!important;
  cursor:pointer!important;
  background:transparent!important;
  line-height:0!important;
  top:0;right:0;bottom:0;left:0
}

.typewrite {
  position:absolute;
  top: 80%;
  left:50;
  font-size: 20px;
  font-family: 'Press Start 2P';
  color: #ff2483;
  text-transform: uppercase;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgb(149, 173, 241); /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}



/* 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: rgb(236, 205, 231); }
}



.social{
    /* padding-right: 100px; */
    position: absolute;
    bottom: 10%;
    right: 10%;
}


.social li {
  
  list-style-type:none;
  float: right;
  align-items: right;
  text-decoration: none;
  font-size: 17px;

  padding-right: 10px;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
animation: shine 2s forwards, flicker 3s infinite;

}
.fab{
  color: rgb(255, 0, 234);
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;

}

.fab:hover{ color: #fc44ed;
  text-shadow: #ffe6ff;}


.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  max-width: 68.75rem;
  margin: auto;
}
.hero img {
  height: 30rem;
  width: 30rem;
  border: 3px outset #cf279d;
  border-radius: 50%;
  opacity:1.0
}

.bio {
  width: 25rem;
  padding: 0.625rem;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px #8b8eaf;
  background-color: rgba(255,255,255,.0);
  text-align: center;

}

.bio h2 {
  margin-bottom: var(--bottom-margin);
  color: #f4e6ff;
  font-family: 'Press Start 2P';
  font-size: smaller;
text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
-0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  
}

.bio p {
  color: #ff65bd;
  font-weight: bold;
  line-height: var(--line-height);
  padding: 0.3rem 0;
}
  

  .more-about {
    font-family: 'Press Start 2P';
    text-align: center;
    padding: 1rem 6rem;
  
  }
  
  .more-about h2 {
    margin-bottom: var(--bottom-margin);
    text-align: center;
    color: #ffe6ff;
    
    font-weight: bold;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  
  .more-about p {
    color: #ff65bd;
    line-height: var(--line-height);
    padding: 0.4rem;
    margin-top: 5rem;
  }

  /* skills section */

  .skills {
    max-width: 68.75rem;
    margin: auto;
    text-align: center;
    margin-top: 2.5rem;
  }
  
  .skill-header {
    /* margin-bottom: 1rem; */
    color: #ffe6ff;
    font-family: 'Press Start 2P';
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  
  .skills-wrapper img {
    padding: 1.25rem;
  }
  
  .icon {
    width: 10rem;
    height: 10rem;
  }

  .icon-card {
    background-color: rgba(255,255,255,.0);
    border-radius: 11px;
    box-shadow: 0 3px 10px var(--secondary-shadow);
    padding: 20px;
    margin: 10px;
  }

  /* projects section */

  .projects {
    padding: 32px 0;
    margin-top: 2rem;
    background-color:rgba(107, 110, 115,0);
    
  }
  
  .project-pic {
    width: 65%;
    height: 60%;
  }
  
  .projects-container {
    display: flex;
    align-items: center;
    justify-content: center;
    
    
  }

  .projects-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #ffe6ff;
    font-family: 'Press Start 2P';
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  
  .project-container {
    text-align: center;
    width: 21.875rem;
    padding: 1rem;
    
  }

  .project-container p {
    padding: 0.4rem;
    color: #f1a3d0;
  }
  
  .project-title {
    color: #ff65bd;
    margin-bottom: var(--bottom-margin);
  }
  
  .project-details {
    margin-bottom: var(--bottom-margin);
  }
  
  .project-card {
    background-color: rgba(255,255,255,.0);
    border-radius: 11px;
    box-shadow: 0 3px 10px #8b8eaf;
    padding: 20px;
    margin: 10px;
  }


  /* contact section*/
  .contact {
    margin-top: 2rem;
    color: #ffe6ff;
    font-family: 'Press Start 2P';
    font-size: small;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
  -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
  0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;

  }
  
  .contact h2 {
    text-align: center;
    margin-bottom: var(--bottom-margin-2);
  }
  
  .contact-form-container {
    max-width: 40.75rem;
    margin: 0 auto;
    padding: 0.938rem;
    border-radius: 5px;
    box-shadow: 0 3px 10px var(--secondary-shadow);
  }

  .contact-form-container label {
    line-height: 2.7em;
    /* font-weight: var(--bold-font); */
    color:#fd72c1;
    text-shadow: none;
  }
  
  .contact-form-container textarea {
    min-height: 6.25rem;
    font-size: 14px;
  }
  
  .contact-form-container .input-field {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    border: none;
    background-color: #ffe6ff;
    border: 2px outset #cf279d;
    font-size: 0.875rem;
    outline: none;
  }

  .input-field::placeholder {
    padding: 0.5rem;
    color: #f1a3d0;
  }
  .submit-btn {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: #838282;
    border: 2px solid #cf279d;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: var(--bold-font);
    transition: var(--transition);
  }

  .submit-btn:hover {
    background-color: #cf279d;
    border: 2px solid #cf279d;
    cursor: pointer;
  }

  footer {
    background-color: rgba(255, 255, 255,.4);
    padding: 1.25rem;
    text-align: center;
    margin: 2rem 0 0;
  }


  /* dot nav */

  .dotstyle ul {
    position: fixed;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
  }
  
  .dotstyle li {
    position: sticky;
    display: block;
    margin:16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  
  .dotstyle li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline:#fc44ed;
    border-radius: 50%;
    background-color: rgb(234, 112, 245);
    text-indent: -999em;
    cursor: pointer; /* make the text accessible to screen readers */
    position: absolute;
  }
  .dotstyle li a:hover{
    background-color: #ff2483;
  }



  
/* globe text */
.globe-text {
  background: rgba(255,255,255,.0);
  color: #ffe6ff;
  font: 1em 'Share Tech Mono', sans-serif;
  height: 100vh;
  line-height: 1.5;
  perspective: 40em;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite; }
.globe-text, .preloader{ display: flex}
.preloader {
  animation: tiltSpin 8s linear infinite;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 25em;
  height: 25em; }
  .preloader, .preloader__ring {
    transform-style: preserve-3d; }
  .preloader__ring {
    animation-name: spin;
    animation-duration: 4s;
    animation-timing-function: inherit;
    animation-iteration-count: inherit;
    font-size: 2em;
    position: relative;
    height: 3rem;
    width: 1.5rem; }
    .preloader__ring:nth-child(even) {
      animation-direction: reverse; }
  .preloader__sector {
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    text-transform: uppercase;
    transform: translateZ(7rem); }
    .preloader__sector, .preloader__sector:empty:before {
      display: inline-block;
      width: 100%;
      height: 100%; }
    .preloader__sector:empty:before {
      background: linear-gradient(transparent 45%, currentColor 45% 55%, transparent 55%);
      content: ""; }
    .preloader__sector:nth-child(2) {
      transform: rotateY(12deg) translateZ(7rem); }
    .preloader__sector:nth-child(3) {
      transform: rotateY(24deg) translateZ(7rem); }
    .preloader__sector:nth-child(4) {
      transform: rotateY(36deg) translateZ(7rem); }
    .preloader__sector:nth-child(5) {
      transform: rotateY(48deg) translateZ(7rem); }
    .preloader__sector:nth-child(6) {
      transform: rotateY(60deg) translateZ(7rem); }
    .preloader__sector:nth-child(7) {
      transform: rotateY(72deg) translateZ(7rem); }
    .preloader__sector:nth-child(8) {
      transform: rotateY(84deg) translateZ(7rem); }
    .preloader__sector:nth-child(9) {
      transform: rotateY(96deg) translateZ(7rem); }
    .preloader__sector:nth-child(10) {
      transform: rotateY(108deg) translateZ(7rem); }
    .preloader__sector:nth-child(11) {
      transform: rotateY(120deg) translateZ(7rem); }
    .preloader__sector:nth-child(12) {
      transform: rotateY(132deg) translateZ(7rem); }
    .preloader__sector:nth-child(13) {
      transform: rotateY(144deg) translateZ(7rem); }
    .preloader__sector:nth-child(14) {
      transform: rotateY(156deg) translateZ(7rem); }
    .preloader__sector:nth-child(15) {
      transform: rotateY(168deg) translateZ(7rem); }
    .preloader__sector:nth-child(16) {
      transform: rotateY(180deg) translateZ(7rem); }
    .preloader__sector:nth-child(17) {
      transform: rotateY(192deg) translateZ(7rem); }
    .preloader__sector:nth-child(18) {
      transform: rotateY(204deg) translateZ(7rem); }
    .preloader__sector:nth-child(19) {
      transform: rotateY(216deg) translateZ(7rem); }
    .preloader__sector:nth-child(20) {
      transform: rotateY(228deg) translateZ(7rem); }
    .preloader__sector:nth-child(21) {
      transform: rotateY(240deg) translateZ(7rem); }
    .preloader__sector:nth-child(22) {
      transform: rotateY(252deg) translateZ(7rem); }
    .preloader__sector:nth-child(23) {
      transform: rotateY(264deg) translateZ(7rem); }
    .preloader__sector:nth-child(24) {
      transform: rotateY(276deg) translateZ(7rem); }
    .preloader__sector:nth-child(25) {
      transform: rotateY(288deg) translateZ(7rem); }
    .preloader__sector:nth-child(26) {
      transform: rotateY(300deg) translateZ(7rem); }
    .preloader__sector:nth-child(27) {
      transform: rotateY(312deg) translateZ(7rem); }
    .preloader__sector:nth-child(28) {
      transform: rotateY(324deg) translateZ(7rem); }
    .preloader__sector:nth-child(29) {
      transform: rotateY(336deg) translateZ(7rem); }
    .preloader__sector:nth-child(30) {
      transform: rotateY(348deg) translateZ(7rem); }

@keyframes tiltSpin {
  from {
    transform: rotateY(0) rotateX(30deg); }
  to {
    transform: rotateY(1turn) rotateX(30deg); } }

@keyframes spin {
  from {
    transform: rotateY(0); }
  to {
    transform: rotateY(1turn); } }

    p {
      font-family: Share Tech Mono, sans-serif;
      }




  .quote h2{
    text-align: center;
    
  }
  .quote{
    max-width: 54.75rem;
    margin: auto;
    margin-top: 10rem;
    background-color:rgba(107, 110, 115,0);
    /* background-color: #838282; */
    letter-spacing: 2px;
    font-family: 'Press Start 2P', 'sans-serif';
    text-transform: uppercase;
    font-size: 15px;
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }

/* for  phone screen */

@media screen and (max-width: 720px) {
  /*changes reflects on screen with a width of 720px and below*/
  nav {
    padding: 5.5rem 1rem;
  }

  .dotstyle{
    display: none;
  }

  nav ul {
  display: none;

}

.sign {
  font-size: 30px;
}

.typewrite{
  font-size: 12px;
}
.social{
  bottom: 5%;
  
}
.hero {
  margin-top: 15rem;
  flex-direction: column;
  gap: 0;
}

.hero img {
  margin-top: 15rem;
    height: 27.5rem;
    width: 20rem;
  }

.bio {
  margin-top: 15rem;
  width: 20.5rem;
}

.more-about {
  margin-top: 37rem;
  padding: 1rem 3.5rem;
}


.more-about p {
  text-align: justify;
}
.icon {
  width: 5.875rem;
  height: 5.25rem;
}

.skills{
  margin-top: 30rem;
}

.skills-wrapper{
  margin-top: 5rem;
}
.projects-container {
  margin-top: 5rem;
  flex-direction: column;
}

.project-container {
  margin-top: 2rem;
  width: 20.875rem;
}

.contact{
  margin-top: 47rem;
}

.contact-form-container {
  margin-top: 5rem;
  max-width: 23.75rem;
}
.quote{
  padding: 2rem;
  font-size: 45%;
}
}


  @media screen and (max-width: 420px) {

    nav {
      padding: 5.5rem 1rem;
    }
    
    .dotstyle{
      display: none;
    }
    nav ul {
      display: none;
    
    }

    .sign {
      font-size: 30px;
    }

    .typewrite{
      font-size: 10px;
    }
    .social{
      bottom: 5%;
      
    }
    
    .hero img {
      margin-top: 7rem;
      height: 27.5rem;
      width: 13rem;
    }

    .more-about {
      margin-top: 37rem;
      padding: 1rem 3.5rem;
    }


    .bio {
      margin-top: 7rem;
      width: 18.3rem;
    }
    .skills{
      margin-top: 90rem;
    }
    
    .skills-wrapper{
      margin-top: 5rem;
    }
    .projects-container {
      margin-top: 5rem;
      flex-direction: column;
    }
    .projects-title{
      font-size: smaller;
    }
    .project-container {
      margin-top: 2rem;
      width: 17.875rem;
    }
  
    .contact-form-container {
      margin-top: 5rem;
      max-width: 17.75rem;
    }
    .quote{
      padding: 2rem;
      font-size: 5%;
    }
  }