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

@font-face {
  font-family: Inter;
  src: url('./assets/fonts/Inter-Regular.otf');
}
@font-face {
  font-family: InterMedium;
  src: url('./assets/fonts/Inter-Medium.otf');
}
@font-face {
  font-family: InterBold;
  src: url('./assets/fonts/Inter-Bold.otf');
}

@layer components {
  blockquote {
    @apply rounded-2xl p-4 dark:bg-slate-950 border border-transparent dark:border-white/[0.2] border-slate-700 relative z-20;
  }
  .bookmarkBtn {
    @apply w-[100px] h-[35px] rounded-[40px] border border-[#ffffff59] bg-[#0c0c0c] flex items-center justify-center cursor-pointer duration-300 overflow-hidden;
  }
  .IconContainer {
    @apply w-[25px] h-[25px] rounded-[50px] flex items-center justify-center overflow-hidden z-20 duration-300;
  }
  .card {
    @apply rounded-2xl p-4 dark:bg-slate-950 border border-transparent dark:border-white/[0.2] border-slate-700 relative z-20 capitalize hover:animate-pulse;
  }
  .btn {
    @apply flex overflow-hidden items-center text-sm font-medium  bg-slate-800 text-white shadow px-4 py-3 whitespace-pre md:flex relative w-max justify-center gap-2 rounded-md transition-all duration-300 ease-out cursor-pointer hover:bg-slate-700;
  }
  .wrapper {
    @apply container mx-auto py-1 leading-relaxed pb-12 dark:text-neutral-300 max-w-3xl mt-12 w-11/12;
  }
}

body {
  font-family: Inter, sans-serif;
  overflow-x: hidden !important;
}

h1 {
  font-size: 2.1em;
  font-weight: bold;
  margin: 20px 0 0 0;
  line-height: 3rem;
  text-transform: capitalize;
}

h2 {
  font-size: 1.6em;
  font-weight: bold;
  text-transform: capitalize;
  /* margin: 20px 0; */
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
  /* margin: 20px 0; */
}
img {
  margin: 30px 0;
}
blockquote {
  padding: 20px;
  margin: 15px;
}
code {
  /* margin-bottom: 20px; */
}

.links {
  text-decoration: underline;
  color: rgb(147 197 253);
}
.markdown-file ul,
.markdown-file ol {
  list-style: inside;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 10px auto 10px 20px;
}

.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(75, 73, 74);
  transition: 0.4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: '';
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  background-color: black;
  box-shadow: inset 8px -4px 0 0 white;
  transition: 0.4s;
}

.switch input:checked + .slider {
  background-color: #424141c5;
}

.switch input:checked + .slider:before {
  transform: translateX(1.5em);
  background-color: yellow;
  box-shadow: none;
}

.IconContainer {
  background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));
}

.icon {
  border-radius: 1px;
}

.text {
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
  transition-duration: 0.3s;
  font-size: 15px;
}

.bookmarkBtn:hover .IconContainer {
  width: 90px;
  transition-duration: 0.3s;
}

.bookmarkBtn:hover .text {
  transform: translate(10px);
  width: 0;
  font-size: 0;
  transition-duration: 0.3s;
}

.bookmarkBtn:active {
  transform: scale(0.95);
  transition-duration: 0.3s;
}

.back-btn::before {
  content: 'Back to top';
}

@media (max-width: 375px) {
  h1 {
    font-size: 1.8em;
  }
  h2 {
    font-size: 1.4em;
  }
}
