@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap");

html,
body {
  padding: 0;
  margin: 0;
}

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

p a {
  @apply text-green;
}

/* * {
  box-sizing: border-box;
} */

.layout-narrow {
  @apply w-full md:w-8/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;
}

.layout-wide {
  @apply w-full md:w-10/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;
}

h1,
.type-h1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;
}

h2,
.type-h2 {
  @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
}

h3,
.type-h3 {
  @apply text-xl md:text-2xl lg:text-3xl font-bold;
}

h4,
.type-ui {
  @apply text-base md:text-lg lg:text-xl font-semibold;
}

.type-ui-small {
  @apply text-sm lg:text-base font-medium;
}

p,
.type-p {
  @apply text-base md:text-lg lg:text-xl;
}

.type-sub {
  @apply text-sm lg:text-base font-semibold;
}

caption,
.type-caption {
  @apply text-sm lg:text-base font-medium block text-left;
}

code .type-code {
  @apply bg-wall p-4 font-mono;
}

button {
  border: none;
}

.button-sm {
  @apply flex px-4 py-1 rounded-lg type-ui;
}

.button-lg {
  @apply flex px-4 lg:px-6 py-2 rounded-xl h-12 md:h-16 flex-center type-ui;
}

.badge-sm {
  @apply flex type-ui-small px-2 lg:px-3 items-center justify-center h-8 md:h-10 rounded-full;
}

.badge-lg {
  @apply flex type-ui px-4 lg:px-6 items-center justify-center h-10 md:h-14 rounded-full;
}

.tab-button-lg {
  @apply type-h2 h-16;
  overflow: visible;
}

.tab-button-sm {
  @apply type-ui h-12;
  overflow: visible;
}

.button-sm:hover {
  opacity: 0.66;
}

.button-lg:hover {
  opacity: 0.66;
}

a:hover {
  opacity: 0.66;
}

.hero-card-height {
  height: 750px;
}

.hero-image-height {
  height: 686px;
}

.hero-image {
  transform: translateX(8%);
}

.measure {
  max-width: 34rem;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-img {
  background-repeat: no-repeat;
  background-position: center center;
  @apply bg-wall;
}

.tray-menu-open {
  transform: translateX(0);
  transition: transform 200ms;
}

.tray-menu-closed {
  transform: translateX(100vw);
  transition: transform 200ms;
}

.dot::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 99px;
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.4rem;
  @apply bg-green;
}