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

.btn {
  @apply text-sm rounded bg-blue-500 text-white px-3 py-1 hover:bg-blue-700 cursor-pointer;
}

.btn-lg {
  @apply px-5 py-2 text-lg;
}

.form-field {
  @apply rounded p-2 text-gray-600 w-full;
}

.form-group {
  @apply my-4;
}
.logo {
  color: #ffffff;
}

.card-background {
  background-color: rgb(24, 24, 24);
}

.inverted-mode-color {
  color: #ffffff;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

body {
  font-family: 'Poppins', sans-serif;
}

.special-font {
  font-family: 'Assistant', sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.4px;
}

.tag {
  background-color: #F3F3F3;
  padding: 8px;
}

.main-sidebar {
  width: 100%;

  @media screen and (min-width: 992px) {
    height: 100%;
    position: fixed;
    overflow-x: hidden;
    width: 285px;
  }
}

.main-content {
  @media screen and (min-width: 992px) {
    margin-left: 285px;
  }
}

.no-decoration:hover {
  text-decoration: none;
}

.shadow-on-hover {
  transition: box-shadow 0.3s ease-in-out;
}

.shadow-on-hover:hover {
  box-shadow: 0px 0px 46px -22px rgba(0,0,0,0.5);
}

.photo-capsule-card {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.zoom-in::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 2s;
}
.zoom-in:focus::after, .zoom-in:hover::after {
  transform: scale(1.2);
}

.logo:hover {
  text-decoration: none;
}

.category-item a {
  color: #000000;
}

.category-item.active {
  font-weight: bold;
}

.category-menu-item:hover {
  text-decoration: none;
  box-shadow: 0px 0px 46px -22px rgba(0,0,0,0.2);
}

.button-pill {
  background-color: #D9EBFF;
}

.button-pill:hover {
  background-color: #9CCAFF;
  text-decoration: none;
}

.subtitle {
  font-size: 16px;
  color: #869AB8;
}

.article-link,
.article-link:hover,
.app-link,
.app-link:hover,
.video-link,
.video-link:hover,
.book-link,
.book-link:hover {
  color: inherit;
  text-decoration: none;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.play-icon svg path {
  fill: red;
}

a.pipe + a.pipe:before {
  content: " | ";
  margin-left: 8px;
  margin-right: 8px;
}