.titillium-web-regular {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  font-style: normal;
}




/* sudo elements */
*::before. ::after {
  /* outline: 1px solid lime; */
}

* {
  margin:0;
  padding:0;
  /* outline: 1px solid lime; */
}

:root {
  --searchbtn: #888;
  --searchbtnhover: #999;


}

#top-bar {
  position:absolute;
  height:5rem;
  width:100%;
  background: linear-gradient(0deg, rgba(19,19,19,1) 0%, rgba(0,0,0,1) 100%);
  display:flex;
  align-items: center;
  justify-content:space-around;

}

/* ================================================ */
/* NAV SEARCH BAR */
/* ================================================ */

#masthead * {
  /* outline: 1px solid lime; */
}



#search-bar-container {
  display:flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: var(--navheight);
  margin-right: 1rem;

}

.search-bar {
  --size:2rem;
  --padding: 1px;
  --expanded-width: 10rem;
  display:flex;
  justify-content: flex-end;
  align-items: center;
  background: none;
  border:1px solid #000;
  border-radius:100px;
  overflow: hidden;
  padding: var(--padding);
  margin: right;
  width: var(--size);
  height: var(--size);
  max-width: 100%;
  transition: all 500ms ease-in-out;
  transition-property: border, width;
  margin:0 0.5rem 0 0;
}

.search-bar-open {
  width: var(--expanded-width);
  border:1px solid #444;
}

.search-input {
  font-size: calc(var(--size) / 2);
  caret-color: var(--red);;
  background-color: transparent;
  border:none;
  width: calc(var(--expanded-width) - (var(--size) * 1.4));
  transition: opacity 0.5s;
  transition-property: color;
  padding-top:1.5rem;
  padding-right: 0;

}

.search-input::placeholder {
  content: '';
  color:var(--navlinks);
}

.search-bar input:focus {
    outline: none;
    color:#fff;
    border:1px solid green;
}

.search-submit {
  flex:none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--size) /2);
  color:var(--searchbtn);
  background: none;
  border-radius: 50%;
  border: none;
  width: calc( var(--size)  );
  aspect-ratio:1;
  cursor:pointer;
  transition: 250ms color ease-in;
}

.search-submit:hover {
  color:var(--searchbtnhover);
}



/* ================================================ */
/* GENERIC SEARCH BAR */
/* ================================================ */



#generic-search-bar-container {
  --size:2.5rem;
  --padding: 1px;
  --expanded-width: 15rem;
  display:flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  height: var(--size);



}

.generic-search-bar {
  display:flex;
  justify-content: flex-end;
  align-items: center;
  background: #000;
  border:1px solid #666;
  border-radius:100px;
  overflow: hidden;
  padding: var(--padding);
  width: var(--size);
  height: var(--size);
  max-width: 100%;
  transition: all 500ms ease-in-out;
  transition-property: border, width;

}

.generic-search-bar-open {
  width: var(--expanded-width);
  /* border:1px solid var(--green2); */
  /* border:1px solid rgba(32,177,165,0.75); */
  border:1px solid #444;
}

.generic-search-input {
  font-size: calc(var(--size) / 2.2);
  caret-color: var(--red);
  background-color: transparent;
  border:none;
  width: calc(var(--expanded-width) - (var(--size) * 1.4));
  transition: opacity 0.5s;
  transition-property: color;
  padding-top:1.5rem;
  padding-right: 0;
}

.generic-search-input::placeholder {
  content: '';
  color:var(--navlinks);
}



.generic-search-bar input:focus {
    outline: none;
    color:#fff;
}

.generic-search-submit {
  flex:none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--size) /2.2);
  /* color:var(--searchbtn); */
  color:var(--searchbtn);
  background: none;
  border-radius: 50%;
  border: none;
  width: calc( var(--size)  );
  aspect-ratio:1;
  cursor:pointer;
  transition: 250ms color ease-in;


}

.generic-search-submit:hover {
  color:var(--searchbtnhover);
}


.generic-search-submit i {
    /* border:1px solid yellow; */
    padding:0 0 0 .25rem;
}