* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: #000;
  font-family: Arial, sans-serif;
}

.adjusted-image {
  width: 600px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}


#interactive h2{
  text-align: center; /* Align text to the left */
  max-width: 100%; /* Ensure it doesn't exceed the width of the logos */
  color: #fff;
}


#skills h1{
  max-width: 100%; /* Ensure it doesn't exceed the width of the logos */
  color: #000;
  text-align: left; /* Justify the text */
  font-size:3rem; /* Adjust the size as needed */
  align-items: flex-end; 
}


#skills h3{
  max-width: 100%; /* Ensure it doesn't exceed the width of the logos */
  color: #fff;
  text-align: right; /* Justify the text */
  font-size:6rem; /* Adjust the size as needed */
  align-items: flex-end; 
}

h3 {
  font-size: 1rem; /* Adjust the size as needed */
  text-align: justify; /* Justify the text */
  margin-bottom: 1rem; /* Adjust the spacing below the heading */
  margin-right: 3rem; /* Adjust the spacing below the heading */
  line-height: 1; /* Increase line height for better readability */
}

#home {
  display: flex;
  justify-content: space-between; /* Distribute space between the two columns */
  align-items: center; /* Center content vertically */
  height: 100vh; /* Full viewport height */
  background: rgba(255, 255, 255, 0.8);
  padding: 0 40px; /* Add padding to the left and right sides */
}

.home-left {
  flex: 1; /* Allow this column to take up available space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  gap: 20px; /* Add space between elements */
}


#typewriter-header {
  font-size: 4rem; /* Adjust the size as needed */
  font-weight: bold; /* Make the text bold */
  text-align: left; /* Align text to the left */
  color: #000; /* Ensure the text color is visible */
  max-width: 100%; /* Ensure it doesn't exceed the width of the logos */
}

#typewriter-achievements {
  font-family: "Circular Std", sans-serif;
  font-size: 8vw;
  font-weight: 450;
  letter-spacing: -0.05em;
  line-height: 115%;
  color: #fff;
  text-align: center;
  background: transparent;
}


#home h2 {
  text-align: left; /* Align text to the left */
  max-width: 100%; /* Ensure it doesn't exceed the width of the logos */
}

.home-logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align logos to the left */
  gap: 10px; /* Add space between rows of logos */
}

.logos {
  display: grid;
  grid-template-columns: repeat(8, auto); /* Use 'auto' for tighter fit */
  gap: 8px; /* Adjust the gap between items */
}

.logos img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: grayscale(50%) sepia(50%) hue-rotate(20deg) saturate(300%) brightness(100%);

}

.home-right {
  flex: 0 1 auto; /* Allow this column to take up only necessary space */
  display: flex;
  justify-content: flex-end; /* Align the image to the right */
  align-items: center; /* Center the image vertically */
}

.home-right img {
  max-width: 400%; /* Ensure the image does not exceed the container's width */
  height: auto;
  max-height: 400px; /* Limit the height of the image */
}

/* ABOUT SECTION */


#about {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000; /* Black background */
  color: #fff; /* White text color */
  padding: 20px; /* Add padding for spacing */
}

#abouttext{
  font-family: "Circular Std", sans-serif;
  font-size: 3vw;
  font-weight: 450;
  letter-spacing: -0.05em;
  line-height: 115%;
  color: #fff;
  text-align: end;
  background: transparent;
}

.timeline {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  color: white;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #f3f3f3;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.timeline-item::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  top: 15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9f55"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center center;
  background-size: contain;
}


.timeline-item.left::before {
  left: -17px;
}

.timeline-item.right::before {
  right: -17px;
}

.timeline-item.left {
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

.timeline-item-content {
  padding: 20px 30px;
  background-color: #ff9f55;
  position: relative;
  border-radius: 6px;
}

.timeline-item-content h4 {
  margin: 0 0 10px 0;
  color: white;
}

.timeline-item-content p {
  margin: 0;
  color: white;
}

.timeline-item-content span {
  position: absolute;
  bottom: -20px;
  right: 30px;
  font-size: 12px;
  color: #fff;
}

.timeline-item-content.left span {
  right: auto;
  left: 30px;
}

@media screen and (max-width: 600px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-item::before {
    left: 60px;
  }

  .timeline-item.left {
    left: 0%;
  }

  .timeline-item.right {
    left: 0%;
  }

  .timeline-item-content span {
    right: 20px;
  }
}


#interactive, #home, #about, #skills, #education { 
  height: 100vh; 
  position: relative; 
  z-index: 1; 
  background: transparent; 
}

#education { 
  height: 150 vh; 
  position: relative; 
  z-index: 1; 
  background: transparent; 
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: transparent;
}


#p5-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

#p5-canvas.drop-in {
  opacity: 1;
  transform: translateY(0);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

.navbar-left h1 {
  color: white;
}

.navbar-right {
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  background-color: #555;
}

.navbar-right a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px;
  overflow: hidden;
  transition: color 0.3s;
}

.navbar-right a:hover {
  animation: wobble 1s ease;
  color: white; /* Keep text white on hover */
}

.navbar-right a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: rgb(255, 255, 255);
  transition: width 0.3s;
}

.navbar-right a:hover::after {
  width: 100%;
}

section {
  padding: 2rem;
  margin: 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

#home {
  background: rgba(255, 255, 255, 0.8);
}

#about, #skills {
  background: rgba(190, 171, 171, 0.8);
}


footer {
  text-align: center;
  padding: 1rem;
  background-color: #333;
  color: white;
  position: relative;
  z-index: 2;
}

.item {
  position: absolute;
  padding: 0.5em 0.5em 4em 0.5em;
  width: 200px;
  height: 225px;
  overflow: hidden;
  background: #a47861;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@keyframes wobble {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
/* Slider specific styles */



.slider {
  margin-top: -60px; /* Move the slider up by 20px */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-wrapper {
  margin-top: -60px; /* Move the slider up by 20px */
  width: max-content;
  padding: 0 150px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 100px;
}

.slide {
  position: relative;
  width: 500px;
  height: 500px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.active-slide {
  position: absolute;
  top: 200px;
  left: 40px;
  font-size: 50px;
}

.slide-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.slide-text h2 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.slide-text p {
  margin: 0;
  font-size: 1rem;
}

.slide:hover .slide-text {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slide .slide-text {
  opacity: 1;
  transition: opacity 0.4s ease;
}



/* Add styles for horizontal scrolling */
.scroll {
  cursor: grab;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.scroll:active {
  cursor: grabbing;
}

/* POLAROID */


figure {
  width: 200px; /* Adjust the width of the polaroid */
  height: 240px; /* Adjust the height of the polaroid */
  position: absolute;
  background-color: #eaeaea;
  padding: 10px 10px 50px 10px; /* Adjust padding */
  margin: 0;
  z-index: 1;
  transform: rotate(var(--rotation));
  top: var(--top);
  left: var(--left);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

figure img {
  width: 100%;  /* Make the image fill the width of the container */
  height: 100%; /* Make the image fill the height of the container */
  object-fit: cover; /* Cover the container while preserving aspect ratio */
  border-radius: 5px; /* Optional: Add slight border radius for effect */
}

figcaption {
  font-family: 'Caveat', cursive;
  font-size: 18px; /* Adjusted font size */
  text-align: center;
  color: #2c2c2c;
  margin-top: 10px; /* Adjusted margin */
  line-height: 1; /* Adjusted line height */
}

/* tapes*/
figure:before,
figure:after {
  content: "";
  position: absolute;
  height: 30px; /* Adjusted height */
  width: 100px; /* Adjusted width */
  background-color: rgba(102, 102, 102, 0.6);
  transform: rotate(-40deg);
}

figure:before {
  top: 3px;
  left: -30px; /* Adjusted position */
}

figure:after {
  bottom: 3px;
  right: -35px; /* Adjusted position */
}

/* --- */

.polaroid-container {
  position: relative;
  width: 100%;
  height: 400px; /* Adjust the height as needed */
  display: flex;
  justify-content: center; /* Center the polaroid container horizontally */
  align-items: center; /* Center the polaroid container vertically */
  margin: 0 auto; /* Center the container in the middle of the page */
}

.polaroid-container figure {
  position: absolute;
  transform: rotate(var(--rotation));
  top: var(--top);
  left: calc(50% + var(--left)); /* Position relative to the center of the container */
  margin-left: -100px; /* Adjust to center the figure's width */
}

/* CONTACT */
 
#education {
  background: rgba(255, 255, 255, 0.8);
  padding: 50px 20px; /* Add padding to make the section longer */
  position: relative;
  z-index: 1;
}

#education h3 {
  display: inline-block; /* Ensures the background only covers the text */
  background-color: white; /* Sets the background color to white */
  padding: 5px 10px; /* Adds padding around the text */
  border-radius: 5px; /* Optional: Adds rounded corners */
  color: black; /* Sets the text color, adjust as needed */
  font-weight: bold; /* Makes the text bold */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a slight shadow */
  text-align: center; /* Centers the text within the element */
  margin: 0 auto; /* Centers the element itself horizontally */
  margin-bottom: 50px; /* Add margin to space out the text and the contacts section */
}

.contacts-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  position: relative;
}

.contact-item {
  width: 100px;
  height: 100px;
  cursor: pointer;
  transition: transform 0.3s;
}

.contact-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.5s;
  z-index: -1;
}

.bg-color-red {
  background-color: rgba(83, 78, 78, 0.5); /* Semi-transparent red */
}

.bg-color-blue {
  background-color: rgba(228, 61, 244, 0.5); /* Semi-transparent blue */
}

.bg-color-green {
  background-color: rgba(0, 8, 255, 0.5); /* Semi-transparent green */
}