/* Search */
.search
{
  width: 100%;
  position: relative;
  margin: 20px 0 25px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search > input
{
  width: 100%;
  padding: 12px 0;
  border-radius: 5px;
  border: none;
  text-indent: 15px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 0 5px 1px rgba(0, 128, 0, 0.347);

}

.search > img
{
  position: absolute;
  top:21%;
  right:.5rem;
  border-left: 1px solid black;
  padding-left: 5px;
}

.search > input::placeholder
{
  color: rgb(0, 0, 0);
  font-size: 14px;
}

/* Tool tip */

.tool-tip
{
  position: absolute;
  top:12px;

  padding: .2rem 1rem;
  border-radius: 8px;
  background-color: var(--text-color);
  color: rgb(4, 182, 4);
  opacity: 0;
  border: none;
  transition: opacity .15s, top .25s;

  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.tool-tip::before
{
  content: '';
  position: absolute;
  bottom: -65%;

  border-width: 10px;
  border-style: solid;
  border-color: var(--text-color) transparent transparent transparent;
}

#light-dark-mode:hover ~ .tool-tip {
  top: -145%;
  opacity: 1;
}

.search:hover > .tool-tip
{
  top: -155%;
  opacity: 1;
}



/* Project Container */
.project-aside
{
  flex: 30%;
  max-width: 389px;
  z-index: 2;
  padding: 12.5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-right: 15px;
  border: 1px solid transparent;

  animation: shine 4s infinite;
  transition: box-shadow .25s ease;
}

/* @keyframes border-animation {
  0%{
    border-top-color: var(--text-color);
  }
  25%{
    border-top-color: transparent;
    border-right-color: var(--text-color);
  }
  50%{
    border-right-color: transparent;
    border-bottom-color: var(--text-color);
  }
  75%{
    border-bottom-color: transparent;
    border-left-color: var(--text-color);
  }
  100%{
    border-left-color: transparent;
    border-top-color: var(--text-color);
  }
} */



.aside-project-container {
  display: flex;
  column-gap: 15px;
  align-items: center;
  margin: 15px 0;
}

/* Project aside image */
.aside-project-banner{
  overflow: hidden;
  border-radius: 15px;
  width: 100px;
  height: 136px;
}

.aside-project-banner > img{
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
  transition: transform .25s, object-position .15s;
}

.aside-project-banner > img:hover{
  transform:scale(1.2);
  object-position: 0px 10px;
}

/* Aside Project Info */
.aside-project-container-info a 
{
  text-decoration: none;
}

.button-all-projects
{
  width: 100%;
  padding: 9px 0px;
  border-radius: 5px;
  border: none;
  background-color: green;
  color: var(--title-color);
  cursor: pointer;

  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s;

  margin: 5px 0;
}

.button-all-projects:hover
{
  
  background-color: rgb(1, 90, 1);
}