:root {
  --color-primary: #a84f50;
  --color-text: #ffffff;
  --color-text-dark: #0d0300;
  --color-bg-dark: #251c19;
  --color-bg-darker: #0d0300;
  --color-bg-section: #321718;
  --font-heading: 'Bangers', cursive;
  --font-body: 'Nunito', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  background-color: var(--color-bg-darker);
}

.container {
  width: 100%;
  max-width: 1408px; /* 1280 + 64 + 64 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  transition: all 0.3s ease;
}

.btn-outline {
  border: 2px solid var(--color-text);
  background-color: transparent;
  color: var(--color-text);
}

.btn-outline:hover {
  background-color: var(--color-text);
  color: var(--color-text-dark);
}

.btn-light {
  background-color: #f2f2f2;
  color: var(--color-text-dark);
  padding: 10px 24px;
  box-shadow: 0px 1px 2px 0px rgba(13, 3, 0, 0.05), inset 0px -2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 1px rgba(13, 3, 0, 0.15), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.25), inset 0px 32px 24px 0px rgba(255, 255, 255, 0.05);
}

.btn-light:hover {
  opacity: 0.9;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
  padding: 10px 24px;
  box-shadow: 0px 1px 2px 0px rgba(13, 3, 0, 0.05), inset 0px -2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 1px rgba(13, 3, 0, 0.15), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.25), inset 0px 32px 24px 0px rgba(255, 255, 255, 0.05);
}

.btn-primary:hover {
  opacity: 0.9;
}

@media (max-width: 1024px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.container {
  width: 100%;
  padding: 0 20px;
}

/* Only box it on large desktop screens */
@media screen and (min-width: 1440px) {
  .container {
    max-width: 1650px;
    margin: 0 auto;
  }
}