:root {
  --white: hsla(100, 100%, 100%, 1);
  --bg: rgba(0, 0, 0, 1);
  --font: rgba(207, 207, 207, 1);
  --text-clr: rgba(77, 77, 77, 1);
  --accent: rgba(230, 198, 25, 1);

  --ff-mr: "Montserrat", sans-serif;
  --ff-os: "Oswald", sans-serif;

  --fs-menu: 1.2em;
  
  --sec-pad: 150px 0;
  --mw: 1280px;
  --w: 100%;
  --gap: 2em;
}

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

html {
  scroll-behavior: smooth;
}

body {
  display: grid;
  padding-top: 10em;
  background: white;
  display: grid;
}

a {
  color: goldenrod;
  text-decoration: none;
}

a:hover {
  color: gold;
  text-decoration: underline;
}

img {
 width: 100%;
 height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-mr);
  font-weight: 400;
  margin-bottom: calc(var(--gap)/2);
}

p {
  font-family: var(--ff-mr);
}

hr {
  display: block;
  width: var(--w);
  max-width: var(--mw);
  margin: 2em auto;
  height: 1px;
  border-top: 1px solid var(--accent);
}