/* Define Variables */
:root {
  /* Colors */
  --clr-primary: #4e008e;
  --primaryhsl: 273, 100%, 28%;
  --clr-sec: #cda177;
  --clr-white: #f1f1f1;
  --clr-black: #131313;
  --clr-light: #e0e0e0;
  --white: #ffffff;
  --black: #000000;

  /* Typography */
  --font-family-base: 'Montserrat', sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-size-base: 1rem;
  --ratio: 1.168;
  --line-height-base: 1.5;
  --light: 200;
  --norm: 400;
  --bold: 700;
  --thick: 900;
  

  /* Spacing (use multiples of 4px or 8px) */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.5rem;   /* 24px */
  --spacing-6: 2rem;     /* 32px */
  --spacing-8: 3rem;     /* 48px */

  /* Border radius */
  --radius: 10px;

  /* Shadows */
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 0px 20px rgba(0, 0, 0, 0.1);

}

/* CSS Reset */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  /* font: inherit; */
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--clr-primary);;
  color: #fff;
  text-shadow: none;
}

html, body {
  height:100%;
  overflow-x:hidden;
}

html {
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Set base font size to 100% for rem units */
  font-size: 100%;
  /* Prevent adjustments after orientation changes in iOS */
  -webkit-text-size-adjust: 100%;
   background-color: var(--clr-primary);
}

body {
  /* Ensure body takes full height and removes default margin */
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  /* Optional: Set a default background and text color */
  background-color: #fff;
  color: var(--clr-black);
  font-family: var(--font-family-base);
  font-size: 1.3rem;
  font-weight: var(--norm);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

a {
  position: relative;
  display: block; /*inline-block*/
  font-weight: var(--norm);
 
}

/* a::before {
  content: '';
  position: absolute;
  inset: -2px 0 auto 0;  /* top: -2px, left/right: 0, bottom: auto */
/*  height: 2px;
  background: transparent;
  transition: background 0.2s;
} */

a::before {
  transition: background .2s;
}

a img {
    cursor: pointer;
    transition: .5s ease-in-out;
}

a img:hover {
  transform: scale(1.05, 1.05);
}

/* Remove list styles */
ul, ol {
  list-style: none;
}

/* Remove default table spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Improve media defaults */
audio, video {
  display: block;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-family: var(--font-family-base);
  padding-bottom: 1.3rem;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-weight: var(--bold);
}

h1 {
  /* font-size: 3rem; */
  /* font-size: clamp(2.5rem, 60vh, 3.5rem); */
  font-size: clamp(1.5rem, 50vw, 3rem);
  line-height: clamp(1.1, 1, 1.1);
  /* line-height: clamp(2rem, 70px, 4.5rem); */
  font-weight: var(--thick);
  /* padding-bottom: 2.5rem; */
  margin-bottom: 2rem;
  padding-top: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

p, li, figcaption {
    text-wrap: pretty;
    max-width: 65ch;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
    object-fit: cover;
}