:root {
  --primary: #8C16C3;
  --secondary: #67128F;
  --tertiary: #28262C;
  --accent: #3C3A3F;
  --accent-rbg: rgb(60, 58, 63);
  --accent-light: #D6D5D8;
  --accent-light-rgb: rgb(214, 213, 216);
  --accent-light-0-3: rgba(var(--accent-light-rgb), 0.3);
  --background: #FFFFFF;
  --background-rgb: rgb(255, 255, 255);
  --background-0-6: rgba(var(--background-rgb), 0.6);
  --background-0-3: rgba(var(--background-rgb), 0.3);
  --background-gray: #f1edf2;
  --black: #000000;
  --black-rgb: rgb(0, 0, 0);
  --black-0-5: rgba(var(--black-rgb), 0.5);
  --black-0-6: rgba(var(--black-rgb), 0.6);
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 36px;
  --spacing-xxl: 48px;
  --size-sm: 8px;
  --size-md: 16px;
  --size-lg: 24px;
  --size-xl: 36px;
  --size-xxl: 48px;
  --size-80: 80px;
  --font-size-25: 0.25rem;
  --font-size-50: 0.5rem;
  --font-size-75: 0.75rem;
  --font-size-100: 1rem;
  --font-size-125: 1.25rem;
  --font-size-150: 1.5rem;
  --font-size-175: 1.75rem;
  --font-size-200: 2rem;
  --font-size-225: 2.25rem;
  --font-size-250: 2.5rem;
  --font-size-275: 2.75rem;
  --font-size-300: 3rem;
  --font-size-325: 3.25rem;
  --font-size-350: 3.5rem;
  --font-size-375: 3.75rem;
  --font-size-400: 4rem;
  --font-size-425: 4.25rem;
  --font-size-450: 4.5rem;
  --font-size-475: 4.75rem;
  --font-size-500: 5rem;
  --font-size-525: 5.25rem;
  --font-size-550: 5.5rem;
  --font-size-575: 5.75rem;
  --font-size-600: 6rem;
  --font-size-625: 6.25rem;
  --font-size-650: 6.5rem;
  --font-size-675: 6.75rem;
  --font-size-700: 7rem;
  --font-size-725: 7.25rem;
  --font-size-750: 7.5rem;
  --font-size-775: 7.75rem;
  --font-size-800: 8rem;
  --font-size-825: 8.25rem;
  --font-size-850: 8.5rem;
  --font-size-875: 8.75rem;
  --font-size-900: 9rem;
  --font-size-925: 9.25rem;
  --font-size-950: 9.5rem;
  --font-size-975: 9.75rem;
  --bs-primary: #8C16C3;
  --bs-secondary: #67128F;
}

*{
  font-family:
    "Montserrat",
    sans-serif
}

body {
  margin: 0px;
  padding: 0px;
  background: var(--primary) url(../img/img01.jpg) repeat;
  color: var(--black);
}

/* Bootstrap overrides */
.btn-primary {
  background-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--secondary) !important;
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--background);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary); 
}

/* Color classes */
.color-primary{
  color: var(--primary);
}

.color-secondary{
  color: var(--secondary);
}

.color-tertiary{
  color: var(--tertiary);
}

.color-accent{
  color: var(--accent);
}

.color-accent-light{
  color: var(--accent-light);
}

.color-background{
  color: var(--background);
}

.color-black-0-6 {
  color: var(--black-0-6);
}

/* Background classes */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-gray {
  background-color: var(--background-gray);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-accent-light {
  background-color: var(--accent-light);
}

.bg-accent-light-0-3 {
  background-color: var(--accent-light);
}

/* Sizes classes */
.size-25 {
  font-size: var(--font-size-25);
}

.size-50 {
  font-size: var(--font-size-50);
}

.size-75 {
  font-size: var(--font-size-75);
}

.size-100 {
  font-size: var(--font-size-100);
}

.size-125 {
  font-size: var(--font-size-125);
}

.size-150 {
  font-size: var(--font-size-150);
}

.size-175 {
  font-size: var(--font-size-175);
}

.size-200 {
  font-size: var(--font-size-200);
}

.size-225 {
  font-size: var(--font-size-225);
}

.size-250 {
  font-size: var(--font-size-250);
}

.size-275 {
  font-size: var(--font-size-275);
}

.size-300 {
  font-size: var(--font-size-300);
}

.size-325 {
  font-size: var(--font-size-325);
}

.size-350 {
  font-size: var(--font-size-350);
}

.size-375 {
  font-size: var(--font-size-375);
}

.size-400 {
  font-size: var(--font-size-400);
}

.size-425 {
  font-size: var(--font-size-425);
}

.size-450 {
  font-size: var(--font-size-450);
}

.size-475 {
  font-size: var(--font-size-475);
}

.size-500 {
  font-size: var(--font-size-500);
}

.size-525 {
  font-size: var(--font-size-525);
}

.size-550 {
  font-size: var(--font-size-550);
}

.size-575 {
  font-size: var(--font-size-575);
}

.size-600 {
  font-size: var(--font-size-600);
}

.size-625 {
  font-size: var(--font-size-625);
}

.size-650 {
  font-size: var(--font-size-650);
}

.size-675 {
  font-size: var(--font-size-675);
}

.size-700 {
  font-size: var(--font-size-700);
}

.size-725 {
  font-size: var(--font-size-725);
}

.size-750 {
  font-size: var(--font-size-750);
}

.size-775 {
  font-size: var(--font-size-775);
}

.size-800 {
  font-size: var(--font-size-800);
}

.size-825 {
  font-size: var(--font-size-825);
}

.size-850 {
  font-size: var(--font-size-850);
}

.size-875 {
  font-size: var(--font-size-875);
}

.size-900 {
  font-size: var(--font-size-900);
}

.size-925 {
  font-size: var(--font-size-925);
}

.size-950 {
  font-size: var(--font-size-950);
}

.size-975 {
  font-size: var(--font-size-975);
}

/* Margin classes */
.margin-sm{
  margin: var(--spacing-sm);
}

.margin-top-0{
  margin-top: 0px;
}

.margin-top-sm {
  margin-top: var(--spacing-sm);
}

.margin-top-md {
  margin-top: var(--spacing-md);
}

.margin-top-lg {
  margin-top: var(--spacing-lg);
}

.margin-top-xl {
  margin-top: var(--spacing-xl);
}

.margin-top-xxl {
  margin-top: var(--spacing-xxl);
}

.margin-bottom-0{
  margin-bottom: 0px;
}

.margin-bottom-sm {
  margin-bottom: var(--spacing-sm);
}

.margin-bottom-md {
  margin-bottom: var(--spacing-md);
}

.margin-bottom-lg {
  margin-bottom: var(--spacing-lg);
}

.margin-bottom-xl {
  margin-bottom: var(--spacing-xl);
}

.margin-bottom-xxl {
  margin-bottom: var(--spacing-xxl);
}

.margin-y-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.margin-y-xxl {
  margin-top: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
}

/* Padding classes */
.padding-sm{
  padding: var(--spacing-sm);
}

.padding-md {
  padding: var(--spacing-md);
}

.padding-lg {
  padding: var(--spacing-lg);
}

.padding-xl {
  padding: var(--spacing-xl);
}

.padding-xxl {
  padding: var(--spacing-xxl);
}

.padding-y-xxl {
  padding: var(--spacing-xxl) 0;
}

/* Display classes */
.body-text{
  font-size: var(--font-size-200);
}

/* Text */
.uppercase {
  text-transform: uppercase;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-xxl {
  gap: var(--spacing-xxl);
}

/* Borders */
.rounded {
  border-radius: 50%;
}

.radius-sm {
  border-radius: var(--size-sm);
}

.radius-md {
  border-radius: var(--size-md);
}

.radius-lg {
  border-radius: var(--size-lg);
}

.radius-xl {
  border-radius: var(--size-xl);
}

.radius-xxl {
  border-radius: var(--size-xxl);
}

/* Width classes */
.w-33{
  width: 33%;
}

.w-80 {
  width: 80%;
}

/* Utility */
.clickable{
  cursor: pointer;
}

.overflow-hidden {
  overflow: hidden;
}

/* Animations */ 
@keyframes fadeInOut { 
  0% { 
    opacity: 0; 
    display: none; 
  } 

  50% { 
    opacity: 0.5; 
    display: block; 
  } 

  100% { 
    opacity: 1; 
    display: block; 
  } 
}

.slide-in-from-top-1{
  animation: slideInFromTop 1s ease-in forwards;
}

.slide-in-from-top-1-25{
  animation: slideInFromTop 1.25s ease-in forwards;
}

.slide-in-from-top-1-5{
  animation: slideInFromTop 1.5s ease-in forwards;
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.astro-code {
  padding: 10px;
}