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

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

html,
body {
  padding: 0;
  margin: 0;
  /* Make all text wall-600 by default */
  @apply text-wall-600;
}

/* Reset a tags */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Links in p tags should be green */
p a {
  @apply text-green-400 font-semibold;
}

/* Reduce b and strong tag weight default */
b,
strong {
  @apply font-semibold;
}

/* Typography */

h1,
.type-h1 {
  @apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600;
}

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

h3,
.type-h3 {
  @apply text-xl font-semibold;
}

h4,
.type-ui {
  @apply text-lg font-semibold;
}

h5,
.type-h5,
.type-bold {
  @apply text-base font-semibold leading-relaxed;
}

p,
.type-p {
  @apply text-base leading-relaxed;
}

.lead {
  font-size: 1.3rem;
}

.type-sub {
  @apply text-sm;
}

.type-sub-bold {
  @apply text-sm font-semibold;
}

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

/* Utils */

.layout-narrow {
  @apply w-full md:w-8/12 lg:w-6/12;
}

.layout {
  @apply w-full md:w-10/12 lg:w-8/12;
}

.measure {
  max-width: 34em;
}

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

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

.button-sm {
  @apply flex-center px-3 h-10 rounded-lg type-ui;
}

.button-lg {
  @apply flex-center px-6 py-1 rounded-xl h-14 type-ui;
}

.badge-sm {
  min-height: 2rem;
  @apply flex-center text-base font-medium px-3 rounded-full;
}

.badge-lg {
  @apply flex-center type-ui px-5 h-12 rounded-full;
}

.button-sm:hover,
.button-text:hover,
.button-lg:hover,
a:hover {
  opacity: 0.66;
}

/* BEM Classes - Use sparingly */

.port-hero-card-height {
  height: 36em;
}

.port-hero-image-height {
  height: 32em;
}

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

.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 - 4rem - 1rem - 1rem);
}

.mobile-search-button-width {
  width: calc(100vw - 4rem - 1rem - 1rem - 1rem - 1rem);
}

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

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