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

:root {
  --tw4: 1rem;
  --tw5: 1.25rem;
  --twMw6xl: 72rem;
}

html,
body {
  @apply font-sans text-gray-700 dark:text-gray-400 dark:bg-gray-900;
}

p {
  @apply leading-loose font-normal;
}

.grid-main {
  grid-template-columns: var(--tw5) 1fr minmax(0, var(--twMw6xl)) 1fr var(--tw5);
}

.header:before {
  background-image: url(../assets/img/banner/main-base.png);
  background-position: top right;
  background-repeat: no-repeat;
  content: '';
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

a.patreon {
  background-color: rgb(255, 66, 77);
  color: #fff;
  border-radius: 25px;
  padding: 8px 20px;
}

@media (max-width: 1024px) {
  .header:before {
    display: none;
  }
}