@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --text-color: #160d03;
  --header-footer-bg: #2b1805;
  --accent-primary: #daa520;
  --accent-secondary: #8b4513;
  --light: #faebd7;
  --light-accents: #c58659;
  --form-inputs: rgba(205, 133, 63, 0.5);
  --skills-bg: #b8bd6b;
  --skills-texts: #404030;
  --skills-accents: #91973c;
  --quote: #294e50;
  --generic-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: "Merriweather", serif;
  background: url("../assets/img/bg.jpg") top center repeat scroll;
}

body,
html {
  scroll-padding-top: 7rem; /* adjust the pixel amount here for top navigation bar height */
}

h2 {
  font-style: italic;
  font-weight: 700;
  font-size: 2.4rem;
  margin: 1rem auto 3rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

h2::before,
h2::after {
  content: "⁓";
  font-weight: 200;
  font-size: 10rem;
  margin-top: -2rem;
  opacity: 0.7;
}

h2::after {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}