body {
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;

 }

 .icon-square {
     width: 3rem;
     height: 3rem;
     border-radius: .75rem;
 }

 .nav-link {
     color: gray;
 }

 .nav-link:hover {
     color: orange;
 }

 .active {
     color: blue;
 }

 .heroImage {
     height: 100vh;
     width: 100vw;
     object-fit: cover;
 }

 .eduSectio>p {
     color: gray;
 }


 .heroText>p {
     width: 100%;
     font-size: large;
     font-style: italic;
     text-align: center;
 }

 .designerWord {
     font-family: "Great Vibes", cursive;
     color: orange;
     font-size: 2rem;
     word-spacing: 0.5rem;
     font-style: italic;
 }

 .hero {
     position: relative;
     background-image: url('imgs/hero2.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 100vh;
     width: 100vw;
 }

 .heroText {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: gray;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
 }

 .skillSection,
 .projectSection,
 .getInTouchSection {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 30px 0;
 }

 .skills {
     background-image: linear-gradient(to top left, orange, white, white, white, white)
 }


 .aboutMeSection {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 30px 0;
 }

 .skillSection>p,
 .projectSection>p,
 .aboutMeSection>p {
     color: gray;
     font-style: italic;
     text-align: center;

 }

 .skillSection {
     text-align: center;
 }

 .projectSection {
     background-image: linear-gradient(to bottom left, orange, black, black, black, black);
     color: rgb(255, 255, 255);
 }



 .editorial {
     display: block;
     width: 100%;
     height: 60px;
     max-height: 60px;
     margin: 0;
     z-index: 5;
     bottom: 0;
     position: absolute;
     left: 0;
     float: left;
 }

 .parallax1>use {
     animation: move-forever1 10s linear infinite;
 }

 .parallax2>use {
     animation: move-forever2 8s linear infinite;
 }

 .parallax3>use {
     animation: move-forever3 6s linear infinite;
 }

 .parallax4>use {
     animation: move-forever4 4s linear infinite;
 }

 @keyframes move-forever1 {
     0% {
         transform: translate(85px, 0%);
     }

     100% {
         transform: translate(-90px, 0%);
     }
 }

 @keyframes move-forever2 {
     0% {
         transform: translate(-90px, 0%);
     }

     100% {
         transform: translate(85px, 0%);
     }
 }

 @keyframes move-forever3 {
     0% {
         transform: translate(85px, 0%);
     }

     100% {
         transform: translate(-90px, 0%);
     }
 }

 @keyframes move-forever4 {
     0% {
         transform: translate(-90px, 0%);
     }

     100% {
         transform: translate(85px, 0%);
     }
 }

 a {
     text-decoration: underline;
     color: black;
 }

 .beyond {
     text-align: center;
     padding-bottom: 40px;
     position: relative;
     padding: 20px;
 }

 .getInTouchSection {
     padding-bottom: 40px;
 }

 .eduSectio {
     margin-top: 30px;
     margin-bottom: 30px;
     text-align: center;
 }

 .colors {
     position: absolute;
     top: 20%;
     z-index: -1;
 }

 .fade {
     opacity: 0;
     transition: opacity 2s ease-in-out;
 }

 .fade.visible {
     opacity: 1;
 }

 .art {
     width: 50%;
     margin-top: -100px;
     transition: transform 0.5s ease;
     transform-origin: bottom;
 }

 .art:hover {
     transform: scale(1.5);
 }

 #xcode,
 #vscode {
     transition: transform 0.3s ease;

 }

 #xcode:hover,
 #vscode:hover {
     transform: scale(1.2);
     /* Adjust the scale value as needed */
 }

 #iosButton {
     background-color: rgb(255, 77, 0);
     border-color: rgb(255, 77, 0);


 }


 #webButton {
     background-color: rgb(255, 77, 0);
     border-color: rgb(255, 77, 0);
 }

 .ladybug {
     width: 50px;
     /* Adjust size as needed */
     height: 50px;
     /* Adjust size as needed */
     position: absolute;
     top: 0;
     left: 0;
     transform: translate(-50%, -50%);
 }

 .ladybug-container {
     position: fixed;
     top: 20px;
     /* Adjust as needed */
     left: 20px;
     /* Adjust as needed */
     transform: translate(-50%, -50%);
     z-index: 1000;
     /* Ensure it stays on top of other content */
 }

 .ladybug {
     width: 15px;
     /* Adjust size as needed */
     height: 15px;
     /* Adjust size as needed */
     cursor: url('imgs/hammer.svg') 8 8, auto;
     background-size: cover;
     padding: 50px;
     /* Add padding to increase the clickable area */
     box-sizing: content-box;

 }

 .bug-message {
     position: relative;

     transform: translateX(-50%) translateY(-10px);

     padding: 10px;
     font-size: 10px;
     /* Responsive font size */
     color: #fff;
     background: rgb(199, 103, 52);
     border-radius: 5px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s ease;
     z-index: 10000;
 }

 .flashcard {
     display: none;
     /* Hidden by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     justify-content: center;
     align-items: center;
     z-index: 1000;
     /* On top of other content */
 }

 .flashcard-content {
     background: white;
     border-radius: 10px;
     padding: 20px;
     width: 80%;
     height: 80%;
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
     position: relative;
 }

 .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: #8a8a8a8a;
     border-radius: 25px;
     width: 50px;


     border: none;
     cursor: pointer;
     font-size: 1.5em;
 }

 .progress-bar {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 30%;
     background-image: linear-gradient(to right, #b1b1b100, #ffffffd4);
     border-radius: 10px;
     overflow: hidden;
     margin-top: 20px;
     overflow: hidden;
     margin: 0 auto;
     box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
 }

 .progress {
     height: 5px;
     width: 0;
     background-image: linear-gradient(to right, #b1b1b100, rgba(255, 166, 0, 0.332), rgba(255, 166, 0, 0.63), orange);
     border-radius: 10px 0 0 10px;
     position: relative;
     /* Required for positioning the sparkles */
     overflow: hidden;
     /* Ensure sparkles stay within the progress bar */
     animation: fillProgress 2s forwards;
 }

 @keyframes fillProgress {
     to {
         width: 100%;
     }
 }

 .animated-text {
     transition: color 1s ease, background-color 1s ease, transform 1s ease;
 }

 /* Responsive Styles */
 @media (max-width: 1250px) {
     .heroText {
         width: 90%;

         padding: 10px;
         font-size: smaller;
         text-align: center;
     }

     .heroText>p {
         font-size: small;
     }

     .projectSection {
         padding: 15px;
     }

     .projectSection img {
         width: 100%;
     }

     .editorial {
         height: 40px;
     }

     .vscodeContainer {
         flex-direction: column;
     }

     .vscode1 {
         order: 2;
     }

     .vscode2 {
         order: 1;
     }

     .skillSection {
         padding: 20px;
         font-size: small;
         text-align: center;
     }

     .art {

         width: 80%;
         margin-top: -50px;
     }

 }

 @media (max-width: 576px) {
     .heroText {
         width: 100%;

         padding: 5px;
         font-size: smaller;
         text-align: center;
     }

     .skillSection,
     .projectSection,
     .getInTouchSection {
         padding: 15px 0;
     }

     .projectSection img {
         width: 100%;

     }

     .beyond {
         padding-bottom: 20px;
         font-size: small;

     }

     #xcode,
     #vscode {
         width: 200px;

     }





     .vscode1 {
         order: 2;
     }

     .vscode2 {
         order: 1;
     }

     .skillSection {
         padding: 20px;
         font-size: small;
         text-align: center;
         width: 300px;

     }

     #iosButton {

         width: 150px;

     }

     #webButton {

         width: 150px;
     }

     .art {
         width: 100%;

         margin-top: -60px;
     }
 }