@import "@/src/styles/helpers.scss";

.section {
  @include lightSection;
  @include regularFont;
}

.technology {
  font-family: 'Ubuntu Mono', monospace;
  font-size: 1em;
  color: $black;
  margin: 0.1em;
  padding: 0.1em 0.3em;
  background-color: $gray;
  border-radius: 2px;

  :hover{
    background-color: opacify($gray, 0.35);
  }
}

.projectDisplay {
  @include darkSection;

  display: flex;

  flex-direction: row;

  @media (max-width: 1280px) {
    flex-direction: column;
  }

  .imageAndTech {
    flex-basis: calc(100% / 2);
    margin: 1em;
    display: flex;

    .imageContainer {
      margin: auto 0;
      position: relative;
      width: 100%;
      @include nextImg;
    }

    .tech {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
  }

  .text {
    flex-basis: calc(100% / 2);
    padding: 2em 2em;


    .links {

      display: flex;
      flex-direction: row-reverse;
      gap: 2em;

      .icon {
        color: $white;
        filter: drop-shadow(7px 7px 5px $red);
        $size: 4em;
        width: $size;
        height: $size;
        svg {
          width: $size;
          height: $size;
        }

        :hover {
          color: $gray;
        }
      }
    }
  }
}

.otherLinks {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  width: fit-content;
}