@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: 8px;

  --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, #121212);
  
  --text: #e0e0e0;
  --accent: #60b4c3;
  --accent-card-bg: #2a3a2a;
  --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: 1px;
  --card-border-color: rgba(96, 182, 195, 0.4);
  --card-bg: #1e1e1e;
  --card-pad: 16px;

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

  --pattern-hex: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9 49L0 41V25V9L13.9 1L27.8 9V25V41L13.9 49ZM13.9 47L25.8 40V26V10L13.9 3L2 10V26V40L13.9 47Z' fill='%2360c363' fill-opacity='0.15'/%3E%3C/svg%3E");

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

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