@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&display=swap");
:root {
  --background-color-00: #000000;
  --background-color-25: #202224;
  --background-color-50: #333333;
  --background-color-100: #e9e9e9;
  --background-color-200: #ffffff;
  --grayscale-00: #fdfeff;
  --grayscale-50: #e5e8ec;
  --grayscale-100: #c4c4c4;
  --grayscale-150: #8a9299;
  --grayscale-200: #5f6368;
  --grayscale-250: #343a3a;
  --grayscale-300: #000000;
  --brading-primary-50: #e1dcd0;
  --brading-primary-100: #bca677;
  --brading-primary-150: #a08f71;
  --brading-primary-100-transparent: rgba(188, 166, 119, 0.15);
  --brading-primary-200: #515050;
  --feedback-success-00: rgba(37, 205, 124, 0.2);
  --feedback-success-50: #56e09d;
  --feedback-success-100: #1b995d;
  --feedback-error-00: rgba(233, 70, 107, 0.1607843137);
  --feedback-error-50: #ff99b0;
  --feedback-error-100: #df4264;
}

* {
  box-sizing: border-box;
}

body {
  padding: unset;
  border: unset;
  margin: unset;
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: var(--grayscale-00);
  background-color: var(--background-color-00) !important;
  overflow-x: hidden;
}

::selection {
  background: rgba(188, 166, 119, 0.5);
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background-color: var(--grayscale-250);
}

::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-200);
}

.outline-button {
  cursor: pointer;
  user-select: none;
  outline: unset;
  height: 40px;
  width: auto;
  padding: 0 60px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid var(--brading-primary-100);
  color: var(--brading-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  transition: all ease 0.3s;
}
.outline-button:hover {
  background-color: var(--brading-primary-100-transparent);
}

.solid-button {
  cursor: pointer;
  user-select: none;
  outline: unset;
  border: unset;
  height: 40px;
  min-width: 165px;
  width: auto;
  padding: 0 60px;
  border-radius: 4px;
  background-color: var(--brading-primary-100);
  color: var(--grayscale-00);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  transition: all ease 0.3s;
}
.solid-button:hover {
  background-color: var(--brading-primary-150);
}
.solid-button:disabled {
  cursor: auto;
  opacity: 0.8;
  background-color: var(--grayscale-100);
}

@media screen and (max-width: 640px) {
  .outline-button {
    padding: 0 16px;
  }
  .solid-button {
    padding: 0 16px;
  }
}