@tailwind base;
blockquote {
  @apply border-l;
  @apply border-l-4;
  @apply border-l-blue-500;
  @apply pl-4;
  @apply italic;
  @apply my-8;
  p {
    padding: 0 !important;
  }
}

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

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

.act-link {
  @apply bg-gray-300;
}

pre {
  @apply border-l;
  @apply border-l-2;
  @apply border-l-gray-500;
  @apply pl-4;
  @apply mt-4;
  @apply text-base;
  @apply break-words;
  @apply overflow-x-auto;
}

ol {
  @apply list-decimal;
  @apply ml-5;
}

ul {
  @apply list-disc;
  @apply ml-5;
}

:not(pre) > code {
  @apply text-red-600;
  @apply text-base;
}

@tailwind components;
@tailwind utilities;
@responsive {
  .pxi-0 {
    @apply px-0 #{!important};
  }
  .pyi-0 {
    @apply py-0 #{!important};
  }
  .pi-0 {
    @apply p-0 #{!important};
  }
}

.animated-link:after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  transition: 300ms;
  @apply bg-gray-500;
}

.footerlink {
  margin-left: 0rem !important;
}

// .animated-link:hover:after {
//     width: 100%;
// }
.height-30px {
  height: 30px;
}

.brandpanel {
  background-color: #1072ba;
}

.no-border {
  border-width: 0px !important;
}

.flex-post {
  @apply border-b;
  @apply border-b-gray-300;
  @apply flex-col;
  @apply w-full;
  .post-card-image {
    @apply h-56;
    @apply w-full;
    @apply object-cover;
    @apply rounded;
    @apply relative;
  }
  .post-card-title {
    @apply leading-none;
    @apply text-2xl;
    @apply font-medium;
  }
  .post-card-excerpt {
    @apply font-serif;
  }
}

.author-list-item:nth-child(n + 2) {
  @apply -ml-3;
}

button:focus {
  outline: none;
}
.telegram_icon{
  font-size: 1.2rem;
  
}

.text-8xl {
  font-size: 5rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .with-large > .flex-post:nth-child(5n),
  .with-large > .flex-post:nth-child(5n-1) {
    // @apply flex-100;
    flex: 1 1 50%;
    @apply flex-col;
    .post-card-image-link {
      @apply relative;
      min-height: 400px;
    }
    .post-card-image {
      @apply absolute;
      @apply h-full;
      @apply w-full;
      @apply object-cover;
      @apply rounded-lg;
    }
    .post-card-content {
      // @apply flex-post-large-content;
      flex: 0 1 auto;
      @apply self-center;
    }
    .post-card-title {
      @apply text-4xl;
    }
    .post-card-excerpt {
      @apply text-xl;
    }
  }
  .news > .flex-post:nth-child(5n),
  .news > .flex-post:nth-child(5n-1) {
    // @apply flex-100;
    flex: 1 1 50%;
    @apply flex-col;
    .post-card-image-link {
      @apply relative;
      min-height: 300px;
    }
    .post-card-image {
      @apply absolute;
      @apply h-full;
      @apply w-full;
      @apply object-cover;
      @apply rounded-lg;
    }
    .post-card-content {
      // @apply flex-post-large-content;
      flex: 0 1 auto;
      @apply self-center;
    }
    .post-card-title {
      @apply text-4xl;
    }
    .post-card-excerpt {
      @apply text-xl;
    }
  }
  // .news>.flex-post:nth-child(9n+1),
  // .news>.flex-post:nth-child(9n+2) {
  //     // @apply flex-100;
  //     flex: 1 1 50%;
  //     @apply flex-col;
  //     .post-card-image-link {
  //         @apply relative;
  //         min-height: 300px;
  //     }
  //     .post-card-image {
  //         @apply absolute;
  //         @apply h-full;
  //         @apply w-full;
  //         @apply object-cover;
  //         @apply rounded-lg;
  //     }
  //     .post-card-content {
  //         // @apply flex-post-large-content;
  //         flex: 0 1 auto;
  //         @apply self-center;
  //     }
  //     .post-card-title {
  //         @apply text-4xl;
  //     }
  //     .post-card-excerpt {
  //         @apply text-xl;
  //     }
  // }
  // .news>.flex-post:nth-child(9n+3),
  // .news>.flex-post:nth-child(9n+4),
  // .news>.flex-post:nth-child(9n+5) {
  //     // @apply flex-100;
  //     flex: 1 1 300px;
  //     @apply flex-col;
  //     .post-card-image-link {
  //         @apply relative;
  //         min-height: 180px;
  //     }
  //     .post-card-image {
  //         @apply absolute;
  //         @apply h-full;
  //         @apply w-full;
  //         @apply object-cover;
  //         @apply rounded-lg;
  //     }
  //     .post-card-content {
  //         // @apply flex-post-large-content;
  //         flex: 0 1 auto;
  //         @apply self-center;
  //     }
  //     .post-card-title {
  //         @apply text-4xl;
  //     }
  //     .post-card-excerpt {
  //         @apply text-xl;
  //     }
  // }
  // .news>.flex-post:nth-child(9n+6),
  // .news>.flex-post:nth-child(9n+7),
  // .news>.flex-post:nth-child(9n+8),
  // .news>.flex-post:nth-child(9n+9) {
  //     // @apply flex-100;
  //     flex: 1 1 250px;
  //     @apply flex-col;
  //     .post-card-image-link {
  //         @apply relative;
  //         min-height: 300px;
  //     }
  //     .post-card-image {
  //         @apply absolute;
  //         @apply h-full;
  //         @apply w-full;
  //         @apply object-cover;
  //         @apply rounded-lg;
  //     }
  //     .post-card-content {
  //         // @apply flex-post-large-content;
  //         flex: 0 1 auto;
  //         @apply self-center;
  //     }
  //     .post-card-title {
  //         @apply text-4xl;
  //     }
  //     .post-card-excerpt {
  //         @apply text-xl;
  //     }
  // }
}

body[data-theme="dark"] {
  background-color: #191b1f;
  @apply text-gray-300;
  .post-content-text {
    @apply text-gray-300;
  }
  .brandpanel {
    background-color: #1072ba !important;
}
  .text-gray-700,
  .text-gray-900 {
    @apply text-white;
  }
  .lg\:shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1),
      0 10px 10px -5px rgba(255, 255, 255, 0.04);
  }
  .learn-button {
    background-color: #c4c4c4;
    @apply text-gray-900;
    &:hover {
      @apply bg-gray-300;
    }
  }
  .text-indigo-600 {
    @apply text-white;
  }
  .inset-0,
  input[type="text"] {
    background-color: #191b1f;
  }
  .bg-white,
   
  .bg-gray-100,
  .bg-gray-200 {
    background-color: #191b1f;
  }
  .post-card-excerpt {
    @apply text-gray-500;
  }
  .pagination li {
    @apply bg-gray-700;
    @apply text-gray-200;
    @apply border-gray-600;
    &:hover {
      @apply bg-gray-600;
      @apply text-gray-900;
    }
  }
  .pagination li.border-l-black {
    @apply border-l-gray-300;
  }
  pre {
    @apply text-gray-500;
  }
  .flex-post {
    @apply border-b-gray-800;
  }
  .author-list-item img {
    border-color: #191b1f;
  }
  .author-social {
    a {
      &:hover {
        @apply text-white;
      }
    }
  }
}
