:root {
  --color-primary: #00252b;
  --color-border: #00363e;
  --yellow-color: #ffd833;
  --color-secondary: #f05376;
  --text-color: #bbced1;
  --contact-number: "087 365 0651";
  --background: #34a853;
  --color-surface-primary: #00252b;
  --color-on-surface-primary: #bbced1;
  --color-danger: #f05376;
  --border-radius: 0.75rem;
  --logo: url('https://content.luckyfish.co.za/luckyfish_logo_cfa9e18530.svg');
  --background-portrait: url('/images/luckyfish/luckyfish-bg.webp');
  --background-landscape: url('/images/luckyfish/lucky-fish-background.webp');
}

a {
  --tw-text-opacity: 1;
  color: rgb(255 216 51 / var(--tw-text-opacity));
}

.disclaimer-section a {
  --tw-text-opacity: 1;
  color: rgb(187 206 209 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

#resendlink {
  --tw-text-opacity: 1;
  color: rgb(255 216 51 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

input, select {
  --tw-border-opacity: 1;
  border-color: rgb(0 54 62 / var(--tw-border-opacity));
}

input:hover, select:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 216 51 / var(--tw-border-opacity));
}

input, select {
  --tw-bg-opacity: 1;
  background-color: rgb(0 37 43 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.title-font {
  color: var(--color-on-surface-primary);
}

.header {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.header-logo {
  width: 100%;
  margin-bottom: 1rem;
}

.wrapper {
  border-radius: 0.75rem;
}

.modal-container {
  padding: 0.5rem;
}

.option-button {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.option-button:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 216 51 / var(--tw-border-opacity));
}

.option-button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.theme-button,
.option-button.active,
.reset-options .option-button {
  --tw-border-opacity: 1;
  border-color: rgb(255 216 51 / var(--tw-border-opacity));
}

.theme-button:hover,
.option-button.active:hover,
.reset-options .option-button:hover {
  border-color: var(--color-danger);
}

.theme-button,
.option-button.active,
.reset-options .option-button {
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(255 216 51 / var(--tw-bg-opacity));
}

.theme-button:hover,
.option-button.active:hover,
.reset-options .option-button:hover {
  background-color: var(--color-danger);
}

.theme-button,
.option-button.active,
.reset-options .option-button {
  color: var(--color-primary);
}

.theme-button:hover,
.option-button.active:hover,
.reset-options .option-button:hover {
  color: var(--color-on-primary);
}

.theme-button,
.option-button.active,
.reset-options .option-button {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

#togglePassword {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.close-btn {
  fill: #fff;
}