@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

.navbar-page {
  height: 50px;
  width: 100%;
  background: linear-gradient(to bottom, #0f0f0f, transparent);
  /* background-color: #33333338; */
  font-family: "Poppins", sans-serif;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-page a {
  float: left;
  font-size: 16px;
  color: rgb(213, 213, 213);
  text-align: center;
  padding: 14px 16px 12px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(213, 213, 213);
  padding: 14px 16px 12px 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar-page p img {
  float: left;
  font-size: 16px;
  color: rgb(213, 213, 213);
  text-align: center;
  padding: 14px 16px 12px 16px;
  text-decoration: none;
}

.navbar-page a:not(.my_img):hover,
.dropdown:hover .dropbtn {
  background-color: rgb(32 28 46 / 26%);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #212121;
  min-width: 160px;
  box-shadow: 5px 8px 14px 5px rgba(0, 0, 0, 0.255);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  overflow: visible;
  background-color: rgba(118, 0, 196, 0.259);
}

.dropdown:hover .dropdown-content {
  overflow: hidden;
  display: block;
}

.animate-navbar {
  background-image: linear-gradient(
    -225deg,
    #ffffff 0%,
    #76e1ff 29%,
    #ba89ff 67%,
    #ff94e2 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: navtextclip 10s linear infinite;
  display: inline-block;
  font-size: 20px;

  text-shadow: 0 0 10px rgb(140, 102, 217);
}
/* 
@keyframes navtextclip {
  to {
    background-position: 200% center;
  }
} */

body {
  user-select: none;
  /* supported by Chrome and Opera */
  -webkit-user-select: none;
  /* Safari */
  overflow-x: hidden;
  background-color: lavenderblush;
  margin: 0;
  margin-bottom: 150px !important;
  scrollbar-color: #ff94e2 #ffffff;
}

.title {
  text-align: center;
  font-family: "Poppins", sans-serif;
  padding-bottom: 30px;
}

/* change the color of the scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #4e4e4e;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #6a6a6a;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #3e3b41;
}

.me_img {
  height: 40px;
  width: 40px;
  position: relative;
  top: -8px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
}

body {
  background-color: black;
  font-family: "Poppins", sans-serif;
  scrollbar-color: #ff94e2 #ffffff;
}

canvas {
  display: block;
  margin: 0 auto;
  align-items: center;
  padding: 0px 10px 0px 10px;
  cursor: grab;
}

.button-container {
  margin: 0px 40px 40px 40px;
  width: 90px;
  height: 30px;
  position: relative;
  top: 50%;
  left: 45%;
}

.button-back {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #414661;
  border-radius: 8px;
  height: 60px;
  width: 90px;
  margin: 0;
  transform: translateY(-10px);
}

.button-1 {
  background-color: #61667c;
  border-radius: 8px;
  border-style: none;
  color: rgb(213, 213, 213);
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(177, 213, 225, 0.792);
  height: 60px;
  line-height: 20px;
  margin: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 300ms;
}

.button-1:hover {
  transform: translate(-50%, -50%) translateY(-3px);
}

.button-1:active {
  transform: translate(-50%, -50%) translateY(4px);
  transition: transform 100ms;
}

.heading-box {
  margin-bottom: 50px;
  padding: 10px 20px 0px 20px;
  height: 100px;
}

.warning-message {
  margin: 0;
  text-align: center;
  background-color: #ffe88d;
  height: 25px;
  position: relative;
  top: -21px;
}

.warning-text {
  margin-top: 0;
  padding: 0;
  position: relative;
  top: -2px;
  color: #b25422;
  font-family: "Helvitica", sans-serif;
}

#spinjar {
  display: none;
}

#webgl {
  display: block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes jarfadeIn {
  0% {
    width: 100px;
  }

  100% {
    width: 200px;
  }
}

@-moz-keyframes jarfadeIn {
  0% {
    width: 100px;
  }

  100% {
    width: 10000px;
  }
}

@-webkit-keyframes jarfadeIn {
  0% {
    width: 100px;
  }

  100% {
    width: 10000px;
  }
}

@-o-keyframes jarfadeIn {
  0% {
    width: 100px;
  }

  100% {
    width: 10000px;
  }
}

@-ms-keyframes jarfadeIn {
  0% {
    width: 100px;
  }

  100% {
    width: 10000px;
  }
}

.loading-box {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 25%;
  z-index: 1;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  /*  */
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text-box {
  position: relative;
  top: 50%;
  left: 50%;
}

.loading-text {
  font-size: 100px;
  font-weight: 700;
  color: rgb(213, 213, 213);
  position: relative;
  /* top: 220px; */
  font-family: "Poppins", sans-serif;

  text-shadow: 1px 1px 0 grey, 1px 2px 0 grey, 1px 3px 0 grey, 1px 4px 0 grey,
    1px 5px 0 grey, 1px 6px 0 grey, 1px 7px 0 grey;

  animation: title 4s ease-in-out infinite alternate;
}

#loading-box {
  display: block;
  z-index: 9;
}

#wholebody {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

#myDiv {
  display: none;
  text-align: center;
}

.glow-title {
  text-align: center;
  font-size: 45px;
  color: rgb(213, 213, 213);
  /* text-shadow: 0 0 25px lightblue; */
  font-weight: 700;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0px !important;
}

ul {
  list-style: disc;
}

.grab {
  cursor: grabbing;
}

.cursor {
  position: absolute;
  width: 112px;
  height: 112px;
  background-image: url("https://uploads-ssl.webflow.com/5b54e064ef1d588c6d4a4264/6265a2f373ec362f1b7911c9_cursor-arrow.svg");

  animation: gradient 10s infinite alternate;
}





#first-body {
  background-image: url('../images/stars3.png')
}

p {
  color: rgb(213, 213, 213)
}

.heading-box {
  margin-top: 40px;
}

.container-box {
  margin: 0 auto;
  margin-top: 140px;
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  /* background: #000; */
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
}
.b {
  transform: rotateY(60deg) translateZ(250px);
}
.c {
  transform: rotateY(120deg) translateZ(250px);
}
.d {
  transform: rotateY(180deg) translateZ(250px);
}
.e {
  transform: rotateY(240deg) translateZ(250px);
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
}

.control-box {
  display: flex;
  margin: 0 auto;
  width: 250px;
  margin-top: 100px;
  gap: 100px;
}

.next, .prev {
  width: 75px;
  color: #fff;
  padding: 1em 2em;
  cursor: pointer;
  background: #212121;
  border-radius: 5px;
  /* border-top: 1px solid #373737; */
  box-shadow: 0 5px 0 #323232;
  transition: box-shadow 0.1s, transform 0.1s;
}
.next:hover, .prev:hover { color: #d4d4d4; }
.next:active, .prev:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #323232;
}
.next { right: 5em; }
.prev { left: 5em; }

span.sub-title {
  display: inline-block;
  color: rgb(213, 213, 213);
  margin-left: 80px;
  margin-bottom: 20px;
  font-size: 30px;
  padding: 10px;
  border-radius: 10px;
}

div.black-box span {
  display: inline-block;
  color: rgb(213, 213, 213);
  padding: 10px;
  border-radius: 10px;  
}

#skills-body {
  margin-bottom: 100px;
}

.approach-right {
  opacity: 0; /* Initially hidden */
  transform: translateX(-200px);
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}
.approach-left {
  opacity: 0; /* Initially hidden */
  transform: translateX(400px);
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

.approach-up {
  opacity: 0; /* Initially hidden */
  transform: translateY(-200px);
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}
.approach-down {
  opacity: 0; /* Initially hidden */
  transform: translateY(-200px);
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}
/* .approach-down-logos {
  opacity: 0;
  transform: translateY(-200px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.approach-down-logo {
  opacity: 0;
  transform: translateY(-200px);
  transition: opacity 0.5s ease, transform 0.5s ease; 
} */

.appear {
  opacity: 1; /* Make visible */
  transform: translateX(0) translateY(0); /* Initial position off-screen */
}

.description {
  margin-left: 80px; 
  margin-bottom: 210px; 
  margin-top: 15px;
  max-width: 600px;
}

.black-box {
  max-width: 50%;
  min-height: 145px;
  margin-left: 100px;
  margin-bottom: 55px;
  background-image: linear-gradient(168deg, #252525, rgb(130 60 255 / 7%));
  border-radius: 10px;
  position: relative;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.black-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 7px var(--glow-color);
}


.glow-overlay {
  --glow-size: 25rem;

  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--glow-opacity, 0);
  mask: radial-gradient(
    var(--glow-size) var(--glow-size) at var(--glow-x) var(--glow-y),
    var(--glow-color) 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
  border-radius: 10px;
  border: 4px solid var(--glow-color);
}



div.black-box div {
  display: flex;
  gap: 20px;
  align-items: center;
  border-radius: 10px;
}

div.black-box div img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid #b394ff;
}

div.black-box p {
  color: #8f8f8f;
}

li {
  color: rgb(213, 213, 213)
}

div.black-box p {
  margin-left: 10px;
}

a:visited, a {
  color: #8ccaff;
}

li a {
  text-decoration: underline;
}

li a:hover {
  color: #6fa6d4;
}

div#projects-body li {
  margin-left: 80px;
  margin-bottom: 20px;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

.down-arrow {
  color: white;
  position: relative;
  left: 49%;
  transform: translateY(0);
  animation: bounce 1s infinite;
  margin-bottom: 100px;
}

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

  canvas {
    display: none;
  }

  .container-box {
    margin: 0 auto;
    margin-top: 140px;
    width: 10px;
    height: 100px;
    position: relative;
    perspective: 1000px;
  }
  
  .carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .item {
    display: block;
    position: absolute;
    /* background: #000; */
    width: 250px;
    height: 200px;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 10px;
  }
  
  .a {
    transform: rotateY(0deg) translateZ(250px);
  }
  .b {
    transform: rotateY(60deg) translateZ(250px);
  }
  .c {
    transform: rotateY(120deg) translateZ(250px);
  }
  .d {
    transform: rotateY(180deg) translateZ(250px);
  }
  .e {
    transform: rotateY(240deg) translateZ(250px);
  } 
  .f {
    transform: rotateY(300deg) translateZ(250px);
  }
  
  .control-box {
    display: flex;
    margin: 0 auto;
    width: 150px;
    margin-top: 100px;
    gap: 100px;
  }
  
  .next, .prev {
    width: 75px;
    color: #fff;
    padding: 1em 2em;
    cursor: pointer;
    background: #212121;
    border-radius: 5px;
    /* border-top: 1px solid #373737; */
    box-shadow: 0 5px 0 #323232;
    transition: box-shadow 0.1s, transform 0.1s;
  }
  .next:hover, .prev:hover { color: #d4d4d4; }
  .next:active, .prev:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #323232;
  }
  .next { right: 5em; }
  .prev { left: 5em; }
  
}

form {
  min-height: 420px;
  max-width: 450px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  margin-left: 80px;
  margin-top: 50px;
  background-image: linear-gradient(148deg, #252525, rgb(37 37 37 / 62%), rgb(37 37 37 / 0));
  border-radius: 10px;
  padding: 20px;
  box-shadow: -11px -11px 20px 2px #151515c9;
}

form input {
  width: 60%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background-color: #3a3a3a;
  color: #8f8f8f;
  caret-color: #518294 !important;
  font-size: 13px;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #3a3a3a inset;
  -webkit-text-fill-color: #8f8f8f !important;
  caret-color: #518294 !important;
  border: none !important; /* Remove the border */
  outline: none !important; /* Remove the outline */
  /* color: #8f8f8f !important; */
}

input:-internal-autofill-selected {
  background-color: #3a3a3a !important;
  color: #8f8f8f !important;
}

input:focus-visible, textarea:focus-visible {
  border: none;
  outline: none;
}

form textarea {
  caret-color: #518294 !important;
  height: 200px;
  max-height: 700px;
  min-height: 200px;
  width: 75%;
  max-width: 90%;
  min-width: 75%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background-color: #3a3a3ad9;
  color: #8f8f8f;
  resize: auto;
  font-size: 13px;
}

form button {
  width: 25%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background-color: #3431789e;
  color: #cbcbcb;
  cursor: pointer;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: #343178e6;
}

form label {
  color: #8f8f8f;
  margin-bottom: 20px;
}

#last-body {
  margin-top: 50px;
  font-size: 20px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(213, 213, 213);
}

#email-body {
  margin-top: 120px;
  background-image: url('../images/email_bg.png');
  height: 942px;
  /* width: 100vw; */
  background-position: center;
  background-size: cover;
}

h1 {
  font-size: revert !important;
}

/* .active-logo {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% {
    transform: rotateY(var(--rotateY)) translateZ(250px) scale(0.9);
  }

  100% {
    transform: rotateY(var(--rotateY)) translateZ(250px) scale(1);
  }
} */

.active-logo {
  transition: all .1s;
  transform-style: preserve-3d;
}