:root {
    --purple: #6033FF;
    --pink: #FF7BF5;
    --white: #FBFEF9;
    --black: #1E1E1E;
    --gray: #5E5E5E;
}

@font-face {
   font-family: 'Milkyway';
   src: url('/assets/font/Milkyway.ttf') format('truetype');
}

* {
   font-family: "Sen", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
   font-family: Milkyway;
}

body {
   background-color: var(--purple) !important;
   color: var(--white) !important;
}

canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   overflow: hidden;
   background: #6033FF;
   background: linear-gradient(180deg,rgba(96, 51, 255, 1) 0%, rgba(255, 123, 245, 1) 240%);
}

#particles-js {
   position: relative;
   width: 100%;
}

/* NAV */

nav {
   padding-top: 15px;
   height: 70px;
   position: sticky;
   top: 0px;
   z-index: 20;
   background: linear-gradient(180deg,rgba(96, 51, 255, 0.60) 0%, rgba(96, 51, 255, 0) 100%);
}

nav ul li {
   filter: drop-shadow(1px 1px 1px #000000cb)
}

.link-nav a {
   color: var(--white);
   text-decoration: none;
   font-size: 20px;
}

.link-nav a:hover {
   text-decoration: underline;
   text-decoration-color: var(--pink);
}

/* HERO */

.hero {
   height: calc(100dvh - 70px);
}

.hero-title {
   font-size: 150px;
   line-height: 0.8 !important;
}

.hero-subtitle[data-puff] {
   font-size: 50px;
    color: #ff7bf5;
   -webkit-text-stroke: 1.5rem var(--white);
   -webkit-text-fill-color: var(--white);
   z-index: 2;
   position: relative;
   left: .25rem;
}

.hero-subtitle[data-puff]::before {
   font-size: 50px;
   content: attr(data-puff);
   -webkit-text-stroke: 0;
   z-index: 3;
   -webkit-text-fill-color: var(--pink);
   position: absolute;
}

.hero-img {
   position: absolute;
   height: 200px;
   width: 200px;
   filter: drop-shadow(10px 10px 4px #0000001f)
}

.hero-img-1 {
   right: 80%;
   bottom: 80%;
   transform: rotate(20deg);
}

.hero-img-2 {
   right: 80%;
   bottom: 15%;
   transform: rotate(-20deg);
}

.hero-img-3 {
   left: 80%;
   top: 15%;
   transform: rotate(30deg);
}

.hero-img-4 {
   left: 80%;
   bottom:10%;
   transform: rotate(-20deg);
}

.img-container {
   position: relative;
}

.img-container img {
   object-fit: cover !important;
}

/* CARDS */

.badges-container{
   position: absolute;
   top: 12px;
   left: 10px
}

.attribute-badges {
   color: var(--white) !important;
   padding: 8px 20px;
   border-radius: 15px;
   font-size: 18px;
   margin-inline: 3px;
   z-index: 2;
   cursor: default;
}

.orange-badge {
   background-color: #EA9745;
}

.green-badge {
   background-color: #8AB267;
}

.blue-badge {
   background-color: #7BB4FF;
}

.pink-badge {
   background-color: #FF7B88;
}

.project-card {
   min-height: 500px;
   background-color: var(--white);
}

.project-card:hover {
   cursor: pointer;
}

.card-title[data-puff] {
   font-size: 65px;
   color: var(--white);
   -webkit-text-stroke: 1.5rem var(--white);
   -webkit-text-fill-color: var(--white);
   z-index: 2;
   position: relative;
   left: 1rem;
   top: -30px;
}

.card-title[data-puff]::before {
   font-size: 65px;
   content: attr(data-puff);
   -webkit-text-stroke: 0;
   z-index: 3;
   -webkit-text-fill-color: var(--purple);
   position: absolute;
}

.card-icon img {
   height: 180px;
   width: 180px;
   position: absolute;
   bottom: -45px;
   right: -25px;
   transform: rotate(20deg);
}

.img-container {
   height: 65%;
}

.video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s ease;
   border-radius: 15px;
}

.project-card:hover .video-overlay {
   opacity: 0;
   pointer-events: none;
}

.project-card .img-container video {
  object-fit: cover;
}

.card-main {
   height: 35%;
}

.card-link {
   color: #FF00BF !important;
   font-size: 20px;
   text-decoration: underline;
   cursor: pointer;
}

.more-projects-button {
   font-size: 50px;
   font-weight: 500;
   text-decoration: underline;
   text-decoration-color: #f852ce;
   text-underline-offset: 8px;
}

.more-projects-button:hover{
   cursor: pointer;
}

.more-projects {
   display: none;
}

.show {
   display: block;
}

/* MODAL */

.modal-title {
   color: var(--purple);
   font-size: 70px;
   cursor: default;
}

.btn-close {
   font-size: 30px;
   filter: invert(20%) sepia(90%) saturate(4848%) hue-rotate(252deg) brightness(101%) contrast(101%) !important;
   opacity: 0.8 !important;
   padding: 25px 20px !important;
}

.carousel-inner {
   border-radius: 20px;
}

.controls {
   position: absolute;
   top: 1000px;
   z-index: 10000000000;
}

.carousel-control-prev {
   background: linear-gradient(to right, var(--black) 0%,rgba(0,0,0,0) 100%) !important;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   width: 10% !important;
}

.carousel-control-next {
   background: linear-gradient(to left, var(--black) 0%,rgba(0,0,0,0) 100%) !important;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   width: 10% !important;
}

.carousel-caption {
   background: linear-gradient(to top, rgba(30, 30, 30, 0.8) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%) !important;
   border-radius: 20px;   
   width: 100%;
   padding-bottom: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
}

.carousel-indicators {
   bottom: -45px !important;
}

.carousel-indicators [data-bs-target].active  {
   background-color: var(--pink) !important;
   width: 25px !important;
   border-radius: 20%/50% !important;
}

.carousel-indicators [data-bs-target] {
   background-color: var(--gray) !important;
   opacity: 1 !important;
   width: 10px !important;
   height: 10px !important;
   border-radius: 100% !important;
   transition: width .2s ease !important;
}

.carousel-item {
   height: 27vw;
}

.carousel-item img{
   height: 100%;
}

.close-fullscreen {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: white;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  display: none;
}

.modal-img:fullscreen + .close-fullscreen { 
   display: block; 
}

.carousel-item video {
   border-radius: 20px;
   object-fit: cover;
   height: 100%;
}

#carouselExampleCaptions::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

#carouselExampleCaptions .carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#carouselExampleCaptions .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#carouselExampleCaptions img, video {
   object-fit: contain;
   background-color: var(--gray);
}

.custom-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: var(--gray) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.custom-fullscreen .carousel-inner {
  width: 100% !important;
  height: 100% !important;
}

.custom-fullscreen .carousel-item {
  height: 100% !important;
}

.custom-fullscreen .carousel-item img,
.custom-fullscreen .carousel-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.container-modal-code {
   height: 400px;
   background-color: var(--pink);
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.modal-code-title {
   width: 95%;
   color: var(--white);
   font-size: 20px;
   margin: 0px 0 10px 20px;
}

.modal-code {
   height: 85%;
   width: 95%;
   background-color: #1e1e1eb4;
   border-radius: 20px;
   overflow-y: scroll;
   color: var(--white);
}

.modal-code::-webkit-scrollbar {
   width: 12px;
}

.modal-code::-webkit-scrollbar-track {
   background: #9a8e98;
   border-radius: 20px;
   margin: 8px;
   margin-block: 15px;
}

.modal-code::-webkit-scrollbar-thumb {
   background: #5e5e5e;
   background-clip: content-box;
   border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
   background: #5e5e5e;
   background-clip: content-box !important;
}

.modal-code pre {
   margin-left: 25px;
}

.modal-links {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}

.modal-link-item {
   color: var(--purple);
   font-weight: bold;
   text-decoration: none;
   padding: 8px 15px;
   border-radius: 8px;
   border: 2px solid var(--pink);
   transition: all 0.3s ease;
}

.modal-link-item:hover {
   background-color: var(--pink);
   color: var(--white);
}

.modal-close {
   color: var(--purple);
   font-weight: 500;
   text-decoration: none;
}

/* ABOUT */

.about-section {
   margin-top: 250px;
}

.about-title-container {
   position: absolute;
   top: -100px;
   left: -200px;
}

.about-title-first[data-puff] {
   font-size: 250px;
   color: #ff7bf5;
   -webkit-text-stroke: 2.5rem var(--pink);
   -webkit-text-fill-color: var(--pink);
   z-index: 2;
   position: relative;
   left: .25rem;
}

.about-title-first[data-puff]::before {
   font-size: 250px;
   content: attr(data-puff);
   -webkit-text-stroke: 0;
   z-index: 3;
   -webkit-text-fill-color: var(--white);
   position: absolute;
}

.about-title-second[data-puff] {
   bottom: 80px;
   font-size: 250px;
   color: #ff7bf5;
   -webkit-text-stroke: 2.5rem var(--white);
   -webkit-text-fill-color: var(--white);
   z-index: 2;
   position: relative;
   left: .25rem;
}

.about-title-second[data-puff]::before {
   font-size: 250px;
   content: attr(data-puff);
   -webkit-text-stroke: 0;
   z-index: 3;
   -webkit-text-fill-color: var(--pink);
   position: absolute;
}

.about-icon {
   position: absolute;
   top: -200px;
   right: -100px;
   height: 375px;
   width: 375px;
   transform: rotate(15deg);
}

.about {
   position: relative;
   font-size: 30px;
   padding: 150px !important;
   background: rgba(255, 123, 245, 0.25);
   border-radius: 45px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(6.2px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 123, 245, 1);
}

.skill {
   background-color: var(--pink);
   border-radius: 25px;
}

.skill-icon {
   background-color: var(--white) !important;
   border-radius: 25px 0px 0px 25px;
   padding: 2px 5px 2px 10px;
}

.skill-icon img {
   height: 50px;
   width: 50px;
}

.skill-text {
   font-size: 30px;
   padding-inline: 15px;
}

/* FOOTER */

footer {
   padding-top: 500px;
   background-image: url(/assets/img/other/Ellipse\ 1.svg);
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
}

.footer-img {
   height: 250px;
   width: 250px;
   transform: rotate(-15deg);
   position: absolute;
   top: 165px;
   right: 30px;
}

.footer-title {
   color: var(--pink);
   font-size: 80px;
}

.footer-icon {
   color: var(--pink);
}

.footer-link {
   color: var(--purple) !important;
   text-decoration-color:var(--pink) !important ;
   font-size: 25px;
   font-weight: 600;
}

.footer-banner {
   border-top: 1px solid var(--black);
   font-size: 20px;
}

.footer-banner-link {
   text-decoration: none !important;
}

.footer-banner-link:hover {
   text-decoration: underline !important;
   text-decoration-color: var(--pink) !important;
}

/* MEDIA */

@media (max-width: 1900px) {
      .card-title[data-puff] {
      font-size: 50px;
   }

   .card-title[data-puff]::before {
      font-size: 50px;
   }
}

@media (max-width: 1700px) {
   .card-main .card-desc, .card-link a {
      font-size: 16px !important;
   }

   .card-icon img {
      height: 150px;
      width: 150px;
      bottom: -30px;
      right: -30px;
   }

   .card-title[data-puff] {
      font-size: 40px;
      top: -35px;
   }

   .card-title[data-puff]::before {
      font-size: 40px;
   }

   .img-container .badges-container .attribute-badges {
      font-size: 15px !important;
      margin-top: 4px;
   }

   footer {
      padding-top: 400px !important;
   }
}

@media (max-width: 1400px) {
   .hero-img {
      height: 150px;
      width: 150px;
   }

   .hero-img-1 {
      right: 60%;
   }

   .hero-img-2 {
      right: 70%;
   }

   .hero-img-3 {
      left: 70%;
   }

   .hero-img-4 {
      left: 65%;
   }

   .card-icon img {
      height: 130px;
      width: 130px;
   }

   .card-title[data-puff] {
      font-size: 35px;
      top: -35px;
   }

   .card-title[data-puff]::before {
      font-size: 35px;
   }

   .carousel-item {
      height: 40vh;
   }

   .about {
      padding: 70px !important;
   }

   .about-icon {
      display: none !important;
   }

   .about-title-container {
      left: unset;
      top: -60px;
      margin-inline: auto;
   }

   .about-title-first[data-puff], .about-title-second[data-puff] ,.about-title-first[data-puff]::before, .about-title-second[data-puff]::before {
      font-size: 100px;
      display: inline-block;
   }

   .about-title-second[data-puff] {
      bottom: 0;
      margin-left: 40px;
   }

   .footer-link {
      font-size: 20px;
   }
}

@media (max-width: 992px) {
   .hero-img {
      height: 150px;
      width: 150px;
   }

   .hero-img-1 {
      right: 60%;
   }

   .hero-img-2 {
      right: 70%;
   }

   .hero-img-3 {
      left: 60%;
   }

   .hero-img-4 {
      left: 60%;
   }

   .hero-title {
      font-size: 70px;
   }

   .hero-subtitle[data-puff] {
      font-size: 40px;
   }

   .hero-subtitle[data-puff]::before {
      font-size: 40px;
   }

   .card-icon img {
      right: -7px;
   }

   .card-link {
      font-size: 16px;
   }
}

@media (max-width: 768px) {
   .footer-img {
      height: 200px;
      width: 200px;
      top: 100px;
   }

   .carousel-caption {
      font-size: 14px;
   }
}

@media (max-width: 700px) {
   .hero-img {
      height: 100px;
      width: 100px;
   }

   .about {
      font-size: 20px;
   }

   .about-title-first[data-puff], .about-title-second[data-puff] ,.about-title-first[data-puff]::before, .about-title-second[data-puff]::before {
      font-size: 70px;
      display: inline-block;
   }

   .about-title-first[data-puff] {
      -webkit-text-stroke: 1.5rem var(--pink);
   }

   .about-title-second[data-puff] {
      -webkit-text-stroke: 1.5rem var(--white);
   }

   .card-icon img {
      height: 100px;
      width: 100px;
      bottom: -15px;
      right: -12px;
   }

   .card-title[data-puff] {
      font-size: 30px;
      top: -20px;
      -webkit-text-stroke: 1rem var(--white);
   }

   .card-title[data-puff]::before {
      font-size: 30px;
   }

   .card-main .card-desc, .card-link a {
      font-size: 18px !important;
   }

   .img-container {
      height: 65%;
   }

   .card-main {
      height: 35%;
   }

   .more-projects-button {
      font-size: 30px !important;
   }

   .img-container .badges-container .attribute-badges {
      font-size: 12px !important;
   }

   .skill-icon img {
      height: 30px;
      width: 30px;

   }

   .skill-text {
      font-size: 15px !important;
   }
}

@media (max-width: 500px) {
   .hero-title {
      font-size: 50px;
   }

   .hero-subtitle[data-puff] {
      font-size: 30px;
      -webkit-text-stroke: 1.1rem var(--white);
   }

   .hero-subtitle[data-puff]::before {
      font-size: 30px;
   }

   .hero-img {
      height: 70px;
      width: 70px;
   }

   .project-card {
      height: 600px;
   }

   .img-container .badges-container .attribute-badges {
      padding: 6px 9px;
   }

   .card-link {
      font-size: 14px;
   }

   .card-icon img {
      height: 80px;
      width: 80px;
   }

   .card-main .card-desc {
      font-size: 15px !important;
   }

   .card-main .card-desc, .card-link a {
      font-size: 16px;
      margin-bottom: 3px !important;
   }

   .modal-code-title {
      font-size: 15px;
   }

   .modal-code {
      font-size: 12px;
   }

   .modal-title {
      font-size: 40px;
   }

   .modal-badges .attribute-badges {
      font-size: 15px;
      padding: 8px;
   }

   .carousel-item {
      height: 35vh;
   }

   .about {
      font-size: 16px;
      padding: 30px !important;
   }

   .about-title-first[data-puff], .about-title-second[data-puff] ,.about-title-first[data-puff]::before, .about-title-second[data-puff]::before {
      font-size: 50px;
      display: inline-block;
   }

   .about-title-container {
      top: -35px;
   }

   footer {
      padding-top: 300px !important;
   }

   .footer-img {
      height: 200px;
      width: 200px;
      top: 30px;
   }

   .footer-title {
      font-size: 50px;
   }

   .footer-link {
      font-size: 15px;
   }

   .footer-banner {
      font-size: 15px;
   }
}

@media (max-width: 350px) {
   .card-icon img{
      height: 60px;
      width: 60px;
   }
   
   .modal-code-title {
      font-size: 12px;
   }
}

@media (max-height: 700px) and (orientation:landscape)  {
   .hero-img {
      height: 80px;
      width: 80px;
   }

   .hero-img-1, .hero-img-2 {
      right: 80%;
   }

   .hero-img-3, .hero-img-4 {
      left: 80%;
   }

   .btn-close {
      font-size: 25px;
      padding: 10px 10px !important;
   }
}

@media (pointer: coarse) {
   .project-card:hover .video-overlay {
      opacity: 1;
   }
}

/* ANIMATION */

@keyframes float1 {
  0%   { transform: translate3d(0, 0, 0) rotate(20deg); }
  50%  { transform: translate3d(-8px, -12px, 0) rotate(22deg); }
  100% { transform: translate3d(0, 0, 0) rotate(20deg); }
}

@keyframes float2 {
  0%   { transform: translate3d(0, 0, 0) rotate(-20deg); }
  50%  { transform: translate3d(6px, -10px, 0) rotate(-18deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-20deg); }
}

@keyframes float3 {
  0%   { transform: translate3d(0, 0, 0) rotate(30%); }
  50%  { transform: translate3d(-6px, -14px, 0) rotate(33deg); }
  100% { transform: translate3d(0, 0, 0) rotate(30deg); }
}

@keyframes float4 {
  0%   { transform: translate3d(0, 0, 0) rotate(-20deg); }
  50%  { transform: translate3d(5px, -8px, 0) rotate(-17deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-20deg); }
}

.hero-img {
   animation-duration: 8s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
   will-change: transform;
   z-index: 1;
}

.hero-img-1 {
   animation-name: float1;
   animation-delay: 0s;
}

.hero-img-2 {
   animation-name: float2;
   animation-delay: 1.5s;
}

.hero-img-3 {
   animation-name: float3;
   animation-delay: 3s;
}

.hero-img-4 {
   animation-name: float4;
   animation-delay: 4.5s;
}