@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*-----------------------------------*\
  #s tyle.css
\*-----------------------------------*/


body {
  font-family: "Poppins", "Gill Sans", "Gill Sans MT";
  background-color: #121212;
  overflow-x: hidden;
  color: rgb(218, 206, 206);
}

#resume p,
#resume li {
  font-size: 0.94rem;
  color: #c1c0c0;
  line-height: 25px;
}

@media screen and (max-width: 500px) {
  #resume p,
  #resume li {
    font-size: 0.9rem;
  }
}

#resume a:hover {
  border-bottom: 1px solid gold;
}

/*-----------------------------------*\
  Scroll Bar
\*-----------------------------------*/

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background-color: #111111;
}

body::-webkit-scrollbar-thumb {
  border: 5px solid var(--smoky-black);
  background: hsla(0, 0%, 100%, 0.1);
  border-radius: 20px;
  box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
    inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
}

body::-webkit-scrollbar-thumb:hover {
  background: hsla(0, 0%, 100%, 0.15);
}

body::-webkit-scrollbar-button {
  height: 60px;
}

/*-----------------------------------*\
  Sidebar
\*-----------------------------------*/

.border {
  border: 1px solid red;
}

.section-border {
  border: 1px solid #363638;
}

.style-border {
  border: 3px solid #fec462;
}

.skill-border {
  box-shadow: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  background: linear-gradient(
      to bottom right,
      hsla(240, 1%, 26%, 0.251) 0%,
      hsla(240, 2%, 11%, 0) 100%
    ),
    hsl(240, 2%, 13%);
}

.blog_border {
  box-shadow: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  background: linear-gradient(
      to bottom right,
      hsla(240, 1%, 18%, 0.251) 0%,
      hsla(240, 2%, 11%, 0) 100%
    ),
    hsl(240, 2%, 13%);
  border-bottom: 2px solid #fec462;
}

.contact-bg {
  box-shadow: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  background: linear-gradient(
    to bottom right,
    hsl(240, 1%, 25%) 3%,
    hsl(0, 0%, 19%) 97%
  );
}

.has-scrollbar {
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.has-scrollbar::-webkit-scrollbar-track {
  background: hsl(240, 1%, 17%);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(45, 100%, 72%);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button {
  width: 20px;
}

.sidebar_animation {
  opacity: 1;
  visibility: visible;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#blog-card {
  margin: 20px 0px;
}

@media screen and (max-width: 500px) {
  .btn-79 {
    font-size: 0.75rem;
    color: white;
  }
}

#link {
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out 0.2s;
}

#portfolio_card:hover #link {
  opacity: 1;
  visibility: visible;
}

#modal {
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.5);
}

aside {
  backdrop-filter: blur(6px);
}

/* 
Float Skilll Card Animation
 */

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.tooltip {
  opacity: 0;
  transition: all ease-in-out 0.1s;
}

.relative:hover .tooltip {
  opacity: 1;
}

/* bg-[#202021] */