.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color2);
  cursor: pointer;
  transition: 0.3s;
}

.button-primary {
  background-color: var(--accent-color);
}

.button-primary:hover {
  background-color: var(--black);
}

.button-dark {
  background-color: var(--black);
}

.button-dark:hover {
  background-color: var(--accent-color);
}

.button-dark-transparent {
  background-color: transparent;
  border:1px solid var(--black);
  color: var(--black);
}

.button-dark-transparent:hover {
  background-color: var(--black);
  color :#fff;
}

.button-white {
  color: var(--black);
  background-color: #fff;
}

.button-white:hover {
  background-color: #ffc6ce;
}

.button-transparent {
  background-color: transparent;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  cursor: pointer;
}

.button-transparent:hover {
  background-color: #f5efe6;
}

.button-dark-transparent {
  color: #000;
  border: 1px solid #000;
}

.button-underline {
	color:#000;
	background-color:transparent;
	position:relative;
}

.button-underline::after{
	content:"";
	height:1px;
	width:0;
	transition:0.3s;
	background-color:var(--accent-color);
	left:0;
	bottom:-3px;
	position:absolute;
}

.button-underline:hover{
	color:var(--accent-color);
}

.button-underline:hover::after{
	width:100%;
}