@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;
}

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 leading-relaxed;
}

.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;
}

.tile-height {
  height: 38rem;
}

.preview-tile-height {
  @apply h-96;
}

.button-sm {
  @apply table 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-3 lg:px-4 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,
.button-text:hover,
.button-lg:hover,
a:hover {
  opacity: 0.66;
}

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

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

.hero-image {
  transform: translateX(8%);
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 85%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("https://media.urbit.org/port.svg");
  background-size: cover;
}

.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;
}

:root {
  --tray-time: 0ms;
}

.tray-menu-open {
  transform: translateX(0);
  transition: transform var(--tray-time);
}

.tray-menu-closed {
  transform: translateX(-110vw);
  transition: transform var(--tray-time);
}

.tray-menu-width {
  width: calc(100vw - 64px - 16px - 16px);
}

.mobile-search-button-width {
  width: calc(100vw - 64px - 16px - 16px - 16px - 16px);
}

.tray-overlay-open {
  opacity: 1;
  transition: opacity var(--tray-time);
}

.tray-overlay-closed {
  opacity: 0;
  transition: opacity var(--tray-time);
}

.menu-open {
  left: 0;
  visibility: visible;
  display: block;
}

.menu-closed {
  left: -100vw;
  visibility: hidden;
  display: none;
}

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

.sidebar figure,
.sidebar img {
  width: auto !important;
  margin: 0 auto !important;
  left: 0 !important;
  display: block !important;
  position: static !important;
  border-radius: 0 !important;
}