:root {
  --bg: #ffffff;
  --text: #535252;
  --card: #f8fafc;
  --border: #e2e8f0;
  --accent: #2563eb;
  --container-padding: 15%;
}

html{
  scroll-behavior: smooth;
  margin:auto;
}

@media (max-width: 768px) {
    :root {
        --container-padding: 5%;
    }    
}


* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: Inter, sans-serif;
}

section {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.full-width-line {
  border: none;
  border-top: 1px solid var(--border);
  width: calc(100% + (2 * var(--container-padding)));
  margin-left: calc(-1 * var(--container-padding));
}