:root {
  --margin-x: 16px;
  --background: #0a0a0a;
  --text: #ffffff;
  --accent: #f59e0b;
  --secondary: #fbbf24;
  --muted: #9ca3af;
}

@font-face {
  font-family: "roboto";
  src: url("../assets/fonts/Roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "roboto";
  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "roboto";
  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

body {
  background-color: var(--background);
  font-family: "roboto", sans-serif;
  margin-left: var(--margin-x);
  margin-right: var(--margin-x);
  max-width: 1100px;
  margin: 0 auto;
}

h1,
h2,
h3,
p,
span,
a,
time {
  color: var(--text);
}

h2 {
  margin-bottom: 40px;
}

p {
  line-height: 1.5;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 80px;
}

.footer {
  margin-top: 80px;
  margin-bottom: 16px;
}

.footer__paragraph {
  font-weight: 300;
  font-size: 14px;
  width: fit-content;
  margin: 0 auto;
}

@media (min-width: 768px) {
  body {
    padding: 0 16px;
  }
}