[data-theme="dark"] body {
  background-color: #131212;
  color: white;
}

[data-theme="dark"] header {
  background-color: #181818;
  color: #f1ecec;
  padding: 1rem;
  box-shadow: 0 3px 5px rgba(88, 54, 8, 0.1);
}

[data-theme="dark"] nav ul li a {
  color: #e4ddddf1;
  text-decoration: none;
  transition: cubic-bezier(1, 0, 0, 1) 0.15s;
}

[data-theme="dark"] .duration {
  font-size: 14px;
  color: #cecccc;
  font-style: italic;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 8px;
}
[data-theme="light"] .back-button {
  display: inline-flex;
  align-items: left;
  border: none;
  color: #020202;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  font-family: inherit;
}

[data-theme="dark"] .gpa {
  font-size: 14px;
  color: #cecdcd;
  font-style: italic;
}

[data-theme="dark"] #seeMoreLink {
  padding: 1px 2px;
  background-color: transparent;
  text-decoration: none;
  color: rgb(211, 209, 209);
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

[data-theme="dark"] #githublink {
  background-color: transparent;
  text-decoration: none;
  color: rgb(238, 235, 235);
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

[data-theme="dark"] .interests-toggle {
  background-color: transparent;
  text-decoration: none;
  color: rgb(216, 216, 216);
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
[data-theme="dark"] ::selection {
  background-color: rgb(80, 43, 0);
}

[data-theme="dark"] .interest-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 10px;
  padding: 30px;
  max-width: 600px;
  box-shadow: 0 4px 6px rgba(255, 158, 79, 0.1);
}

html,
body {
  overflow-x: hidden;
}

main {
  padding: 2rem;
}

section {
  margin-bottom: 2rem;
}

section h2 {
  margin-bottom: 1rem;
}

footer {
  background-color: #1f1e1e;
  color: #fff;
  text-align: center;
  font-size: smaller;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fffcf8;
}
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

/* Styling the scrollbar handle (thumb) */
::-webkit-scrollbar-thumb {
  background-color: #fabc6a; /* Color of the scrollbar handle */
  border-radius: 5px; /* Rounded corners for the handle */
}

/* Styling the scrollbar track on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #ffa734; /* Color of the scrollbar handle on hover */
}

/* Styling the scrollbar track when being dragged */
::-webkit-scrollbar-thumb:active {
  background-color: #ff9100; /* Color of the scrollbar handle when being dragged */
}

header {
  background-color: #f5f5f5d3; /* Off-white color - adjust the shade as desired */
  color: #333; /* Text color for the header */
  padding: 1rem;
  box-shadow: 0 3px 5px rgba(88, 54, 8, 0.1);
}

header h1 {
  margin: 0;
  font-size: 2rem;
}
nav {
  height: fit-content;
  text-align: right;
  padding: 10px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-left: 1rem;
  margin-top: 0rem;
}

nav ul li a {
  color: #020202f1;
  text-decoration: none;
  transition: cubic-bezier(1, 0, 0, 1) 0.15s;
  padding: 0px;
}

nav ul li a:hover {
  color: #ff8000;
}

#name {
  color: rgb(214, 162, 93);
  font-size: auto;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  float: left;
}

#intro {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.short-intro {
  margin-right: 15px; /* Add some space between the description and the profile picture */

  text-align: center;
}

.profile-picture {
  max-width: 450px; /* Set the maximum width for the profile picture */
}

.profile-picture img {
  display: block;
  width: 300%;
  border-radius: 5%; /* Apply a circular shape to the profile picture */

  margin-left: 1px;

  box-shadow: 0 8px 10px rgba(77, 41, 1, 0.3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; /* Set the font weight to normal (non-bold) */
}

.whitespace-before {
  padding-left: 150px; /* Adjust the value as needed to add the desired whitespace before the <br> element */
  /* or */
  /* margin-top: 20px; */
}

.social-links {
  display: flex;
  justify-content: center; /* To center the elements horizontally */
  align-items: center; /* To center the elements vertically */
}

.social-links a {
  margin: 0 15px; /* Add some spacing between the elements */
}

.social-links i {
  font-size: 30px; /* Adjust the icon size as needed */
  color: rgb(214, 162, 93);
  transition: transform 0.3s;
}
.social-links a:hover i {
  transform: scale(1.1); /* Increase the scale on hover to 1.2 (20% larger) */
}
#about {
  margin-top: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__header {
  display: flex;
  justify-content: left;
  font-size: large;
  text-align: left;
}
.education__header {
  display: flex;
  justify-content: left;
  font-size: large;
  text-align: left;
}

.about__description {
  display: flex;
  flex-direction: column;
  justify-content: left;
  max-width: 600px;
}
.contact__description {
  display: flex;
  flex-direction: column;
  justify-content: left;
  max-width: 660px;
}

#large-text {
  font-size: 30px;

  text-align: center;
}

#gem {
  float: left;
  color: rgb(214, 162, 93);
}

@media screen and (max-width: 500px) {
  #intro {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
  nav {
    height: fit-content;
  }
  #large-text {
    font-size: 20px;
    margin-top: 0px;
    padding-top: 0%;
  }
  .tech-item img {
    width: 40px !important;
    height: auto;
    border-radius: 5%;
  }
  .profile-picture {
    max-width: 65%;
    margin-bottom: 0px;
    padding-bottom: 0%;
  }
  #about {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #short-intro {
    margin-top: 0px;
    padding-top: 0%;
  }
  .interest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 5px !important;
    max-width: 300px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .interest-image img {
    width: auto;

    border-radius: 10px;
    height: 120px !important;
  }
  .interest-heading {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .interest-text {
    text-align: center;
    margin-top: 10px;
  }

  .interest-text p {
    font-size: 13px !important;
    line-height: 1;
  }
  .project-card {
    display: flex;
    align-items: center;
    border-radius: 3px;
    margin-bottom: 20px;
  }
}

#Education {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#Work {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#Interests {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
#Contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#Projects {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 2px dotted #313130;
  }

  .logo {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .name {
    font-size: 20px;
    margin-right: 0; /* Remove the right margin on smaller devices */
    margin-bottom: 8px;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .description {
    font-size: 16px;
    max-width: none;
  }
}

.card {
  display: flex;
  align-items: center;
  border-radius: 3px;
  margin-bottom: 20px;
  border: 2px dotted orange; /* Adds a small dotted orange border */
  padding: 10px; /* Optional: Ensures content does not touch the border */
}

.logo {
  flex: 0 0 auto;

  margin-right: 30px;
}

.logo img {
  max-width: 100px; /* Set the maximum width to maintain aspect ratio */
  height: auto;
  border-radius: 5%;
}

.content {
  flex: 1;
}

.name {
  font-size: 24px;
}

.duration {
  font-size: 14px;
  color: #888;
  font-style: italic;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 8px;
}

.description {
  font-size: 20px;
  margin-bottom: 8px;
  max-width: 480px;
}

.work-description {
  font-size: 18px;
  max-width: 480px;
}

.gpa {
  font-size: 14px;
  color: #888;
  font-style: italic;
}
.see-more {
  margin-top: 20px;
}

#seeMoreLink {
  padding: 1px 2px;
  background-color: transparent;
  text-decoration: none;
  color: black;
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#githublink {
  background-color: transparent;
  text-decoration: none;
  color: black;
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
#githublink:hover {
  color: orange;
}

#seeMoreLink:hover {
  color: orange;
}

::selection {
  background-color: rgb(
    247,
    213,
    169
  ); /* Optional: change the text color inside the selection */
}

#tech-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.tech_stack__header {
  display: flex;
  justify-content: left;
  font-size: large;
  text-align: left;
}

.tech-item {
  padding: 16px;
  transition: transform 0.3s;
}
.items-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
}
.tech-item img {
  width: 90px;
  height: auto;
  border-radius: 5%;
}

.tech-name {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(245, 176, 72, 0.8);
  color: #000000;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  white-space: pre;
}

.tech-item:hover {
  transform: scale(1.1);
}

.tech-item:hover .tech-name {
  opacity: 1;
}

.interest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 30px;
  max-width: 600px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.interest-image img {
  width: auto;
  object-fit: cover;
  border-radius: 10px;
  height: 300px;
}
.interest-heading {
  font-size: 18px;
  margin-bottom: 10px;
}

.interest-text {
  text-align: center;
  margin-top: 10px;
}

.interest-text p {
  font-size: 16px;
  line-height: 1.5;
}

.interests-toggle {
  background-color: transparent;
  text-decoration: none;
  color: black;
  border-bottom: #ff8000 2px dotted;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.interests-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}
.interests-content.show {
  max-height: 3000px;
}

.interests-toggle:hover {
  color: orange;
}

/* Style for the back button container */
/* Style for the back button container */
.back-button {
  display: inline-flex;
  align-items: left;
  border: none;
  color: #ffffff;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  font-family: inherit; /* Use the same font as the page */
}
.back-button:hover {
  color: #ffa850;
}
.confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.confetti-particle {
  position: absolute;
  width: 10px;
  height: 20px;
  border-radius: 50%;
  animation: confetti-fall 5s ease-out;
}

/* Keyframes for the confetti animation */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}
.theme-switch input[type="checkbox"] {
  display: none;
}

/* Style the slider */
.theme-switch .slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
  background-color: #ffd08a;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Style the slider's thumb (the circle) */
.theme-switch .slider:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

/* Style the slider when checked (for dark theme) */
.theme-switch input[type="checkbox"]:checked + .slider {
  background-color: #040018;
}

/* Move the thumb to the right when checked */
.theme-switch input[type="checkbox"]:checked + .slider:before {
  transform: translateX(20px);
}