* {
  color: #f2eeee;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 1.1rem;
  font-family: monospace;
  line-height: 2rem;
}

html {
  background-color: var(--background-color-2);
}

body {
  margin: 2rem 4rem;
}

.small-menu img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
:root {
  ---box-background-color: #bfc8d0;
  --primary-color: #f2eeee;
  --secondary-color: #c49102;
  --third-color: rgb(140, 171, 202);
  ---forth-color: #b0a7a7;
  ---color-mobile: #1a1b1c;
  --color-tertiary: #0d1013;
  --color-gray: #f6f6f6;
  --background-color-1: linear-gradient(145deg, #1e2024, #23272b);
  --background-color-2: #212428;
  --shadow-1: 10px 10px 19px #1c1e22, 10px 10px 19px #262a2e;
  --shadow-2: inset 21px 21px 19px #b5bfcf, inset -21px -21px 19px #222c3a;
  --inner-shadow: 5px 9px 10px -3px rgba(0, 0, 0, .9) inset;
    -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;
  --shadow-white-3: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
  --gradient-box-w: linear-gradient(145deg, #e2e8ec, #ffffff);
}
/*----------end of common styles----------*/
nav div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.small-menu i {
  display: none;
}
/*----------end of nav-parent ------*/

/*----------start of left nav ------*/
nav div div img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 1rem;
  cursor: pointer;
}
nav div div:first-child a {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}
/*----------end of left nav ------*/

/*----------start of right nav ------*/
.navbar ul {
  display: flex;
}
.navbar ul li {
  margin-left: 2.5rem;
}
.navbar ul li a span {
  text-transform: capitalize;
  cursor: pointer;
  font-family: serif;
  font-size: 1rem;
}
.navbar ul li a span:hover {
  color: var(--third-color);
}
.navbar ul li:first-child span {
  color: var(--secondary-color);
}
.navbar ul li:last-child span {
  color: var(--third-color);
}
.navbar ul li:last-child span:hover {
  color: var(--secondary-color);
}

/*----------------------end of navigation-------*/
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5rem 0;
}

.aside-features {
  display: flex;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2vh 0;
  margin-right: 2vw;
  padding: 1vw;
  font-weight: bold;
  color: #052f05;
  border-radius: 50%;
  border: none;
  width: 6vw;
  height: 6vw;
  cursor: pointer;
  font-size: 1.2vw;
  line-height: 1.2vw;
  border: 1px solid black;
  box-shadow:  10px 10px 19px #1c1e22, 10px 10px 5px #00080f;
  font-family: serif;
  background: radial-gradient(circle at 80% 90%, #5fd7bd, #c162d6 30%, #1569a1);
}

button:active {
  transform: scale(0.8); /* Scale down when clicked */
  background-color: #45a049; /* Change background on click */
}

button:hover {
  background-color: rgb(57, 57, 196); /* Scale up slightly when hovered */
}

.disabled {
  background-color: gray;
  box-shadow: var(--inner-shadow);
  opacity: 0.5;
  transform: none !important;
  cursor: not-allowed;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 900px;
  border: 10px solid rgb(70, 65, 65);
  box-shadow: var(--inner-shadow);
  background-color: rgb(80, 72, 72);
}


.first-span-box, .final-span-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin-bottom: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(53, 27, 27);
}

.final-span-box {
  margin-top: 10rem;
}

.shelf {
  background-color: #473020; /* Wood-like color */
  transform: perspective(500px) rotateX(20deg); /* Create the 3D tilt */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
  border-radius: 5px;
  width: 70vw;
  height: 1.2vw;
}
/*----------style for merge-sort ---*/

.merge-container {
  display: none;
}

#break-down-container {
  width: 85%;
  margin: 4rem 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
} 

#break-box, #break-shelf, .break-box {
  width: 40vw;
  display: flex;
}

#break-box, .break-box {
  height: 80px;
  margin-bottom: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(53, 27, 27);
}

.left-right-container {
  display: flex;
  margin-top: 60px;
}

#unsorted-box , #sorted-box {
  background-color: rgb(53, 27, 27);
  width: 70vw;
  height: 80px;
  margin-bottom: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#break-box:nth-child(1) {
  margin-top: 90px;
}

.left-div .shelf {
  width: 30vw;
  margin-right: 100px;
}

.right-div .shelf {
  width: 30vw;
}

#left-box, .left-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(53, 27, 27);
  width: 30vw;
  height: 80px;
  margin-bottom: -30px;
}

#right-box, .right-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(53, 27, 27);
  width: 30vw;
  height: 80px;
  margin-bottom: -30px;
}
.span {
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5vw;
  width: 2.5vw;
  margin: 0 5px;
  margin-bottom: 20px;
  color: black;
  padding: 1vw;
  transition: transform 1s ease-out;
  box-shadow: 10px 10px 19px #1c1e22, 10px 10px 10px #0f0f0f;
  background: radial-gradient(circle at 80% 90%, #5fd7bd, #c162d6 30%, #1569a1);
  font-size: 1.5vw;
  text-align: center;
}



/*----------style for merge-sort helper function ---*/

.combing {
  background: radial-gradient(circle at 80% 90%, #141515, #62d673 30%, #a11515);
}

@keyframes moveToBreak {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 200px); /* Adjust depending on the layout */
  }
} 

/*----------style for merge-sort helper function ---*/


/*----------style for merge-sort ---*/

footer {
  text-align: center;
}


span.sorted {
  border: 3px solid rgb(243, 242, 234);
  background: (circle at 80% 90%, #141515, #62d673 30%, #a11515);
  transform: translate(20px, 0px);
  animation: move-to-shelf 2s forwards ease-in-out; /* Move sorted spans to the second shelf */
}

/* Animate the comparison by moving spans up */
@keyframes compare {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-70px) scale(1.3);
  }
  100% {
    transform: translateY(0);
  }
}

/* Animate the swap horizontally */
@keyframes swap {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--distance));
  }
}

/* Animation for moving a span to the second shelf */
@keyframes move-to-shelf {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--shelf-x));
  }
}

/*--------bubble sort part --------*/
.compare {
  animation: compare 1s forwards;
  background-color: blue;
  color: white;
}

.swap {
  transform: translate(50px, -100px);
  animation: swap 1s forwards;
  background-color: red; /* Add horizontal shift for swap */
}



/*--------end of bubble sort part --------*/
/*--------quick sort part --------*/
.compare-q {
  transform: translateY(-70px) scale(1.2);
  background-color: blue;
  color: white;
  
}
.compare-q2 {
  transform: scale(1.2);
}

.swap-q {
  transform: scale(1.2);
  color: white;
  background-color: red; /* Highlight during swap */
  transition: transform 1s ease, background-color 1s ease;
 /* Enlarge slightly during swap */
}

.pivot {
  background-color: rgb(5, 67, 32); /* Highlight pivot with yellow */
  border: 2px solid orange;  /* Optional: add a border */
  transform: scale(1.4); 
  margin-bottom: 2.6rem;    /* Optional: slightly enlarge the pivot */
  transition: background-color 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

.sorted-q {
  background: radial-gradient(circle at 80% 90%, #141515, #62d673 30%, #a11515);
  transform: scale(1.2); /* Optional scaling for sorted elements */
}

.final-msg {
  margin-bottom: 4rem;
  font-size: 3.5vw;
  color: white;
  text-shadow: var(--shadow-1);
}

/*--------endof quick sort part -------*/


.info-container {
  border: 5px solid black;
  box-shadow: var(--inner-shadow);
  background-color: rgb(55, 49, 49);
  height: 900px;
  overflow-y: scroll;
  padding: 4rem;
}

.info-container img {
  width: 100%;
  margin: 2rem auto;
}

.info-container {
  margin: 2rem auto;
}

.info-container h1 {
  font-size: 2rem;
  color: green;
  padding-bottom: 2rem;
}
.info-container h2,
h3,
strong {
  padding: 2rem;
  font-size: 1.2rem;
}

.info-container h2 {
  color: green;
  font-size: 1.5rem;
}

.info-container p {
  text-align: justify;
}
hr {
  margin: 4rem auto;
}