#logo {
  width: 32px;
  height: auto;
}

#logo:hover,
#logo:active {
  @media screen and (min-width: 1024px) {
    scale: 4;
  }
}

#textContainer {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media screen and (max-width: 1024px) {
    align-items: flex-start;
  }
}

#textContainer > * {
  margin-top: 0.75rem;
}

#clickMe,
#hoverTip {
  @media screen and (max-width: 1024px) {
    display: none;
  }
}

#desktopTip {
  display: none;

  @media screen and (max-width: 1024px) {
    display: block;
  }
}

.project {
  border-radius: 2rem;
  border: 5px dashed var(--primary-color);

  display: flex;

  flex-direction: row;

  height: 30vh;
  width: 40vw;

  /* @media screen and (max-width: 1400px) {
    width: 80vw;
  } */

  @media screen and (max-width: 1024px) {
    height: unset;
    width: 90vw;
    flex-direction: column;
  }

  margin: 1rem;
}

.project img {
  border-radius: 1.85rem 0 0 1.85rem;
  height: 100%;
  width: 100%;
  object-fit: cover;

  @media screen and (max-width: 1024px) {
    border-radius: 1.85rem 1.85rem 0 0;
    width: 100%;
    height: unset;
  }
}

.project > * {
  flex: 1;
}

.projectDescription {
  padding: 1rem;
}

.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.hardwareProjects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.hardwareProjects > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.hardwareProjects > div img:first-of-type {
  height: max(12vh, 12vw);
  width: auto;
}