:root {
  --lovelish: hsl(0, 0%, 18%);
  --handshake: hsl(40, 100%, 66%);
  --btn2: hsl(242, 43%, 65%);
  --btn3: hsl(160, 86%, 63%);
}

.main-box {
  height: 0vh;
  display: flex;
  margin: auto;
}

.button20-box {
  height: 50px;
  max-width: 150px;
  align-items: center;
  justify-content: center;
  margin: auto;
  display: grid;
}

/* Button 1 */
.button20 {
  height: 50px;
  width: 260px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  background-image: linear-gradient(
    to right,
    #ff9999,
    #ff8080,
    #ff6666,
    #ff3333,
    #ff1a1a,
    #ff0000,
    #e60000,
    #cc0000,
    #b30000,
    #990000,
    #800000,
    #660000
  );
  color: white;
  animation: blurr 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

img1 {
  margin-top:0.5em ;
  margin-left: auto;
  transition: 0.5s;
  width: 2.0rem;
  height: 2.0rem;
}

@keyframes blurr20 {
  0%,
  50% {
    box-shadow: 0 0 10px var(--btn20);
  }

  50% {
    box-shadow: 0 0 36px var(--btn20);
  }
}

@keyframes fade {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}

.title {
  color: white;
  font-weight: bold;
  margin-top: 0.3rem;
  margin-left: 2rem;
  transition: 0.5s;
  font-size: 0.8rem;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.button20:hover .title {
  transform: translateX(-50px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button20:hover img {
  transform: translateX(-190px);
}

.description {
  color:white;
  position: absolute;
  margin-top: 0.5rem;
  font-weight: bold;
  line-height: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  transition: 0.5s;
  opacity: 0%;
  margin-left: 1.1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.button20:hover .description {
  transform: translateX(80px);
  opacity: 100%;
}

/* Button 2 */
.button2 {
   height: 50px;
  width: 260px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;

  background-image: linear-gradient(
    to right top,
    #8c8c8c,
    #808080,
    #737373,
    #666666,
    #595959,
    #4d4d4d,
    #404040,
    #333333,
    #262626,
    #1a1a1a,
    #0d0d0d,
    #000000
  );
  color: white;
  animation: blurr2 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button2:hover .title {
  transform: translateX(-50px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button2:hover img {
  transform: translateX(-190px);
}

.button2:hover .description {
  transform: translateX(80px);
  opacity: 100%;
}

@keyframes blurr2 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn2);
  }

  50% {
    box-shadow: 0 0 36px var(--btn2);
  }
}

/* Button 3 */
.button3 {
  height: 50px;
  width: 260px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  

  background-image: linear-gradient(
    to right top,
    #800000,
    #990000,
    #b30000,
    #cc0000,
    #e60000,
    #ff0000,
    #ff1a1a,
    #ff3333,
    #ff4d4d,
    #ff6666,
    #ff8080,
    #ff9999
  );
  animation: blurr3 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button3:hover .title {
  transform: translateX(-50px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button3:hover img {
  transform: translateX(-190px);
}

.button3:hover .description {
  transform: translateX(80px);
  opacity: 100%;
}

@keyframes blurr3 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn3);
  }

  50% {
    box-shadow: 0 0 36px var(--btn3);
  }
}

/* Button 4 */
.button4 {
  height: 50px;
  width: 260px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;

  background-image: linear-gradient(
    to right top,
    #ffb4be,
    #ffb5b6,
    #ffb7ad,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #ffc492,
    #ffc88d,
    #ffcd87,
    #ffd281,
    #ffd77b,
    #ffdd76
  );
  animation: blurr4 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button4:hover .title {
  transform: translateX(-50px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button4:hover img {
  transform: translateX(-190px);
}

.button4:hover .description {
  transform: translateX(80px);
  opacity: 100%;
}

@keyframes blurr4 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn4);
  }

  50% {
    box-shadow: 0 0 36px var(--btn4);
  }
}

/* Button 5 */
.button5 {
  height: 50px;
  width: 260px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;

  background-image: linear-gradient(
    to right top,
    #000000,
    #0d0d0d,
    #1a1a1a,
    #262626,
    #333333,
    #404040,
    #595959,
    #666666,
    #737373,
    #808080,
    #8c8c8c,
    #999999
  );
  animation: blurr5 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button5:hover .title {
  transform: translateX(-50px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button5:hover img {
  transform: translateX(-190px);
}

.button5:hover .description {
  transform: translateX(80px);
  opacity: 100%;
}

@keyframes blurr5 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn5);
  }

  50% {
    box-shadow: 0 0 36px var(--btn5);
  }
}

/* Button 6 */
.button6 {
 height: 50px;
  width: 300px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;

  background-image: linear-gradient(
    to right top,
    #ffb4be,
    #ffb5b6,
    #ffb7ad,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #ffc492,
    #ffc88d,
    #ffcd87,
    #ffd281,
    #ffd77b,
    #ffdd76
  );
  animation: blurr3 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button6:hover .title {
  transform: translateX(-100px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button6:hover img {
  transform: translateX(-240px);
}

.button6:hover .description {
  transform: translateX(50px);
  opacity: 100%;
}

@keyframes blurr6 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn6);
  }

  50% {
    box-shadow: 0 0 36px var(--btn6);
  }
}

/* Button 7 */
.button7 {
 height: 50px;
  width: 300px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;

  background-image: linear-gradient(
    to right top,
    #ffb4be,
    #ffb5b6,
    #ffb7ad,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #ffc492,
    #ffc88d,
    #ffcd87,
    #ffd281,
    #ffd77b,
    #ffdd76
  );
  animation: blurr7 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button7:hover .title {
  transform: translateX(-100px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button7:hover img {
  transform: translateX(-240px);
}

.button7:hover .description {
  transform: translateX(50px);
  opacity: 100%;
}

@keyframes blurr7 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn7);
  }

  50% {
    box-shadow: 0 0 36px var(--btn7);
  }
}

/* Button 10 */
.button10 {
 height: 50px;
  width: 300px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;

  background-image: linear-gradient(
    to right top,
    #ffb4be,
    #ffb5b6,
    #ffb7ad,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #ffc492,
    #ffc88d,
    #ffcd87,
    #ffd281,
    #ffd77b,
    #ffdd76
  );
  animation: blurr10 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button10:hover .title {
  transform: translateX(-100px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button10:hover img {
  transform: translateX(-240px);
}

.button10:hover .description {
  transform: translateX(50px);
  opacity: 100%;
}

@keyframes blurr10 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn10);
  }

  50% {
    box-shadow: 0 0 36px var(--btn10);
  }
}

/* Button 8 */
.button8 {
 height: 50px;
  width: 300px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;

  background-image: linear-gradient(
    to right top,
    #ffb4be,
    #ffb5b6,
    #ffb7ad,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #ffc492,
    #ffc88d,
    #ffcd87,
    #ffd281,
    #ffd77b,
    #ffdd76
  );
  animation: blurr8 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button8:hover .title {
  transform: translateX(-100px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button8:hover img {
  transform: translateX(-240px);
}

.button8:hover .description {
  transform: translateX(50px);
  opacity: 100%;
}

@keyframes blurr8 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn8);
  }

  50% {
    box-shadow: 0 0 36px var(--btn8);
  }
}

/* Button 4 */
.button4 {
 height: 50px;
  width: 300px;
  display: flex;
  border-radius: 2.5rem;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;

  background-image: linear-gradient(
    to right top,
    #00FF00,
    #0000FF,
    #808080,
    #ffbaa5,
    #ffbd9e,
    #ffc098,
    #808080,
    #ffc88d,
    #FF00FF,
    #ffd281,
    #FF00FF,
    #ffdd76
  );
  animation: blurr4 2s;
  animation-iteration-count: infinite;
  outline: none;
  cursor: pointer;
  border: none;
}

.button4:hover .title {
  transform: translateX(-100px);
  animation: fade 0.5s;
  opacity: 0%;
}

.button4:hover img {
  transform: translateX(-240px);
}

.button9:hover .description {
  transform: translateX(50px);
  opacity: 100%;
}

@keyframes blurr4 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn4);
  }

  50% {
    box-shadow: 0 0 36px var(--btn4);
  }
}



.watermark {
  text-align: center;
  color: white;
}

.watermark a {
  color: #8081cf;
}



tr:nth-child(even){background-color: #f2f2f2}



/* progress bar program */