@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{

  --font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1256px;
  --hero-pad-bottom: 100px;
  --hero-pad-top: 76px;
  --pad-x: 24px;
  --pad-y: 16px;
  --space: 32px;
  --gap: 12px;
  --radius: 6px;

  --body-size: 18px;
  --body-line: 1.5;
  --h1-size: 40px;
  --h1-weight: 700;
  --moto-text-size: 20px;
  --h2-size: 28px;
  --h2-weight: 700;
  --h2-space-bottom: 24px;

  --bg-page: linear-gradient(0deg, #1a1a1a);
  
  --text: #e6e6e6;
  --accent: #f17e32;
  --accent-card-bg: #3a312a;
  --muted: 0.6;

  --btn-text-size: 20px;
  --btn-text-color: #fff;
  --btn-py: 16px;
  --btn-px: 32px;

  --icon: 32px;
  --social-icon: 20px;

  --t: 0.5s;
  --scale-hover: 1.1;

  --card-border-width: 2px;
  --card-border-color: rgba(114, 114, 114, 0.6);
  --card-bg: #222;
  --card-pad: 16px;

  --pattern-mask: var(--pattern-metal);

  --pattern-metal: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2360c363'%3E%3Cpath d='M25 10 c3 0 5 2 5 5 l0 20 c0 3 -2 5 -5 5 s-5 -2 -5 -5 l0 -20 c0 -3 2 -5 5 -5 z' opacity='0.3'/%3E%3Cpath d='M75 60 c3 0 5 2 5 5 l0 20 c0 3 -2 5 -5 5 s-5 -2 -5 -5 l0 -20 c0 -3 2 -5 5 -5 z' opacity='0.3'/%3E%3Cpath d='M10 75 c0 -3 2 -5 5 -5 l20 0 c3 0 5 2 5 5 s-2 5 -5 5 l-20 0 c-3 0 -5 -2 -5 -5 z' opacity='0.3'/%3E%3Cpath d='M60 25 c0 -3 2 -5 5 -5 l20 0 c3 0 5 2 5 5 s-2 5 -5 5 l-20 0 c-3 0 -5 -2 -5 -5 z' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");

  --pattern-size: 40px;
  --pattern-opacity: 0.15;
  --pattern-color: 96 195 99;
} 

@media (max-width: 680px) {
  :root {
    --pattern-size: 24px;
  }
}