.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin: auto;
  width: 50%;
}

.buttons-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 48px;
  text-align: center;
}

.button-container {
  margin: 10px;
}

.button-1 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: white;
}  .button-1:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-2 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 4px solid black;
  padding: 10px;
  color: #202223;
  background: white;
}

.button-3 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: red;
  cursor: pointer;
} .button-3:hover {
  background-color: rgb(0, 0, 0);
} .button-3:active {
  background-color: green;
}

.button-4 {
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 8px;
  padding: 14px 24px;
  border: none;
  background: linear-gradient(to right, rgb(230, 30, 77) 0%, rgb(227, 28, 95) 50%, rgb(215, 4, 102) 100%);
  color: #fff;
}

.button-5 {
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100% );
  box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px rgb(58 65 111 / 50%);
  padding: 10px;
  border-radius: 4px;
}

.button-6 {
  display: block;
  width: 100%;
  border: none;
  background-color: #04AA6D;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.button-7 {
  text-align: center;
  padding: 12px 40px;
  font-size: 16px;
  color: black;
  background-color: yellow;
  border-radius: 5px;
  box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  outline: none;
}

.button-8 {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: blue;
  border: 4px solid #008bfd;
  cursor: pointer;
} .button-8:hover {
  background-color: rgb(108, 108, 243);
} .button-8:active {
  background-color: rgb(183, 183, 231);
}

.button-10 {
  display: inline-block;
  padding: 4px;
  border-radius: 24px;
  background-color: rgb(0, 255, 0);
  border: 4px solid #008bfd;
  cursor: pointer;
} .button-10:hover {
  background-color: rgb(108, 108, 243);
  padding: 10px;
} .button-10:active {
  background-color: rgb(183, 183, 231);
  width: 12px;
  font-size: 0;
}

.button-11 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(255, 0, 0);
}  .button-11:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-12 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(255, 102, 0);
}  .button-12:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-13 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(255, 208, 0);
}  .button-13:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-14 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(200, 255, 0);
}  .button-14:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-15 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(0, 255, 179);
}  .button-15:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-16 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(0, 255, 242);
}  .button-16:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-17 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(0, 119, 255);
}  .button-17:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-18 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(132, 0, 255);
}  .button-18:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-19 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #008bfd;
  padding: 10px;
  color: #202223;
  background: rgb(255, 0, 212);
}  .button-19:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}

.button-20 {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #fd0069;
  padding: 10px;
  color: #202223;
  background: rgb(255, 0, 0);
}  .button-20:hover {
  color: red;
  background: #4d4d4d;
  outline: 1px solid transparent;
}