* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inter', sans-serif;

 }

 :root {
     --primary-color: #0f90db;
     --fitTrack-color: #f17d1e;
     --ecommerce-color: #fa6712;
     --secondary-color: #3af5b7;
     --background-color: #000927;
     --card-background: linear-gradient(135deg, #000927, #1c1c3a);
     --text-color: #ffffff;
     --vendasViagens-color: #0d94e2;
     --biblioteca-color: #ac2af7;
     --textContainer-color: #2a2a4a;

 }

 body {
     background-color: var(--background-color);
     color: #ffffff;
     padding: 20px;

 }

 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 9, 0.85);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     backdrop-filter: blur(4px);
 }

 .modal-content {
     position: relative;
     width: 90%;
     max-width: 900px;
     background: #1c1c3a;
     border-radius: 16px;
     padding: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .modal-close {
     position: absolute;
     top: -14px;
     right: -14px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #0f90db;
     color: #fff;
     border: none;
     cursor: pointer;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s;
 }

 .modal-close:hover {
     background: #3af5b7;
     color: #000927;
 }

 #welcome-message {
     text-align: center;
     font-size: 1.2rem;
     margin-bottom: 40px;
     color: #ffffffcc;
 }

 #welcome-message a {
     color: var(--secondary-color);
     text-decoration: none;
 }

 #welcome-message a:hover {
     color: var(--primary-color);
     transition: color 0.3s;
 }

 .about-bio {
     font-size: 1.1rem;
     color: #ffffffcc;
     line-height: 1.6;
     margin-top: 10px;
 }

 .about-stats {
     display: flex;
     gap: 20px;
     margin: 20px;
 }

 .avatar {
    
     display: flex;
     border-radius: 30%;
     border: 2px solid var(--primary-color);
     animation: slideInRight 1s ease-out;
     min-width: 30%;

 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }

 #main-title,
 .about-heading,
 .about-hello,
 .stat-number,
 .card-title,
 .about-label,
 .project-card h2 {
     font-family: 'JetBrains Mono', monospace;
 }

 .stat-number {
     font-size: 1.8rem;
     font-weight: 800;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-family: 'JetBrains Mono', monospace;
 }

 .stat-label {
     font-size: 0.7rem;
     color: rgba(255, 255, 255, 0.4);
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

 #main-title {
     font-size: 3rem;
     text-align: center;
     background: linear-gradient(90deg, #0c0892, #3af5b7, #058ddc);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 10px;
 }

 .link-container {

     align-items: center;
     display: flex;
     flex-direction: column;
     gap: 20px;
     border-radius: 20px;
     background-color: transparent;
     padding: 20px;
     background-color: var(--background-color);
     animation: pulseOrange 2s ease infinite;
     transition: transform 0.3s, box-shadow 0.3s;
        width: 100%;
        box-sizing: border-box;

 }

 .link-container h3 {
     color: #ffffff;
     font-size: 1.2rem;
     align-self: flex-start;
     margin-left: 20px;
 }

 .link-container p {
     align-self: flex-start;
   

 }


 #projects-section {
     display: flex;
     max-width: 1200px;
     display: flex;
     flex-direction: column;
     gap: 30px;


 }

 .project-card {
     background-color: #1c1c3a;
     border-radius: 30px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform 0.3s, box-shadow 0.3s;
 

 }

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



 .project-card h2 {
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: #3af5b7;
 }

 .project-card p {
     font-size: 1rem;
     color: #ffffffcc;
     margin-bottom: 10px;
 }

 .project-card a {
     display: inline-block;
     margin-top: auto;
     text-decoration: none;
     color: #0f90db;
     font-weight: bold;
     transition: color 0.3s;
 }

 .project-card a:hover {
     color: #3af5b7;
 }

 .about-card {
     border-radius: 12px;
     padding: 20px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .about-card:hover {
     transform: translateY(-3px);
 }




 .about-card.blue {
     background: linear-gradient(135deg, #1c1c3a 60%, rgba(15, 144, 219, 0.1));
     border: var(--primary-color) 1px;
     border-style: inset;
 }

 .about-card.blue>.card-title {
     color: var(--vendasViagens-color);
 }

 .about-card.blue::before {
     background: linear-gradient(90deg, var(--primary-color), transparent);
 }

 .about-card.blue:hover {
     box-shadow: 0 8px 24px rgba(15, 144, 219, 0.15);
 }


 .about-card.orange {
     background: linear-gradient(135deg, #1c1c3a 60%, rgba(241, 125, 30, 0.1));
     border: var(--fitTrack-color) 1px;
     border-style: inset;
 }

 .about-card.orange>.card-title {
     color: var(--fitTrack-color);
 }

 .about-card.orange::before {
     background: linear-gradient(90deg, var(--fitTrack-color), transparent);
 }

 .about-card.orange:hover {
     box-shadow: 0 8px 24px rgba(241, 125, 30, 0.15);
 }


 .about-card.purple {
     background: linear-gradient(135deg, #1c1c3a 60%, rgba(172, 42, 247, 0.1));
     border: var(--biblioteca-color) 1px;
     border-style: inset;
 }

 .about-card.purple>.card-title {
     color: var(--biblioteca-color);
 }

 .about-card.purple::before {
     background: linear-gradient(90deg, var(--biblioteca-color), transparent);
 }

 .about-card.purple:hover {
     box-shadow: 0 8px 24px rgba(172, 42, 247, 0.15);
 }

 .card-title {
     font-size: 0.8rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: #ffffff;
     margin-bottom: 6px;
     font-family: 'JetBrains Mono', monospace;
 }

 .card-desc {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.767);
     line-height: 1.6;
     margin-bottom: 12px;
 }

 .tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .tech-pill {
     font-size: 0.72rem;
     font-weight: 500;
     padding: 3px 9px;
     border-radius: 5px;
     background: rgba(255, 255, 255, 0.07);
     color: rgba(255, 255, 255, 0.6);
     border: 1px outset rgba(255, 255, 255, 0.1);
 }

 .about-card.blue .tech-pill {
     background: rgba(15, 144, 219, 0.12);
     color: #7cc8f0;
     border-color: rgba(15, 144, 219, 0.25);
 }

 .about-card.orange .tech-pill {
     background: rgba(241, 125, 30, 0.12);
     color: #f7aa74;
     border-color: rgba(241, 125, 30, 0.25);
 }

 .about-card.purple .tech-pill {
     background: rgba(172, 42, 247, 0.12);
     color: #d48df7;
     border-color: rgba(172, 42, 247, 0.25);
 }

 #about-section {
     margin: 50px;
     background: linear-gradient(135deg, #000927, #1c1c3a);
     padding: 30px;
     border-radius: 20px;
     animation: slideInTop 1s ease-out;
     border-style: outset;
     border: 1px outset var(--primary-color);
     width: 90%;

 }

 .about-actions {
     display: flex;
     justify-content: flex-start;
     margin-left: 10px;
     gap: 30px;


 }

 .about-actions a {
     text-decoration: none;
     font-weight: bold;
     transition: color 0.3s;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .btn-primary {
     background-color: var(--background-color);
     color: var(--primary-color);
     border: 1px outset var(--primary-color);
     padding: 10px 20px;
     cursor: pointer;
     transition: background-color 0.3s;
     border-radius: 10px;
 }

 .btn-outline {
     background-color: transparent;
     color: var(--secondary-color);
     border: 1px outset rgba(58, 245, 183, 0.35);
     padding: 10px 20px;
     transition: background-color 0.3s;
     border-radius: 20px;
 }

 .btn-primary:hover {
     background-color: var(--primary-color);
     color: #ffffff;

 }

 .btn-outline:hover {
     background-color: rgba(58, 245, 183, 0.35);
     color: #ffffff;
 }

 .about-top {
     display: flex;
     align-items: end;
     margin-bottom: 30px;
 }

 .about-label {
     color: var(--primary-color);
     font-size: 0.8rem;
     margin-top: 5px;
     font-weight: bold;
 }

 .about-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 .about-left {
     display: flex;
     flex-direction: column;
     gap: 12px;
     padding-left: 20px;
     width: 100%;

 }

 .about-right {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     gap: 10px;
     padding-right: 20px;
     margin-right: 20px;

 }

 .status-badge {
     padding: 5px 15px;
     align-items: center;
     background-color: #3af5b71e;
     color: var(--secondary-color);
     width: fit-content;
     border-radius: 20px;
     font-size: 0.9rem;
     animation: pulse 2s infinite;
     margin-bottom: 20px;
     border: 1px outset rgba(58, 245, 183, 0.35);
     transition: background-color 0.3s, border-color 0.3s;
 }



 .about-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 2.2rem;
     color: #ffffffd3;
 }

 .about-role {
     font-size: 1.2rem;
     font-weight: bold;
     margin-top: 5px;
     font-weight: 500;
 }

 .vendasViagens .link-container {
     animation: pulseBlue 2s ease infinite;
 }

 .biblioteca .link-container {
     animation: pulsePurple 2s ease infinite;
 }

 .gerenciadorEventos .link-container {
     animation: pulseGreen 2s ease infinite;
 }


 .about-hello {
     font-size: 0.9rem;
     background: radial-gradient(circle, var(--primary-color), var(--secondary-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: bold;
 }

 .about-line {
     margin-left: 10px;
     margin-top: 50px;
     width: 90%;
     height: 1px;
     background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), transparent);
     margin-top: 5px;
 }

 .about-line-bottom {

     margin-left: 10px;
     margin-top: 20px;
     width: 90%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--biblioteca-color), var(--fitTrack-color));
     display: block;
 }


 .btn {
     margin-top: 20px;
     background-color: var(--secondary-color);
     color: #ffffff;
     border: none;
     padding: 10px 20px;
     cursor: pointer;
     transition: background-color 0.3s;
     align-self: flex-start;
     border-radius: 10px;
 }

 .card-content .btn {
     margin: 20px;
     margin-left: 40px;
 }

 .btn:hover {
     background-color: #3af5b7;
     color: #086296;
 }

 .hidden {
     display: none;

 }
 .list-elements img {
    width: 30px;
    height: 30px;
    margin-right: 20px;
    vertical-align: middle;
}

 .img-wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-items: center;
     margin: 10px;
     padding: 10px;
     gap: 40px;
     width: 100%;
     box-sizing: border-box;
     padding: 20px;

 }


 .img-wrapper:nth-of-type(even) {
     direction: rtl;
 }

 .img-wrapper:nth-of-type(even) .text-container,
 .img-wrapper:nth-of-type(even) .img-container {
     direction: ltr;



 }

 .img-container {

     display: flex;
     justify-content: center;
     align-items: space-between;
     justify-items: center;


 }

 .card-content {


     background-color: #12122ad7;
     border-radius: 20px;
     margin-top: 10px;
     animation: slideInTop 1s ease-out;
 }




 .ecommerce .card-content {
     border-color: var(--ecommerce-color);


 }

 .ecommerce .img-ss {
     box-shadow: 0 10px 20px rgba(250, 103, 18, 0.3);
     max-width: 200px;
 }

 .ecommerce h2 {
     color: var(--ecommerce-color);
 }

 .ecommerce .btn {
     background-color: var(--ecommerce-color);
     color: #ffffff;
 }

 .ecommerce a {

     color: var(--ecommerce-color);
 }

 .ecommerce .btn:hover {
     background-color: #ffffff;
     color: var(--ecommerce-color);
 }

 .project-card.ecommerce:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(241, 125, 30, 0.3);
 }

 .fitTrack .card-content {
     border-color: var(--fitTrack-color);


 }

 .fitTrack h2 {
     color: var(--fitTrack-color);
 }

 .fitTrack .btn {
     background-color: var(--fitTrack-color);
     color: #ffffff;
 }

 .fitTrack a {

     color: var(--fitTrack-color);
 }

 .biblioteca a {

     color: var(--biblioteca-color);
 }

 .project-card.biblioteca {
     border: 1px outset var(--biblioteca-color);
     background: linear-gradient(135deg, transparent, #ac2af72c);


 }

 .project-card.ecommerce {
     border: 1px outset #fa6712a1;
     background: linear-gradient(135deg, transparent, #fa67122d);


 }

 .project-card.gerenciadorEventos {
     border: 1px outset #3af5b7a1;
     background: linear-gradient(135deg, transparent, #3af5b736);


 }

 .vendasViagens a {

     color: var(--vendasViagens-color);
 }

 .gerenciadorEventos a {

     color: var(--secondary-color);
 }

 .gerenciadorEventos .btn {
     background-color: var(--secondary-color);
     color: #ffffff;

 }

 .gerenciadorEventos .btn:hover {
     color: #3af5b7;
     background-color: white;
 }

 .fitTrack .btn:hover {
     background-color: #ffffff;
     color: var(--fitTrack-color);
 }

 .project-card.fitTrack {
     border: 1px outset #f17d1ea1;
     background: linear-gradient(135deg, transparent, #f17d1e3a);

 }

 .project-card.fitTrack:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(241, 125, 30, 0.3);
 }

 .project-card.vendasViagens {
     border: 1px outset #0f9ef1a1;
     background: linear-gradient(135deg, transparent, #0f9ef12a);
     border-style: outset;
 }

 .objective-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-items: space-between;
     width: 100%;
     margin: 10px;
     padding: 10px;
     gap: 30px;
 }


 #footer {

     display: flex;
     flex-direction: column;
     color: #ffffffe7;
     text-decoration: none;
     margin: 20 20px;
     transition: color 0.3s;
 }


 .objective-container a {
     display: inline-block;
     margin-top: 10px;
     text-decoration: none;
     font-weight: bold;
     transition: color 0.3s;

 }

 .fitTrack .objective-container a:hover {
     color: #ffffff;
 }

 .objective-container p {
     text-align: justify;
     color: #ffffffcc;
     margin-top: 10px;
     font-size: 1rem;
 }


 .gerenciadorEventos .card-content {
     border-color: var(--secondary-color);
 }


 .gerenciadorEventos .img-ss {
     box-shadow: 0 10px 20px rgba(58, 245, 183, 0.3);
 }

 .fitTrack .img-ss {
     box-shadow: 0 10px 20px rgba(241, 125, 30, 0.3);
 }

 .vendasViagens .card-content {
     border-color: var(--vendasViagens-color);
 }

 .vendasViagens h2 {
     color: var(--vendasViagens-color);
 }

 .vendasViagens .btn {
     background-color: var(--vendasViagens-color);
     color: #ffffff;
 }

 .vendasViagens .btn:hover {
     background-color: #ffffff;
     color: var(--vendasViagens-color);
 }

 .project-card.vendasViagens:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(13, 148, 226, 0.3);
 }



 .vendasViagens .img-ss {
     box-shadow: 0 10px 20px rgba(13, 148, 226, 0.3);
     max-width: 250px;

 }

 .biblioteca .card-content {
     border-color: var(--biblioteca-color);
 }

 .biblioteca h2 {
     color: var(--biblioteca-color);
 }

 .biblioteca .btn {
     background-color: var(--biblioteca-color);
     color: #ffffff;
 }

 .biblioteca .btn:hover {
     background-color: #ffffff;
     color: var(--biblioteca-color);
 }

 .project-card.biblioteca:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(152, 38, 245, 0.3);
 }



 .biblioteca .img-ss {
     box-shadow: 0 10px 20px rgba(170, 23, 238, 0.3);
 }

 .img-ss {

     width: 100%;
     border-radius: 20px;
     animation: slideInRight 1s ease-out;
     gap: 20px;

 }

 .about-card.blue .card-desc {
     color: #7cc8f0;
 }

 .about-card.orange .card-desc {
     color: #f7aa74;
 }

 .img-ss:hover {

     transform: scale(1.05);
     transition: transform 0.3s;


 }

 .about-card.purple .card-desc {
     color: #d48df7a2;
 }

 .img-wrapper:nth-of-type(2) ul {

     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 4px;

 }

 .text-container {
     text-align: start;
     border: 1px outset var(--textContainer-color);
     background-color: #2a2a4a;
     color: #ffffff;
     align-self: center;
     padding: 20px;
     width: 100%;
     border-radius: 20px;
     animation: slideInLeft 1s ease-out;
     overflow: hidden;
     box-sizing: border-box;
     min-width: 0
 }

 .vendasViagens .text-container {
     border-color: var(--vendasViagens-color);

 }

 .text-container ul {
     display: grid;
     gap: 6px;
     width: 100%;
     min-width: 0;
     ;
 }

 .text-container:hover {
     transform: scale(1.05);
     transition: transform 0.3s;

 }

 .fitTrack .text-container {
     border-color: var(--fitTrack-color);

 }

 .biblioteca .text-container {
     border-color: var(--biblioteca-color);

 }

 .ecommerce .text-container {
     border-color: var(--ecommerce-color);

 }

 .gerenciadorEventos .text-container {
     border-color: var(--secondary-color);

 }

 .list-elements {

     font-size: 1rem;

     padding: 6px 8px;
     word-break: break-word;
     overflow-wrap: break-word;
     list-style: none;
 }

 footer {
     text-align: center;
     margin-top: 50px;
     font-size: 0.9rem;
     color: #ffffff66;
 }


.reveal {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateX(0);
}

 @keyframes slideInRight {

     from {
         opacity: 0;
         transform: translateX(500px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }

 }

 @keyframes slideInLeft {

     from {
         opacity: 0;
         transform: translateX(-500px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(24, 206, 145, 0.493);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(58, 245, 183, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(58, 245, 183, 0);
     }
 }

 @keyframes pulsePurple {
     0% {
         box-shadow: 0 0 0 0 rgba(176, 13, 226, 0.493);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(176, 13, 226, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(176, 13, 226, 0);
     }
 }

 @keyframes pulseGreen {
     0% {
         box-shadow: 0 0 0 0 rgba(12, 211, 178, 0.493);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(22, 219, 15, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(15, 219, 93, 0);
     }
 }

 @keyframes pulseBlue {
     0% {
         box-shadow: 0 0 0 0 rgba(15, 144, 219, 0.493);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(15, 144, 219, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(15, 144, 219, 0);
     }
 }

 @keyframes pulseOrange {
     0% {
         box-shadow: 0 0 0 0 rgba(238, 116, 17, 0.493);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(241, 125, 30, 0.13);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(241, 125, 30, 0);
     }
 }

 @keyframes slideInTop {

     from {
         opacity: 0;
         transform: translateY(-500px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 @media (max-width: 768px) {
     #about-section {
         margin: 20px;
         padding: 20px;
         border-radius: 20px;
         width: 100%;
         margin: 10px 0;
         padding: 16px;

     }

     .about-grid {
         margin: 10px;
         padding: 10px;
         grid-template-columns: 1fr;
         gap: 20px;
         min-width: 0px;
     }

     .about-bio {
         font-size: 0.8rem;
     }

     .about-actions {
         justify-content: center;
     }

     .avatar {
        
         max-width: 40%;

     }


     .about-heading {
         font-size: 1.5rem;
     }

     .about-role {
         font-size: 1rem;
         margin-right: auto;
     }

     .stat-label {
         font-size: 0.6rem;
     }

     .about-top {

         margin-bottom: 20px;
     }

     .about-left {
         min-width: 0px;
         padding-left: 0;
     }

     .about-right {
         display: flex;
         margin-left: auto;
         min-width: 0px;
         gap: 20px;

     }

     .about-stats {
         justify-content: center;
         min-width: 0px;
         font-size: 0.6rem;
         gap: 10px;
     }

     .status-badge {
         font-size: 0.8rem;
         padding: 4px 12px;
     }

     .about-label {
         font-size: 0.6rem;
     }

     .about-actions a {
         font-size: 0.6rem;
     }

     .about-actions {
         gap: 10px;
     }

     .about-card.about-card.orange {
         min-width: 150px;


     }

     .about-card.about-card.blue {
         min-width: 150px;

     }

     .about-card.about-card.purple {
         min-width: 150px;

     }

     .stat {
         display: flex;
         flex-direction: column;
         align-items: center;
         ;
     }

     #main-title {
         font-size: 2.2rem;
     }


     #welcome-message {
         font-size: 1rem;
     }

     .project-card {
         padding: 15px;
         display: flex;
         flex-direction: column;

     }



     .project-card h2 {
         font-size: 1.2rem;
     }

     .project-card p {
         font-size: 0.9rem;
     }

     .text-container {

         align-self: auto;
         padding: 10px;
     }



     .text-container li {
         font-size: 0.7rem;
     }

     .img-wrapper:nth-of-type() .text-container {
         padding-left: 20px;
     }

     .img-wrapper:nth-of-type(2) {
         flex-direction: column;
     }


     .img-wrapper {

         flex-direction: column;
     }

     .btn {
         padding: 8px 16px;
     }
 }

 @media (max-width:426px) {
     .about-heading {
         flex-direction: column;
         gap: 10px;
     }
     .list-elements img {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }
     .avatar {
         margin: 0;
     }

     .about-role {
         margin: 0;
     }

     .about-top {
         flex-direction: column;
         gap: 10px;
     }

     .about-actions {
         flex-direction: column;
         gap: 10px;
         width: fit-content;
         margin: auto;
     }

     .about-right {
         margin: auto;
         justify-content: center;
     }

     .about-grid {
         gap: 20px;
     }

     .card-desc {
         font-size: 0.8rem;
     }

     .tech-stack {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         width: fit-content;
     }

     .avatar {
         width: 120px;
     }

     .img-wrapper {
         display: grid;
         grid-template-columns: 1fr;
    
     }




     .about-card {
         padding: 15px;
     }

     .list-elements {
         font-size: 0.8rem;

     }

     .text-container {
         padding: 15px;
     }



     .text-container li {
         font-size: 0.8rem;
     }

     .img-wrapper:nth-of-type() .text-container {
         padding-left: 15px;
     }

     .btn {
         padding: 10px 20px;
     }

     .project-card {
         padding: 15px;
     }

     h2 {
         font-size: 1.2rem;
     }

     .card-content h2 {
         font-size: 1rem;
     }

     .link-container h3 {
         font-size: 1rem;
     }

    

     .project-card p {
         font-size: 0.8rem;
     }

     .about-bio {
         font-size: 0.9rem;
     }

     #welcome-message {
         font-size: 1rem;
     }

     #main-title {
         font-size: 2rem;
     }

     .status-badge {
         font-size: 0.8rem;
         padding: 4px 12px;
     }

     .card-content {

         width: 100%;
     }


 }