@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/* CSS Variables */
:root {
  --wrappers-mg: 8rem 17.5%;

  --dark-bg: #141219;
  --gradient-color-1: #7286ff;
  --gradient-color-2: #fe7587;
  --main-color: #d220ff;
  --main-color-transparent: #d220ff0d;

  --second-main: #b9aee0;
  --third-main: #8f89a5;

  --bg-card: #25202bab;
  --bg-card-drk: #141219e6;
  --bg-card-drk-hid: #14121949;
  --bg-card-drk-snd: #06060792;

  --hover-button: #2d1d34;
  --footer-color: #1b1724;
  --footer-text: #d8d3ff;
  --divider: #ffffff4d;

  --dropdown-list-color: #2d1d34;
  --dropdown-text-hover: #d8d3ff;
  --dropdown-hover-color: #d8d3ff;
  --dropdown-border: #ffff1a;
  --dropdown-text-hover-bg: #70658366;
  --nav-dropdown-link-icon-bg: #2d1d34;
  --gradient-text: #7186ff;
  --get-started-cta-color: #d220ff;
  --form-placeholder-bg-color: #2720591a;
  --tabs-dropdown: #2720591a;
}

:focus {
  outline: none;
}

::selection {
  background: #7287ff80;
  color: white;
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1a1221 inset !important;
  -webkit-text-fill-color: #fff !important;
  color: white !important;
  caret-color: white !important;
}

/* Global Resets and Fonts */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--second-color) var(--main-color);
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: white;
  background: var(--dark-bg);
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

p { 
  margin: 0;
}

/* Scrollbar Styles */
/*
  --gradient-color-1: hsl(195, 100%, 50%);
  --gradient-color-2: hsl(25, 100%, 50%);
  --hover-button-cta-main: hsl(195, 100%, 5%);

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--second-color);
}
::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: white;
} */

/* Loading Styles */

.loading {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Main Layout Style */
main {
  min-height: 100vh;
  overflow-y: hidden;
  background: url('../images/bulba.png'); /* linear-gradient(hsla(257, 16%, 8%, 0.5), hsla(257, 16%, 8%, 0.5)),  */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

.main-wrapper {
  padding: var(--wrappers-mg);
}

/* Other Styles */
.text-gradient {
  background: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}