@import url('./root.css');

    .binaryContainer {
    transform: translate3d(0, 0, 0) scale(1);
    contain: layout paint;
    will-change: transform;

      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    .binary {
      z-index: 100;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      color: #0f0;
    }

    .leftBinary {
      text-align: right;
    }

    .rightBinary {
      text-align: left;
    }

    .binaryPosition {
      z-index: -100;
      transform: translateY(calc(-19.3ch))
      /*position: fixed;*/
      /*top: 10px;*/
      /*right: 10px;*/
    }





.color2-trans{
  background-color: transparent !important;
  opacity: 0;
}



.fade-in {
      /*z-index:1;*/
  opacity: 0;
  animation: fadeInBackground 1.5s ease-in forwards;
  animation-delay: 2s;
}



/*logo*/
.center-pre span {
background-color: var(--black) !important;

}


.center-pre span * {
background-color: var(--black) !important;

}


.code-logo-color-1{
  color: var(--light-green);

  background-color: var(--black) !important
}

.code-logo-color-2{
  color: var(--dark-green);
  background-color: var(--black) !important
}

.code-logo-color-3{
  color: var(--light-black);

  background-color: var(--black) !important
}
.code-logo-color-4{
  color:#00A;

  background-color: var(--black) !important
}

.code-logo-color-5{
color:var(--light-green);

  background-color: var(--black) !important

}

.code-logo-color-6{
color:var(--light-green);

  background-color: var(--black) !important

}

.projects {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 10px 20px;
  justify-content: center;
  margin-top: 4lh;
  background-color: var(--dark-grey);
}

.project {
  z-index: 1;
  border: 1px solid;
  margin: var(--small-pad);
  padding: var(--small-pad);
  width: auto;
  height: auto;
  background-color: var(--grey);
}

.project:not(:last-child) {
  margin-bottom: 0;
}

.project:hover{
background-color: var(--light-black);
color: var(--turqoise);

}


.vertical-line{
  font: inherit;
}



@media (max-width: 768px) {
    .projects{
      padding: 5px 5px;
    }


}