#home {
  > a {
    align-items: center;
    display: flex;
    position: relative;
    text-decoration: none;
    &:hover {
      cursor: pointer;
      > div {
        .circle {
          box-shadow: 0px 0px 4px 2px var(--colorGreen);
        }
        > img {
          &.hover {
            z-index: 2;
          }
        }
      }
    }
    &.level-one {
      padding: 30px 0px 30px 20px;
      top: 2px;
      > .border {
        border-bottom: 2px solid var(--colorGreen);
        border-left: 2px solid var(--colorGreen);
        border-radius: 0px 0px 0px 40px;
        left: 0px;
        margin: 0px 40px 0px 0px;
      }
      &:not(:first-of-type) {
        margin: 50px 0px 0px 0px;
      }
    }
    &.level-two {
      padding: 30px 20px 30px 0px;
      &.first {
        > .border {
          border-radius: 0px 40px 0px 0px;
          border-top: 2px solid var(--colorGreen);
        }
      }
      > .border {
        border-right: 2px solid var(--colorGreen);
        margin: 0px 0px 0px 40px;
        right: 0px;
      }
    }
    > .border {
      height: 100%;
      position: absolute;
      top: 0px;
      width: calc(100% - 40px);
    }
    > div:not(.border) {
      position: relative;
      > .circle {
        background-color: var(--colorGreenTranslucent);
        border-radius: 50px;
        height: 100px;
        left: 0px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100px;
        @media (max-width: 600px) {
          border-radius: 40px;
          height: 80px;
          width: 80px;
        }
      }
      > img {
        width: 100px;
        position: relative;
        @media (max-width: 600px) {
          width: 80px;
        }
        &.no-hover {
          position: absolute;
          inset: 0;
          z-index: 1;
        }
      }
    }
    > h1 {
      margin: 0px 0px 0px 20px;
    }
    > h2 {
      flex: 1;
      margin: 0px 20px 0px 0px;
      text-align: right;
    }
  }
}