html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {

    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

.navbar {
position: fixed;
top: 20px;
 
left: 50%;

  transform: translateX(-50%);

  width: 90%;

  z-index: 1000;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: rgba(253, 96, 185, 0.8);

  backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);

    border: 2px solid #fefdfd;

  box-shadow: 0 0 15px rgba(237, 141, 172, 0.5); 

  border-radius: 15px;

  padding: 10px;
}

.navbar.scrolled {
    background: rgba(29, 5, 84, 0.95) !important; 
    border-color: #f8f5f9 !important;
    box-shadow: 0 0 20px rgba(74, 30, 93, 0.8);
    transition: all 0.4s ease-in-out;
}
.nav-links {

    font-family: 'Pixelify Sans Mono', monospace;

  list-style-type: none;

  margin: 0;

  padding: 5px;

  gap: 50px;

  display: flex;

  color: #fef3fb;

  text-decoration: none;

  font-weight: 500; 
}
.logo {

    display: flex;

  flex-wrap: wrap;

  gap: 15px;

  justify-content: space-between;

  align-items: center;

  padding: 10px;

  color: #fef3fb;

  font-size: 24px;


  

  
  font-family: 'Press Start 2P', cursive;
}

.nav-links a, .navbar a {

    color: #fef3fb;

  font-size: 20px;

  font-weight: bold;

  font-family: 'Pixelify Sans', monospace;

  text-decoration: none;
}

.nav-links a:hover {

    color: #ffc8dd;

  text-shadow: 0px 0px 8px #fff;

  transform: scale(1.1);

  display: inline-block;

  transition: 0.2s ease-in-out; 
}
.nav-links a:active {

    transform: scale(0.95); 

  color: #4a1e5d; 
}
#hero {

    

    background-image: url("imgs/hero section bg.png");

  background-attachment: fixed;

  background-size: cover;

  background-position: center;

  

  
  

  image-rendering: pixelated; 

  

  
  

  height: 100vh;

  display: flex;

  justify-content: flex-start;

  padding-left: 100px;

  align-items: flex-start;

  padding-top: 150px;

  text-align: center;

  

  

  background-color: transparent;

  position: relative;
}

.hero-content {

    background-color: transparent;
	padding: 10px;
  max-width: 1050px;
  text-align: left;
  

    
}

.hero-content h1 {

    

    font-family: 'Press Start 2P', cursive;

  margin: 0;

  color: #fef3fb;

  font-weight: 500;

  text-align: left;

  font-size: 40px;

  

  text-shadow: 

  3px 3px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;

    
    
line-height: 1.8;
    
}



#hero h1::after {
    content: '▋';
    display: inline-block;
    margin-left: 8px;
    animation: blink 1s step-end infinite;
    color: #fef3fb;
    text-shadow: 2px 2px 0px #4a1e5d;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.headsentence {

    font-family: 'press start 2p', cursive;

  color: #fef3fb;

  font-size: 24px;

  margin-top: 20px;

  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;
    
  text-align: left;
  line-height: 1.6;
}



#hero-buttons-container {
    position: absolute;
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 15px; 
}


.github-btn {
    padding: 10px; 
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
}

.pixel-icon {
    width: 30px;
    height: 30px;
    filter: invert(100%); 
    image-rendering: pixelated; 
}



.hero-nav-btn {
    background: rgba(253, 96, 185, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid #fefdfd;
    box-shadow: 0 0 15px rgba(237, 141, 172, 0.5);
    border-radius: 15px;
    color: #fef3fb;
    font-family: 'Pixelify Sans', monospace;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 25px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}


.btn-small {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 10px;
}

.hero-nav-btn:hover {
    color: #ffc8dd;
    text-shadow: 0px 0px 8px #fff;
    transform: scale(1.05);
}
.resume-btn {
    background: rgba(253, 96, 185, 0.6) !important; 
    font-size: 14px;
    padding: 8px 15px;
}

.resume-btn:hover {
    background: rgba(253, 96, 185, 0.9) !important;
    transform: scale(1.05);
}

section {

    min-height: 100vh;

  padding: 120px 20px; 

  display: flex;

  flex-direction: column;

  align-items: center;

  box-sizing: border-box;

  scroll-margin-top: 80px;
}




#about {

    background-color: #ffffff;

  color: #333;

  background-image: url("imgs/pixellab--Pastel-pink-gradient-sky-back-1771431797413.png");

  background-attachment: fixed;

  background-size: cover;

  background-position: center;

  image-rendering: pixelated; 

  min-height: 100vh; 

  box-sizing: border-box;

  position: relative;


 

  display: flex;

  flex-direction: column; 
  

  justify-content: center; 


  align-items: center; 
   
   
 
  padding: 40px; 
   
   
   
   
   
  
}

.abt h1 {

    padding: 20px;

  font-family: 'Press Start 2P', cursive;

  color: #fef3fb;

  font-size: 24px;

  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;

    text-align: center; 
   
   
  

  margin: 0;
}

.abt p {

    max-width: 900px;

  font-size: 14px; 
   
   
   
   
 

  line-height: 1.8;

  font-family: 'Press Start 2P', cursive;

  color: #4a1e5d;

  text-align: center; 
   
   
   

  margin-top: 20px;
}
.scroll2{

    position: absolute;

  bottom: 15px;

  left: 50%;

  

  font-family: 'Press Start 2P', cursive;

  color: #fef3fb;

  font-size: 14px;

  
  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;

    transform: translateX(-50%);

  text-align: center;
}
#skills, #projects {

    background-color: #f9f9f9; 

  color: #333;
}
#skills {

    
    background-color: #ffffff;

  color: #333;

  background-image: url(imgs/skills.png);

 
  background-size: cover;

  background-position: center;

  
  image-rendering: pixelated; 
  
  
 

 image-rendering: crisp-edges;

  min-height: 100vh; 

  box-sizing: border-box;

  position: relative;


  display: flex;

  flex-direction: column; 
   

  justify-content: center; 
  

  align-items: center; 
   
   

  padding: 40px; 

 
}

.skills h1 {

    padding: 20px;

  
  

  font-family: 'Press Start 2P', cursive;

  color: #fef3fb;

  font-size: 24px;

  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
    1px 0px #4a1e5d,

    1px 
    1px 0px #4a1e5d;

    text-align: center; 
   
   
   

  margin: 0;
}

.skills-list {

    width: 100%;

  padding-left: 16px;
}








#projects {

    
    background-color: #ffffff;

    color: #333;

  background-image: url(imgs/pixellab-ery-minimal-pixel-art-sky-back-1771496997042.png);

  background-attachment: fixed;

  background-size: cover;

  background-position: center;

  
  image-rendering: pixelated; 
  
  
 

 image-rendering: crisp-edges;

  min-height: 110vh; 

  box-sizing: border-box;

  position: relative;


  display: flex;

  flex-direction: column; 
   

  justify-content: center; 
  

  align-items: center; 
   
   

  padding: 40px; 

}
.projects h1 {

    padding: 20px;

  font-family: 'Press Start 2P', cursive;

  color: #fef3fb;

  font-size: 24px;

  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;

    text-align: center; 
   
   
   

  margin: 0;
}

.project-grid {

    display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

  width: 100%;

  margin-top: 40px;
}


.project-card {

    width: 80%;

  max-width: 600px;

  background: rgba(5, 17, 57, 0.85); /* match card front */

  border: 3px solid #1e40af; /* navy border */

  border-radius: 10px;

  padding: 20px;

  cursor: pointer;

  transition: transform 0.3s ease, border-color 0.2s ease;

  overflow: hidden;
}

.project-name {

    font-family: 'Press Start 2P', cursive;

  font-size: 18px;

  color: #fef3fb;

  margin: 0 0 10px 0;

  text-align: center;
}

.featured-badge {
    font-size: 10px;
    background-color: #ffd700;
    color: #4a1e5d;
    padding: 5px 8px;
    border-radius: 5px;
    margin-left: 10px;
    vertical-align: middle;
    text-transform: uppercase;
    box-shadow: 2px 2px 0px #b8860b;
    display: inline-block;
}

.project-content {

    max-height: 0; 

  opacity: 0; 
   
  

  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;

  text-align: center;

  font-family: 'Pixelify Sans', sans-serif;

  color: #cfe8ff;
}

.project-content p {

    margin-top: 20px;

  font-size: 14px;

  line-height: 1.6;
}

.tech-stack {

    display: block;

  margin-top: 10px;

  font-size: 12px;

  color: #7fb3ff;

  font-weight: bold;
}

.quest-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 12px;
  background: transparent;
  border: 2px solid #1e40af;
  color: #cfe8ff;
  text-decoration: none;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  border-radius: 6px;
}
.quest-btn:hover {
  background: #1e40af;
  color: #fff;
  box-shadow: 0 0 12px rgba(30,64,175,0.4);
}

.project-card:hover, .project-card.active {

    transform: translateY(-6px); 

  border-color: #7fb3ff; 
  
}

.project-card:hover .project-content, .project-card.active .project-content {

    max-height: 260px;

  opacity: 1; 
   
   
   
 
}
#contact {
    background-color: #051139;
    background-image: url("imgs/contact-bg.png");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #fef3fb;
    min-height: 100vh;
    justify-content: center;
    position: relative;
    image-rendering: pixelated;
}




.character {

    width: 150px;

  height: 150px;

  image-rendering: pixelated; 

  background-image: url('imgs/pixellab--Pixel-art-character-in-8-bit--1771427072388.png');

  background-size: contain;

  background-repeat: no-repeat;

  position: absolute;

  bottom: 20px; 

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  

  animation: jump 0.8s infinite ease-in-out; 
}


@keyframes jump {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-40px); }
}

.character2 {

    width: 150px;

  height: 150px;

  image-rendering: pixelated; 

  


  background-image: url('imgs/pixellab--Pixel-art-character-in-8-bit--1771427072388.png');

  background-size: contain;

  background-repeat: no-repeat;

 position: absolute;
 bottom: 5px; 

 left: 50%;

  transform: translateX(-50%);

  

  z-index: 10;

  

  

  animation: jump2 0.8s infinite ease-in-out; 
}


@keyframes jump2 {
    0%, 100% { transform: translateX(-50%) translateY(-35px); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

.character3 {

    width: 150px;

  height: 150px;

  image-rendering: pixelated; 

  background-image: url('imgs/pixellab--Pixel-art-character-in-8-bit--1771427072388.png');

  background-size: contain;

  background-repeat: no-repeat;

  position: absolute;

  bottom: 0px; 

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  animation: jump 0.8s infinite ease-in-out; 
}
.character4 {

    width: 150px;

  height: 100px;

  image-rendering: pixelated; 

  


  background-image: url('imgs/pixellab--Pixel-art-character-in-8-bit--1771427072388.png');

  background-size: contain;

  background-repeat: no-repeat;

 position: absolute;
 bottom: 5px; 

 left: 50%;

  transform: translateX(-50%);

  

  z-index: 10;

  

  

  animation: jump2 0.8s infinite ease-in-out; 
}

.scroll3 {

    position: absolute;

  bottom: 15px;

  left: 50%;

  

  font-family: 'Press Start 2P', cursive;

  color: #fef3fb;

  font-size: 14px;

  text-shadow: 

  2px 2px 0px #4a1e5d, 

    
    -1px -1px 0px #4a1e5d, 
   

   1px -1px 0px #4a1e5d,

    
    -1px 
   1px 0px #4a1e5d,

   1px 
    1px 0px #4a1e5d;

    transform: translateX(-50%);

  text-align: center;
}

.skills-container {

    display: flex;

 flex-wrap: wrap;

 gap: 30px;

  justify-content: center;


}

.card {

    

    width: 200px;

  height: 200px;

  perspective: 1000px; 

 position: relative;

  border: 3px solid #1e40af;

  border-radius: 10px;

  image-rendering: pixelated;

  transition: border-color 0.2s ease;
}

.card-front, .card-back {

    width: 100%;

  height: 100%;

  position: absolute;

  backface-visibility: hidden; 

  border-radius: 10px;

  transition: transform 0.6s;
}

.card-front {

    display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  font-weight: bold;

  padding: 12px;

  box-sizing: border-box;

  transition: transform 0.6s;

  background-color: rgba(5, 17, 57, 0.85);

  font-size: 16px;

  font-family: 'Press Start 2P', cursive;

  text-align: center;

  color: #fef3fb;
}

.card-back {

    background-color: rgba(46, 110, 188, 0.95);

  

  transform: rotateY(180deg);

  font-size: 13px;

  line-height: 1.4;

  font-family: 'Courier New', Courier, monospace;
	font-weight: 700;

    text-align: left;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  padding: 12px;

  box-sizing: border-box;

  word-break: break-word;

  color: #f7f8f9;
}

.card:hover {
    border-color: #7fb3ff;
}

.card:hover .card-front {

    transform: rotateY(180deg);

 text-shadow: 

 0 0 10px #60a5fa,

  0 0 20px #3b82f6,

  0 0 30px #1e40af;
}

.card:hover .card-back {

    transform: rotateY(0deg);
}
.contact-box {
    background: rgba(5, 17, 57, 0.85);
    border: 3px solid #1e40af;
    box-shadow: none;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.contact-box h1 {
    font-family: 'Press Start 2P', cursive;
    margin-bottom: 20px;
    color: #fef3fb;
    text-shadow: 
    2px 2px 0px #4a1e5d, 
    -1px -1px 0px #4a1e5d, 
    1px -1px 0px #4a1e5d,
    -1px 1px 0px #4a1e5d,
    1px 1px 0px #4a1e5d;
    font-size: 24px;
}

.contact-box p {
    font-family: 'Pixelify Sans', sans-serif;
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #cfe8ff;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.contact-btn {
    background: transparent;
    color: #cfe8ff;
    padding: 15px 20px;
    text-decoration: none;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    border: 2px solid #1e40af;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(30,64,175,0.4);
    background: #1e40af;
    color: #fff;
}

.contact-btn:active {
    transform: translateY(0);
    box-shadow: none;
}


.hidden {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}


@media (max-width: 768px) {
    .navbar {
        width: 95%;
        padding: 10px;
        flex-direction: column;
        gap: 5px;
    }
    
    .nav-links {
        gap: 10px 15px; 
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links a {
        font-size: 14px;
    }

    #hero {
        padding: 180px 20px 150px 20px; 
        justify-content: center;
        align-items: center;
        text-align: center;
        background-attachment: scroll; 
        background-position: center top;
        background-repeat: no-repeat;
    }

    .hero-content h1 {
        font-size: 32px;
        line-height: 1.4;
    }

    .headsentence {
        font-size: 16px;
    }

     #about, #skills, #projects, #contact {

        background-attachment: scroll;
        padding: 60px 20px; 
        min-height: 100vh;
        background-position: center top;
        background-repeat: no-repeat;

    }

    .abt p {
        font-size: 13px;
    }

    .project-card {
        width: 100%;
    }

    .character, .character2, .character3, .character4 {
        width: 80px;
        height: 80px;
        bottom: 10px;
    }

    .scroll, .scroll2, .scroll3 {
        bottom: 100px;
        font-size: 10px;
    }

    

}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 24px;
    }
    
    .nav-links a {
        font-size: 12px;
    }
    
    .contact-links {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .contact-btn {
        width: 100%;
        box-sizing: border-box;
    }
}