@import '/fonts/fonts.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
  font-family: 'Manrope', Inter, Avenir, Helvetica, Arial, sans-serif;
}

:root {
  --bg: #fdf4ea;
  --bg-contrast: #404440;
  --accent-primary: #325454;
  --accent-secondary: #B89B75;
  --accent-tertiary: #D1B071;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}


body {
  /* background: var(--bg); */
  background: var(--bg) url('/assets/pattern.svg') repeat center / 75px;
}
html {
  scroll-behavior: auto !important;
}

html, body {
  min-width: 320px;
  width: 100vw;
  overflow-x: clip;
  /* overflow-x: hidden; */
}

@media (max-width: 319px) {
  html, body {
    overflow-x: unset;
  }
}

a { text-decoration: none; color: inherit }
a:hover { text-decoration: none }
button { background: none; cursor: pointer; border: none; outline: none }
button:hover { outline: none }

.flex { display: flex; }
.full { place-content: center; place-items: center }
.column { flex-direction: column; }
.vertical { place-items: center; }
.horizontal { place-content: center; }

img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.container {
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 3rem;
}

@media (max-width: 768px) {
  .container {
    max-width: 84rem;
    padding: 0 2rem;
  }
}
@media (max-width: 400px) {
  .container {
    max-width: 83rem;
    padding: 0 2rem 0 1rem;
  }
}


.fade-in-animation {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}