body {
  padding: 0;
  margin: 0;
  color: #f9f9f9;
  background-color: #000;
  overflow-x: hidden;
  font-family: "Josefin Sans", sans-serif;
}
:root{
  --bgcolor:#25252560;
  --br:2px solid #f9f9f940;
}
span,p,h1,h2{
margin: 0px;
padding: 0px;
}

a {
  color: #f9f9f9;
  text-decoration: none;
}

.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site_delete-cta.bkmrk{font-size: 14px; border-radius: 10px; background-color: red;}
.site_delete-cta.bkmrk:hover{background: darkred;}
.suggestions li.skeleton {
  background: linear-gradient(90deg, #00000030 25%, #e0e0e0 50%, #00000030 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent;
  height: 15px;
  margin: 12px;
  border-radius: 4px;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3; /* Light background */
  border-top: 3px solid #3498db; /* Blue color */
  border-radius: 50%;
  animation: spin 2s linear infinite;
  position: absolute;

}
.loader_spinner-container{position: relative; display: flex; justify-content: center; align-items: center;}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.suggestions li img.favicon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

button,
input {
  border: 0;
  outline: 0;
  font-size: 2em;
  color: #f9f9f9;
  background: transparent;
}
input:focus::-webkit-input-placeholder{
  color: #fff;
  font-size: 1em;
  font-family: "Josefin Sans", sans-serif;
}
input::placeholder {
  mix-blend-mode: difference;
  font-family: "Josefin Sans", sans-serif;
}
span {
  font-family: "Alata", sans-serif;
  
}
@keyframes mo{
  from{
    transform: translateX(0px);
  }
  to{
    transform: translateX(10px);
  }
}
.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #00000030;
  z-index: 10;
  width: 100%;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.suggestions li{
  font-size: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.highlighted {
  background-color: #00000060;
  cursor: pointer;
}

.suggestions li {
  padding: 10px;
  cursor: pointer;
}


.suggestions li:hover {
  background: #00000060;
}

#blob{
  z-index: -10;
  height: 300px;
  width: 300px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50em;
  animation: ro 20s ease infinite;
  background-image: linear-gradient(90deg, #5f2c82, #49a09d);
}
@keyframes ro{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.min-inr{
  width: 100vw;
  row-gap: 4em;
  height: 100vh;
  padding: 2% 0%;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(50px);
}
.nm-hld-scc{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tim-scc-hld{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Alata", sans-serif;
}
.tim-innr{
  width: 15em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 10px;
  border: var(--br);
  background-color: var(--bgcolor);

}
.min-tim{
  text-align: center;
  font-size: 1.3em;
}

.nm-hl {
  top: 50px;
  left: 50px;
  font-size: 2em;
  cursor: pointer;
}

.adn {
  font-family: "Alata", sans-serif;
  font-size: 1.5em;
}

.ggl {
  font-family: "Josefin Sans", sans-serif;
}

.min-bdy {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inp-hld{
  display: flex;
  align-items: center;
  transition: .3s ease;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-left:10px;
  padding-right:10px;
  flex-direction: row-reverse;
}
.inp-hld:hover{
  background-color: #25252560 !important;
}

.inp-hld input {
  height: 3em;
}
.inp-hld:hover button{ 
  animation: mo 1s ease infinite;
}
.bkmrk-scc-hld {
  padding: 10px;
  border-radius: 10px;
  border:2px solid #f9f9f940;
  background-color:var(--bgcolor);
}

.bkmrk-inr {
  display: flex;
}

.bkmrk-it-hld {
  width: 100%;
  display: flex;
  padding: 10px;
  gap: 2em;
  justify-content: flex-start;
}
.fst{
  width: 100%;
}
.bkmrk {
  margin: 8px;
/*  width: 100%;*/
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s ease;
  border:2px solid #f9f9f940;
  background-color: #25252560;
  font-family: "Alata", sans-serif;
}

.ico {
  margin-right: 10px;
}

.bkmrk:hover {
  border:2px solid #f9f9f9;
  background-color: #25252590;
}

.bkmrk-a:hover {
  text-decoration: none;
}

.bkmrk:hover .bkmrk-a {
  color: #f9f9f9;
}

.bkmrk:hover .ico {
  color: #f9f9f9 !important;
}
.ft{
   animation: bk .8s ease;
}
.tw{
   animation: bk 1.1s ease;
}
.thr{
   animation: bk 1.3s ease;
}
.fr{
   animation: bk 1.5s ease;
}
.fv{
   animation: bk 1.7s ease;
}
.si{
   animation: bk 2s ease;
}
@keyframes bk{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(-0px)  perspective(100px);
  }

}
.innr-sc{
  display: flex;
  flex-direction: column;
  row-gap: 2em;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
  backdrop-filter: blur(50px); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #151515; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #191919; 
}