@charset "utf-8";

/* =================================================
  button
================================================= */

a[class*="btn-"] {
  border-radius: 100px;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  min-width: 264px;
  display: grid;
  place-content: center;
  @media (hover: hover) {
    &:hover {
      transform: translateY(2px);
      text-decoration: none;
      opacity: 0.8;
    }
  }
  @media (max-width: 768px) {
    width: 90%;
    min-width: initial;
  }
}

a.button-small {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  min-width: initial;
  height: fit-content;
  @media (max-width: 768px) {
    padding: 10px 16px;
    font-size: 14px;
  }
}

.btn-primary {
  background-color: #fff232;
  color: #333333;
  @media (hover: hover) {
    &:hover {
      background-color: #fff784;
    }
  }
}

.btn-secondary {
  background-color: #009fed;
  color: #fff;
  @media (hover: hover) {
    &:hover {
      background-color: #0776bd;
    }
  }
}

.btn-outline {
  border: 1px solid #d6d8e0;
  background-color: #fff;
  color: #009fed;
  @media (hover: hover) {
    &:hover {
      opacity: 0.8;
    }
  }
}

.btn-tertiary {
  background-color: #EAF6FF;
  color: #009fed;
  @media (hover: hover) {
    &:hover {
      background-color: #B6E0FF;
    }
  }
}
/* =================================================
  flex
================================================= */
.cmn-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmn-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmn-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmn-column {
  flex-direction: column;
}
.cmn-row {
  flex-direction: row;
}

/* =================================================
  border
================================================= */
.cmn-bd-top {
  border-top: 1px solid #d6d8e0 !important;
}
.cmn-bd-bottom {
  border-bottom: 1px solid #d6d8e0 !important;
}
.cmn-bd-left {
  border-left: 1px solid #d6d8e0 !important;
}
.cmn-bd-right {
  border-right: 1px solid #d6d8e0 !important;
}

/* =================================================
  text
================================================= */
.cmn-text-center {
  text-align: center;
}
.cmn-text-left {
  text-align: left;
}
.cmn-text-right {
  text-align: right;
}