#home {
  > a {
    align-items: center;
    display: flex;
    position: relative;
    text-decoration: none;
    @media (pointer: fine) {
      &: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;
      &:not(:first-of-type) {
        margin: 50px 0px 0px 0px;
      }
      > .background {
        background-color: var(--colorGreyTranslucent);
        border-radius: 0px 0px 30px 30px;
        height: calc(100% - 20px);
        left: 10px;
        position: absolute;
        top: 10px;
        width: calc(100% - 10px);
        z-index: -1;
      }
      > .border {
        border-bottom: 2px solid var(--colorGreen);
        border-left: 2px solid var(--colorGreen);
        border-radius: 0px 0px 0px 40px;
        left: 0px;
      }
      > .image-container {
        > .circle {
          height: 100px;
          width: 100px;
          @media (max-width: 600px) {
            border-radius: 40px;
            height: 80px;
            width: 80px;
          }
        }
        > img {
          width: 100px;
          @media (max-width: 600px) {
            width: 80px;
          }
        }
      }
    }
    &.level-two {
      padding: 20px 20px 20px 0px;
      &.first {
        padding: 30px 20px 20px 0px;
        > .border {
          border-radius: 0px 40px 0px 0px;
          border-top: 2px solid var(--colorGreen);
        }
      }
      > .border {
        border-right: 2px solid var(--colorGreen);
        right: 0px;
      }
      > .image-container {
        > .circle {
          height: 80px;
          width: 80px;
        }
        > img {
          width: 80px;
        }
      }
    }
    > .border {
      height: 100%;
      position: absolute;
      top: 0px;
      width: 40%;
    }
    > .image-container {
      position: relative;
      > .circle {
        background-color: var(--colorGreenTranslucent);
        border-radius: 50%;
        left: 0px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      > img {
        position: relative;
        @media (pointer: coarse) {
          &.hover {
            z-index: 2;
          }
        }
        &.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;
    }
  }
}