@layer reset, tailwind, utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Open Sans", sans-serif;
}

.container {
  width: min(22.5rem, 100% - 2rem);
  margin-inline: auto;
}

@media (width >= 576px) {
  .container {
    width: min(45rem, 100% - 4rem);
  }
}

@media (width >= 768px) {
  .container {
    width: min(60rem, 100% - 6rem);
  }
}

@media (width >= 992px) {
  .container {
    width: min(72rem, 100% - 8rem);
  }
}

@media (width >= 1200px) {
  .container {
    width: min(85rem, 100% - 10rem);
  }
}

@media (width >= 1440px) {
  .container {
    width: min(75rem, 100% - 15rem);
  }
}