/* Global Styles */
@font-face {
    font-family: 'ChalkboardSE';
    src: url('./fonts/ChalkboardSE-Regular-02_0.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ChalkboardSE';
    src: url('./fonts/ChalkboardSE-Light-01_0.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'ChalkboardSE';
    src: url('./fonts/ChalkboardSE-Bold-03_0.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'ChalkboardSE', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    background-color: #181A1C;
}

h2, h3 {
    font-weight: 700;
}

.tagline {
    font-weight: 300;
}


main {
    color:#E0DFDC;
    width: 80%;
    margin: auto;
}

h2 {
    margin-bottom: 5%;
    display: inline-block;
    padding-bottom: 5px;
}

h1, h2, h3, blockquote {
    color: aqua;
}


section {
    margin-bottom: 5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #444;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}





/* header Styles */

header {
    display:flex;
    align-items: center;
    justify-content: flex-end;
}

#nav{
    display: flex;
    gap: 1rem;
    flex-direction: row;
    list-style-type: none;
    margin-right: 2rem;
    margin-top:5%;
}

#nav li{
    text-decoration: none;
    background-color: #111;
    padding: 0.4rem;
    border-radius: 1rem;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#nav li a {
    text-decoration: none;
    color: #3391FF;
    padding: 0 1rem;
}

#nav li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}


/* main Styles */

#name, .tagline, .cta{
    text-align: center;
    font-size: 1.5rem;
    animation: pulse 3s infinite;
}

#name {
  margin-bottom: 0.25rem; /* Tightens name → tagline */
}

.tagline {
  margin-bottom: 0.75rem; /* Slight breathing room before buttons */
  font-size: 1.1rem;
  color: #ccc; /* Softer than name */
}

.cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 50px;
}

.cta a {
  background: #222;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
}
.cta a:hover {
  background: #333;
}

.ts-icon {
    width: 10%;
    margin-top: 1%;
    margin-bottom: -2%;
}

#hello-world {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.5rem;
    animation: pulse 3s infinite;
}

#first-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
  background-color: #1a1a1a;
  border-radius: 1rem;
  box-shadow:
    0 0 0 2px #00ffffaa,       /* soft border glow */
    0 0 15px #00ffff33,        /* outer aqua halo */
    0 0 30px #00ffff22 inset;  /* optional inner glow */
  max-width: 1200px;
  margin: 0 auto;
  transition: box-shadow 0.3s ease;
}



#first-section p {
    text-shadow: 1px 1px 2px #161f1b, 0 0 5px #155a5a;
}






#self-pic {
    max-width: 30%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

#about-me {
    width: 40%;
}

/* Home Styles */

#projects-container h2 {
    margin-left: 9%;
    margin-top: 4%;
}

#projects-holder {
    display: flex;
    justify-content: space-around; 
}

.project {
    width: 20%;
    text-decoration: none;
    background-color: #111;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.project:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}

.project-img {
    width: 100%;
}

.project-logos {
    width: 100%;
}

.logo {
    width: 10%;
}

/* Contact Styles*/

#contact {
    max-width: 600px;
    margin: 5rem auto;
    padding: 2rem;
    background-color: #1F1F1F;
    border-radius: 1rem;
    color: white;
    box-shadow: 0 0 15px rgba(0,255,255,0.2);
}



#contact h2 {
    text-align: center;
    color: aqua;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: #222;
    color: aqua;
}

.contact-form button {
    padding: 0.75rem;
    background-color: aqua;
    color: #111;
    border: none;
    border-radius: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background-color: #00dddd;
}

.contact-p {
    color: aqua;
}


/* Project Page Styles */

#project-page-section {
    width: 80%;
    margin: 0 auto;
}


.project-page-article {
    display: flex;
    background-color: #15293b2e;
    justify-content: space-around;
    height: auto;
    align-items: center;
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.project-page-div1, .project-page-div2 {
    width: 40%;
}

.project-page-tech-stack {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 100%;
  overflow-wrap: break-word;
}


.project-page-tech-stack li{
    background-color: #1E3A3C; /* translucent aqua */
    color: #E0DFDC;
    padding: 0.4rem 0.75rem;
    border-radius: 999px; /* makes the bubble! */
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #00ffff55;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
    transition: background 0.3s ease, transform 0.2s ease;
}

.project-page-div2 {
    margin-top: 5%;
}

.view-site-btn{
    display: block;
    text-decoration: none;
    margin-top: 3rem;
    margin-left: 15%;
    margin-bottom: 3rem;
    background-color: #111;
    width:35%;
    text-align: center;
    color: #3391FF;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.view-site-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}

.project-page-img {
    width: 80%;
}

.project-page-btn {
    background-color: #111;
    display: inline-block;
    color: #3391FF;
    padding: 1rem 1.4rem;
    border-radius: 1rem;
    font-weight: 600;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.3rem;
    text-decoration: none;
}
.project-page-btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}

/* Detailed Project Page Styles*/

.project-name {
    text-align: center;
    margin-bottom: 5%;
}

#project-top-container {
    display: flex;
    flex-direction: row;
    width: 100%; 
    box-sizing: border-box;
}

.project-top-left {
    width: 50%;
    display: flex;
}

.project-btn {
    padding: 0 0.25rem;
    font-size: 2.5rem;
}

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

#project-screenshot{
    width: 100%;
}

.project-top-right {
    padding-left: 1rem;
    width: 40%;
    margin-left: 10%;
    border: 1px solid gray;
    border-radius: 1rem;
}



.project-tech-stack span{
    margin: 1 0.25%;
    background-color: rgba(0, 128, 128, 0.802);
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
}
.stack-items{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0.25%;
}

#project-page-btn-div{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 85%;
    margin-top: 2%;
    margin-bottom: -2%;
}

#view-site-project-page-btn{
    text-decoration: none;
    display: block;
    background-color: #111;
    text-align: center;
    color: #3391FF;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#view-site-project-page-btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
}

.project-features{
    font-size: 1rem;
}
.project-features li{
    padding: 0.25rem 0;
}

#demo-container, .project-middle{
    margin-top: 5%;
}

#demo-container img.demo-pic {
    height: 25rem;
}

/* About Page Styles */
#about-page {
    margin: 0 auto;
    width: 70%;
}
#about-page .bold{
    font-weight: 700;
    font-size: 1.5rem;
}

#about-title {
    text-align: center;
    margin-bottom: 10%;
}




/* Footer Styles */

footer {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    color: #ffffff;
    padding: 2rem;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 5rem;
    border-top: 2px solid #00ffff55;
    box-shadow: 0 -4px 20px rgba(0, 255, 255, 0.1);
}

footer a {
    color: #00ffff;
    text-decoration: none;
    margin: 0 0.5rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

footer a:hover {
    color: #ffffff;
    text-shadow: 0 0 5px #00ffff;
}

#footer-content {
    max-width: 600px;
    margin: 0 auto;
}

footer p {
    margin: 0.5rem 0;
}


@keyframes linkPulse {
    0% { text-shadow: 0 0 5px #00ffff; }
    50% { text-shadow: 0 0 10px #00ffff88; }
    100% { text-shadow: 0 0 5px #00ffff; }
}

footer a:hover {
    animation: linkPulse 1s infinite;
}


/* Responsive design */

@media (max-width: 4000px) {
    .project-page-tech-stack li{
        width: 15%;
    }
}

/* Big Screens*/
@media (max-width: 2000px) {
    .project-page-tech-stack {
        margin: 2rem auto;
        width: 80%;
    }


    .project-page-tech-stack li{
        width: 30%;
    }
}

/* Less Big Screens */

@media (max-width: 1467px) {
    .project-page-tech-stack li{
        width: 35%;
    }
}

@media (max-width: 1262px) {
    .project-page-tech-stack li{
        width: 40%;
    }
}

@media (max-width: 1108px) {
    .project-page-tech-stack li{
        width: 45%;
    }
}


/* Tablet & below */
@media (max-width: 1024px) {
    * { 
    box-sizing: border-box; 
}
    nav {
        width: 100%;
        
    }
    #projects-container{
        text-align: center;
        margin-top: 5rem;
    }
    #nav li{
        margin: 0 auto;
    }
    main {
        width: 90%;
    }
    html, body {
        overflow-x: hidden;
        width: 99%;
        margin: 0 auto;
    }

    


    #first-section {
    flex-direction: column;
    text-align: center;
    }

    #first-section {
    padding: 2rem;
    max-width: 90%;
    margin: 0 auto;
    }

    #self-pic {
        max-width: 60%;
        margin-bottom: 2rem;
    }

    #about-me {
        width: 80%;
    }

    #projects-holder {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }


    #project-page-section {
        width: 80%;
        margin: 0 auto;
    }
    #project-page-section h2 {
        text-align: center;
        width: 100%;
    }


    .project-page-article {
        display: flex;
        background-color: #15293b2e;
        justify-content: space-around;
        height: 500px;
        width: 100%;
        align-items: center;
        border-radius: 1rem;
        margin-bottom: 3rem;
    }

    .project-page-div1, .project-page-div2 {
        width: 40%;
    }

    .project-page-tech-stack {
    margin: 2rem auto;
    width: 80%;
    }


    .project-page-tech-stack li{
        width: 70%;
    }

    .project-page-div2 {
        margin-top: 5%;
    }

    .project-page-img {
        width: 100%;
        margin-left: -10%;
    }

    .project-page-btn {
        background-color: #111;
        display: inline-block;
        color: #3391FF;
        padding: 1rem 1.4rem;
        border-radius: 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border: 1px solid #333;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin-top: 0.5rem;
        font-size: 1.3rem;
        text-decoration: none;
    }
    .project-page-btn:hover{
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
    }

    .project {
        width: 80%;
    }


    .project-btn {
        padding: 0 0.25rem;
        font-size: 1.5rem;
    }

    #project-top-container {
    display: flex;
    flex-direction: column;
    width: 100%; 
    align-items: center;
    box-sizing: border-box;
}

    #project-screenshot{
    width: 90%;
}
    .project-top-left {
        width: 100%;
        display: flex;
        margin-bottom: 2rem;
        margin-left: 2rem;

    }

    .project-top-right {
        width: 90%;
        margin-right: 3.5rem;
    }

    .project-middle {
        margin-left: 2.5rem;
    }
}

@media (max-width: 952px) {
    .project-page-tech-stack li{
        width: 75%;
    }
}

@media (max-width: 901px) {
    .project-page-tech-stack li{
        width: 80%;
    }
}

@media (max-width: 854px) {
    .project-page-tech-stack li{
        width: 85%;
    }
}

@media (max-width: 818px) {
    .project-page-tech-stack li{
        width: 90%;
    }
}

@media (max-width: 784px) {
    .project-page-tech-stack li{
        width: 100%;
    }
}

/* Phone & below */
@media (max-width: 768px) {
  body {
    font-size: 1.2rem;
  }

  #nav {
    flex-wrap: wrap;
    justify-content: center;
  }

      .project-top-left {
        margin-left: 1rem;

    }



  #hello-world {
    font-size: 1.2rem;
  }

  #self-pic {
    max-width: 80%;
  }

  #about-me {
    width: 100%;
  }
}

/* Media fix */

@media (max-width: 724px) {
    .project-page-tech-stack{
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        list-style: none;
    }

    .project-page-tech-stack li {
        font-size: 0.5rem;
    
    }
}

@media (max-width: 550px) {
    .project-page-tech-stack li{
        width: 110%;
    }
}

/* Ultra-small phones */
@media (max-width: 480px) {
  body {
    font-size: 1rem;
  }

  #nav {
    gap: 0.2rem;
    flex-wrap: nowrap;
  }

  #nav li {
    padding: 0.25rem;
    font-size: 0.5rem;
  }


  .project-page-article {
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto;
}


  .project {
    width: 100%;
    
  }

  .project-page-div1 {
    margin-top: 5rem;
    margin-bottom: 4rem;
    width: 80%;
    order:2;
  }

.project-page-div2 {
    margin-top: 4rem;
    margin-left: 1.5rem;
    width: 80%;
  }

  .project-page-div1 h3{
    margin-right: 1rem;
  }

  .project-page-tech-stack{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    list-style: none;
  }

  .project-page-tech-stack li {
    font-size: 0.5rem;
    
  }

  .project-page-btn {
    padding: 0.75rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
  }

  .project-page-img {
    width: 100%;
    order: 1;
  }

  #contact {
    padding: 1rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }
}

@media (max-width: 320px) {

    header {
        width: 100%;
    }

    #nav li a {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    }


    .project-top-left {
        width: 90%;
        margin-right: 3rem;
    }

    .stack-items {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 0.25rem;
    }

    /* .project-tech-stack span{
        font-size: 1rem;
        padding: 0 0.75rem;
        border: 1px solid red;
    } */

    .project-main {
        width: 98%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .project-top-right{
        margin-left: 3rem;
        width: 98%;
    }

    .project-article{
        margin-left: -2rem;
        width: 97%;
    }
}