:root{
  --bg:#0b1220;
  --card:rgb(16, 37, 89);

  --accent:#7dd3fc;
  --accent2:#a78bfa;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);

  --radius:6px;
  --radius-circle:50%;
  --radius-menu-button:4px;

  --max-width:1320px;

  --font-size-h1: clamp(28px, 6vw, 38px);
  --font-size-h2: clamp(18px, 5vw, 30px);
  --font-size-h3: clamp(12px, 2vw, 18px);

  --font-weight-medium: 500;
  --font-weight-height: 700;

  --text-color-dark-primary:white;
  --text-color-dark-muted:#b7c2e3;
  --color-brand-primary: rgba(93, 62, 31, 0.9);
  --color-brand-secondary:rgba(252, 240, 215, 0.8);
  --color-green:  rgb(76, 175, 80, 0.9);

  --brand-logo-height: 200px;
  --brand-logo-width: 200px;

  --line-height-small: 1.15;
  --line-height-medium: 1.25;
  --line-height-high: 1.5;

  --header-margin: 0;

  --opacity-small: 0.9;
  --opacity-medium: 0.6;
  --opacity-high: 0.3;

  --gap-small:1rem;
  --gap-medium:2rem;
  --gap-high:3rem;

  --transition-basic: all 0.35s ease;

  --translation-small: translateY(-4px);

  --background-brand-effect:  
  linear-gradient(135deg, transparent 0 42%, rgba(120,120,120,0.16) 43%, transparent 46%),
  linear-gradient(112deg, transparent 0 58%, rgba(90,90,90,0.12) 59%, transparent 62%),
  linear-gradient(78deg, transparent 0 30%, rgba(140,140,140,0.10) 31%, transparent 34%),
  radial-gradient(90px 55px at 22% 28%, rgba(90,90,90,0.12), transparent 72%),
  radial-gradient(70px 50px at 74% 66%, rgba(120,120,120,0.10), transparent 74%),
  linear-gradient(180deg, #f8f6f1, #ded8ce); 
}

body{
  font-family: "Manrope", system-ui, sans-serif;
  background: radial-gradient(1200px 800px at 10% 0%, rgba(125,211,252,.18), transparent 60%),
        radial-gradient(900px 700px at 90% 20%, rgba(167,139,250,.16), transparent 55%),
        var(--bg);
  color:var(--text-color-dark-primary);
  line-height:var(--line-height-high);
  margin: 0;
  overflow-x: hidden;
}
body.img{
  opacity: 0.7;
}

header{
  display: flex;
  justify-content: center;
  position:relative; 
  z-index:50;  
}

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

p{
  margin: 0;
}

h1{
  font-size: var(--font-size-h1);
  line-height: var(--line-height-medium);
  margin: var(--header-margin);
}

h2{
  font-size: var(--font-size-h2);
  line-height: var(--line-height-medium);
  margin: var(--header-margin);
}





/* Mobile */
@media (max-width: 768px){
  :root{
    --max-width: 100%;

    --font-size-h1: clamp(1.6rem, 6vw, 2.1rem);
    --font-size-h2: clamp(1.2rem, 4.8vw, 1.7rem);
    --font-size-h3: clamp(0.95rem, 3.8vw, 1.1rem);

    --brand-logo-height: 64px;
    --brand-logo-width: 64px;

    --radius: 4px;
    --radius-menu-button: 6px;

    --gap-small: 0.5rem;
    --gap-medium: 1rem;
    --gap-high: 1.5rem;

    --shadow: 0 8px 18px rgba(0,0,0,.28);

    --line-height-small: 1.1;
    --line-height-medium: 1.2;
    --line-height-high: 1.45;

    --transition-basic: all 0.25s ease;

    --translation-small: translateY(-2px);
  }
}

@media (max-width: 768px){
  body{
    background-attachment: scroll;
    background-position: center top;
  }
}