/* Specific classes */
.h1-size {
  font-size: var(--h1-size);
}
.h2-size {
  font-size: var(--h2-size);
}
.h3-size {
  font-size: var(--h3-size);
}
.h4-size {
  font-size: var(--h4-size);
}
.h5-size {
  font-size: var(--h5-size);
}
.h6-size {
  font-size: var(--h6-size);
}
/* Generic classes */
.big-text {
  font-size: var(--text-4);
}
.pretitle {
  font-size: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
}
.note {
  font-size: var(--text-2);
}
.small {
  font-size: var(--text-1);
}

/* GLASSY ELEMENTS */
.glassy-box {
  border: 1px solid rgba(255, 255, 255, 0.60);
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.60) 100%);
  /* box-shadow: 0px 5px 20px 0px rgba(185, 179, 204, 0.30); */
  backdrop-filter: blur(10px);
}
.glassy-light {
  border: 1px solid rgba(255, 255, 255, 0.60);
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.10) 100%);
  /* box-shadow: 0px 5px 20px 0px rgba(185, 179, 204, 0.30); */
  backdrop-filter: blur(10px);
}
.glassy-dark {
  border: 1px solid rgba(255, 255, 255, 0.40);
  background: linear-gradient(180deg, rgba(32, 26, 50, 0.80) 0%, rgba(32, 26, 50, 0.80) 100%);
  /* box-shadow: 0px 5px 20px 0px rgba(185, 179, 204, 0.30); */
  backdrop-filter: blur(10px);
}
.transparent-light {
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.60) 100%);
  backdrop-filter: blur(10px);
}
.transparent-dark {
  background: linear-gradient(180deg, rgba(32, 26, 50, 0.95) 0%, rgba(32, 26, 50, 0.95) 100%);
  backdrop-filter: blur(10px);		
}
/* New blurry box styles */
.blurry-dark,
.blurry-dark-shadow {
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: solid 1px #FFFFFF30;
  backdrop-filter: blur(40px);
}
.blurry-light,
.blurry-light-shadow{
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: solid 1px #FFFFFF;
  backdrop-filter: blur(40px);
}
.blurry-dark-shadow,
.blurry-light-shadow {
  box-shadow: 0 5px 20px 0 #B9B3CC55;
}

/* BUTTONS */
:root {
  --button-text-color: var(--white);
  --button-fill-color: var(--purple-main);
  --button-border-color: var(--purple-main);
}
.brxe-button {
  transition: transform .2s ease-out;
  border-radius: 100vw;
  cursor: pointer;
  transform: translateY(0);
}
.brxe-button:hover {
  transform: translateY(-2px);
}
/* BASE - Fill / Stroke */
.button-filled,
.button-outlined {
  background-color: var(--button-fill-color) !important;
  border: solid 1px var(--button-border-color) !important;
  color: var(--button-text-color) !important;
}
/* Color */
/* Filled purple */
.button-filled.button-purple,
.button-filled.button-purple:hover {
  --button-text-color: var(--white);
  --button-fill-color: var(--purple-main);
  --button-border-color: var(--purple-main);
}
/* Filled white */
.button-filled.button-white,
.button-filled.button-white:hover {
  --button-text-color: var(--grey500);
  --button-fill-color: var(--white);
  --button-border-color: var(--white);
}
/* Filled black */
.button-filled.button-black,
.button-filled.button-blackn:hover {
  --button-text-color: var(--white);
  --button-fill-color: var(--grey-500);
  --button-border-color: var(--grey-500);
}
/* Outlined purple */
.button-outlined.button-purple,
.button-outlined.button-purple:hover {
  --button-text-color: var(--purple-main);
  --button-fill-color: transparent;
  --button-border-color: var(--purple-main);
}
/* Outlined white */
.button-outlined.button-white,
.button-outlined.button-white:hover {
  --button-text-color: var(--white);
  --button-fill-color: transparent;
  --button-border-color: var(--white);
}
/* Outlined purple */
.button-outlined.button-black,
.button-outlined.button-black:hover {
  --button-text-color: var(--grey-500);
  --button-fill-color: transparent;
  --button-border-color: var(--grey-500);
}
/* Size */
.button-tiny {
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 500;
}
.button-small {
  padding: 8px 18px !important;
  font-size: 14px !important;
}
.button-medium {
  padding: 11px 26px !important;
  font-size: 15px !important;
}
.button-large {
  padding: 12px 30px !important;
  font-size: 16px !important;
}
/* Shadows */
.button-shadow {
  box-shadow: 0px 2px 8px rgba(32, 26, 50, 0.3) !important;
}
.button-shadow-purple {
  box-shadow: 0px 2px 8px rgba(122, 82, 255, 0.3) !important;
}
.button-shadow-white {
  box-shadow: 0px 2px 8px rgba(255, 255, 255, 0.3) !important;
}



/* OTHER USEFUL CLASSES */
.text-gradient {
  background: linear-gradient(to left, var(--blue-main), var(--purple-main));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* SHADOWS (BOX AND TEXT) */
.shadow-box-dark-sm {
  box-shadow: 0 1px 3px rgba(89, 83, 105, 0.8);
}
.shadow-box-dark-md {
  box-shadow: 0 4px 6px -1px rgba(89, 83, 105, 0.8),
    0 2px 4px -2px rgba(89, 83, 105, 0.8);
}
.shadow-box-dark-lg {
  box-shadow: 0 10px 15px -3px rgba(89, 83, 105, 0.8),
    0 4px 6px -4px rgba(89, 83, 105, 0.8);
}
.shadow-box-light-sm {
  box-shadow: 0 1px 3px rgba(236, 235, 239, 0.8);
}
.shadow-box-light-md {
  box-shadow: 0 4px 6px rgba(236, 235, 239, 0.8);
}
.shadow-box-light-lg {
  box-shadow: 0 10px 15px rgba(236, 235, 239, 0.8);
}
.shadow-text-dark-sm {
  text-shadow: 0 1px 3px rgba(89, 83, 105, 0.8);
}
.shadow-text-dark-md {
  text-shadow: 0 2px 6px rgba(89, 83, 105, 0.8);
}
.shadow-text-dark-lg {
  text-shadow: 0 3px 10px rgba(89, 83, 105, 0.8);
}
.shadow-text-light-sm {
  text-shadow: 0 1px 3px rgba(236, 235, 239, 0.8);
}
.shadow-text-light-md {
  text-shadow: 0 2px 6px rgba(236, 235, 239, 0.8);
}
.shadow-text-light-lg {
  text-shadow: 0 3px 10px rgba(236, 235, 239, 0.8);
}
.shadow-box-purple-sm {
  box-shadow: 0 5px 6px 0 rgba(122, 82, 255, 0.30);
}
.shadow-box-purple-md {
  box-shadow: 0 5px 10px 0 rgba(122, 82, 255, 0.30);
}
.shadow-box-purple-lg {
  box-shadow: 0 5px 20px 0 rgba(122, 82, 255, 0.30);
}
.no-shadow {
  box-shadow: none !important;
}

.elevate-on-hover {
  transform: translateY(0);
  transition: transform .2s ease-out;
}
.elevate-on-hover:hover {
  transform: translateY(-2px);
}