@tailwind base;

@tailwind components;

@tailwind utilities;

.theme-light {
  --bg-background-primary: white;
  --bg-background-secondary: #f7fafc;
  --bg-background-tertiary: #e2e8f0;

  --bg-background-form: white;

  --text-copy-primary: #2d3748;
  --text-copy-secondary: #4a5568;

  --border-border-color-primary: white;
}

.theme-light .search-highlighted {
  background: #f0fff4;
}

.theme-light .search-hover:hover {
  background: #f0fff4;
}

.theme-dark .markdown-body {
    color: #24292e;
}

.theme-dark .search-highlighted {
  background: #2d3748;
}

.theme-dark .search-hover:hover {
  background: #2d3748;
}

.theme-dark {
  --bg-background-primary: #0D2438;
  --bg-background-secondary: #102C44;
  --bg-background-tertiary: #1E3951;

  --bg-background-form: #1a202c;

  --text-copy-primary: #cbd5e0;
  --text-copy-secondary: #e2e8f0;

  --border-border-color-primary:  #1a202c;
}

.theme-dark .markdown-body {
    color: #cbd5e0;
}

.theme-dark nav .active {
    @apply border-white border-b;
}

.content-wrapper {
  transition: background-color .25s;
}

.content-wrapper > header,
.content-wrapper > main {
  background-color: var(--bg-background-primary);
}

a {
  @apply text-green-700 font-bold;
}

a:hover {
  @apply text-green-800;
}

nav .active {
  font-weight: bold;
  @apply border-black border-b;
}

.container-inner {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-inner {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container-inner {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-inner {
    max-width: 800px;
  }
}

.checkmark {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.427%2024.93A14.5%2014.5%200%201%201%2024.93%204.427c5.495%205.69%205.416%2014.733-.177%2020.326s-14.637%205.672-20.326.177z%22%20fill%3D%22%232E855A%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M10.234%2012.803l3.67%203.253L20.766%2010%2023%2012l-9.096%208L8%2014.789l2.234-2z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  @apply pl-10;
}

.responsive-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
