/* ==========================================================================
   1. IMPORTS
   ========================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap'); */


/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Merriweather:wght@900&family=Montserrat:wght@900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:opsz,wght@18..144,900&family=Montserrat&family=Roboto+Flex:opsz,wght@8..144,1000&family=Playfair+Display:wght@900&display=swap');

.merri-900 {
 font-family: "Merriweather", serif;
 font-optical-sizing: auto;
 font-weight: 900;
 font-style: normal;
 font-variation-settings:
  "wdth" 100;
}

.montserrat-400 {
 font-family: "Montserrat", sans-serif;
 font-optical-sizing: auto;
 font-weight: 900;
 font-style: normal;
}

.robotoflex-300 {
 font-family: "Roboto-Flex", sans-serif;
 font-optical-sizing: auto;
 font-weight: 300;
 font-style: normal;
}

.robotoflex-1000 {
 font-family: "Roboto-Flex", sans-serif;
 font-optical-sizing: auto;
 font-weight: 1000;
 font-style: normal;
}

.playfair-900 {
 font-family: "Playfair Display", serif;
 font-optical-sizing: auto;
 font-weight: 900;
 font-style: normal;
}

/* ==========================================================================
   2. CSS VARIABLES (CUSTOM PROPERTIES)
   ========================================================================== */
:root {

 /* COLORS */
 --h: 270;
 --s: 80%;
 --l: 40%;
 --primary-color:
  hsl(var(--h),
   calc(var(--s) * 1),
   calc(var(--l) * 1));

 --secondary-color: hsl(90, 80%, 20%);

 --font-base-color:
  hsl(var(--h),
   calc(var(--s) * 0.8),
   calc(var(--l) * 0.4));

 --border-base-color:
  hsl(calc(var(--h) + 0),
   var(--s),
   calc(var(--l) / 1.125));

 --background-base-color:
  hsl(calc(var(--h)),
   calc(var(--s) * 0.25),
   calc(var(--l) * 0.25));

 --button-background:
  hsl(calc(var(--h) + 120),
   calc(var(--s) * 1),
   calc(var(--l) * 0.75));
 --background-secondary-color:
  hsl(270, 30%, 90%);
 --menu-background-color:
 hsla(360,20%,80%,0.5);

 --hover-base-color:
  hsl(calc(var(--h) + 0),
   var(--s),
   calc(var(--l) / 6));

 .color-title {
  color:   hsl(var(--h),
   calc(var(--s) * 1),
   calc(var(--l) * 1));
 }

 .color-content {
  color: hsl(270, 25%, 25%);
 }



 --hero-filter: brightness(1) saturate(1.4);
 --footer-color: hsl(270, 20%, 80%);
 --header-color: hsl(270, 40%, 20%);
 /* Typography */
 --font-base-size: 1rem;

 --line-height-base: 1.5;
 --scale-ratio: 1.2;

 /* Spacing */
 --spacing-unit: 0.25rem;
 --space-xs: calc(var(--spacing-unit) * 1);
 --space-sm: calc(var(--spacing-unit) * 2);
 --space-md: calc(var(--spacing-unit) * 4);
 --space-lg: calc(var(--spacing-unit) * 6);
 --space-xl: calc(var(--spacing-unit) * 8);
 --space-xxl: calc(var(--spacing-unit) * 10);

 /* Layout */
 --container-width: 100%;
 --container-max-width: 1200px;
 --grid-gutter: var(--space-md);

 /* FONT SIZES */



 --color-primary: hsl(270, 75%, 25%);
 --color-primary-900: hsl(270, 75%, 15%);
 --color-primary-700: hsl(270, 75%, 20%);
 --color-primary-300: hsl(270, 60%, 40%);
 --color-primary-100: hsl(270, 50%, 60%);
 --color-primary-50: hsl(270, 40%, 92%);

 /* Complementary Colors */
 --color-complement: hsl(90, 75%, 35%);
 --color-complement-light: hsl(90, 65%, 50%);

 /* Backgrounds */
 --color-bg-light: hsl(270, 30%, 98%);
 --color-bg-dark: hsl(270, 30%, 8%);
 --color-bg-card: hsl(270, 20%, 95%);

 /* Neutrals */
 --color-neutral-700: hsl(270, 10%, 20%);
 --color-neutral-400: hsl(270, 10%, 50%);
 --color-neutral-200: hsl(270, 10%, 85%);
 --color-neutral-100: hsl(270, 5%, 95%);

 /* Accents */
 --color-accent-magenta: hsl(300, 65%, 30%);
 --color-accent-amber: hsl(30, 80%, 45%);

 .font-xs {
  font-size: calc(0.4 * var(--font-base-size));
 }

 .font-sm {
  font-size: calc(0.8 * var(--font-base-size));
 }

 .font-md {
  font-size: var(--font-base-size);
 }

 .font-lg {
  font-size: calc(1.2 * var(--font-base-size));
 }

 .font-xl {
  font-size: calc(1.4 * var(--font-base-size));
 }

 .font-xxl {
  font-size: calc(2 * var(--font-base-size));
 }



 /* Colors */
 --color-primary: hsl(270, 100%, 20%);
 --color-primary-light: hsl(270, 100%, 60%);
 --color-primary-gray:hsl(270, 20%, 60%);

 --bgcolor-light: hsl(270, 40%, 80%);
 --bgcolor-dark: hsl(270, 40%, 20%);
 --border-color: (270, 80%, 40%, 0.5);
 --link-color-dark: hsl(270, 100%, 20%);
 --link-color-bright: hsl(40, 80%, 80%);
 --link-color-dark-hover: white;
 --main-bg-color: hsl(270, 80%, 20%);
 --light-bg-color: hsl(270, 80%, 80%);

 --text-color-dark: hsl(270, 40%, 20%);
 --text-color-light: hsl(270, 80%, 80%);

 --spacing-base: 1rem;
 --button-label-color: hsl(280, 100%, 40%);
 --button-label-color-hover: hsl(260, 100%, 40%);
 --button-label-color-bg: hsla(260, 60%, 40%, 0.125);


 /* LINKS COLORS */
 --link-background-color: 270,
 80%,
 40%;
 --link-color: 220,
 80%,
 40%;
 --link-color-alternative: 280,
 100%,
 20%;
 --hover: 0.125;

 /* Shadows */
 --shadow-color: hsla(270, 100%, 40%, 0.25);
 --shadow-sm: 0 0.125rem 0.25rem var(--shadow-color);
 --shadow-md: 0 0.25rem 0.5rem var(--shadow-color);
 --shadow-lg: 0 1rem 2rem var(--shadow-color);

 /* Border Radius */
 --radius-sm: 0.5rem;
 --radius-md: 1rem;
 --radius-lg: 1.5rem;


}

.dark-theme {
 /* Dark theme variables */
 --bg-primary: #1a202c;
 --bg-secondary: #2d3748;
 --text-primary: #edf2f7;
 --text-secondary: #cbd5e0;
 --accent-color: #63b3ed;
 --border-color: #4a5568;
 --shadow-color: rgba(0, 0, 0, 0.3);
 --card-bg: #2d3748;
 --button-hover: #2d3748;
}

/* ==========================================================================
   3. RESET & BASE STYLES
   ========================================================================== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-size: var(--font-base-size);
 scrollbar-width: none;
 /* Firefox */
 -ms-overflow-style: none;
 /* IE/Edge */
 overflow: -moz-scrollbars-none;
 /* Old Firefox */
}

html::-webkit-scrollbar {
 display: none;
 /* Chrome, Safari, Opera */
 width: 0;
 height: 0;
}

body {
 margin: 0 auto;
 padding: 0;
 width: 100%;
 /* max-width: 1200px; */
 min-height: 100vh;
 /* background-color: hsl(calc(var(--h)), calc(var(--s) - 70%), calc(var(--l) - 10%)); */
 background-color: transparent;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-content: center;
 /* padding-left: 5%;
 padding-right: 5%; */

}

header {
 width: 100%;
}

button {
 margin-right: var(--space-sm);
 cursor: pointer;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.Sansita {
 font-family: "Sansita", sans-serif;
}

.El-Messiri {
 font-family: "El Messiri", sans-serif;

}


.cormorant-garamond-normal {
 font-family: "Cormorant Garamond", serif;
 font-optical-sizing: auto;
 font-weight: 100;
 font-style: normal;
}


/* ==========================================================================
   5. LINKS & NAVIGATION
   ========================================================================== */
a,
li {
 text-decoration: none;
}



/* ==========================================================================
   6. LAYOUT & SPACING
   ========================================================================== */


.bg-util {
 background-color: hsla(270, 80%, 60%, 0.125);
 padding: 2px;
 /* padding-bottom: 5px; */
}

.main-content {
 max-width: 1200px;
 width: 100%;
 margin: auto;
 padding: 2rem;
 /* Add these properties for vertical centering */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 1rem;
 /* background-color: hsla(270, 80%, 80%,0.125); */
}

.container {
 padding: var(--padding-container);
}

body {
 display: flex;
 justify-items: center;
 align-items: center;
 justify-content: center;
 align-content: center;
}

.mega-container {
 display: flex;
 flex-direction: column;
 justify-items: center;
 align-items: center;
 justify-content: center;
 align-content: center;
 max-width: 1200px;
 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
 padding-bottom: 1rem;
 border-radius: 1rem;
}

/* Mobile first approach */
/* Base styles use the root variables defined above */

/* Small tablets (576px and up) */
@media (min-width: 576px) {
 :root {
  --font-base-size: 1.125rem;
  /* 18px */
  --spacing-unit: 0.3125rem;
  --line-height-base: 1.75;
 }
}

/* Medium tablets (768px and up) */
@media (min-width: 768px) {
 :root {
  --font-base-size: 1.25rem;
  /* 20px */
  --line-height-base: 2;
  --spacing-unit: 0.375rem;
  /* 6px */
 }
}

@media (min-width: 992px) {

 /* 992px */
 :root {
  --font-base-size: 1.3rem;
  --spacing-unit: 0.4375rem;
  --line-height-base: 2;
 }
}

@media (min-width: 1200px) {

 /* 1200px */
 :root {
  --font-base-size: 1.35rem;
  --spacing-unit: 0.5rem;
  --line-height-base: 2;
 }
}