@import "shared/sizes.less";
@import "shared/colors.less";

#my-face {
  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border: 2px @black solid;
  background-color: @black;
  box-shadow: 0 0 0 0.5em @primary;

  padding: 0.5rem;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 2rem;
  margin-top: -1rem;

  width: auto;
  max-height: calc(100vh - 7rem);
}

@media (max-width: @mobile-breakpoint) {

  #my-face {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;

    max-height: calc(100vh - 9rem);
  }

}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}


@import "shared/sizes.less";
@import "shared/colors.less";

#my-face {

  @border-chunk-size: 0.65em;

  border-radius: 50%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  box-shadow: 0 0 0 @border-chunk-size @primary;
  border: @border-chunk-size @secondary solid;

  padding: 1px;
  background-color: @secondary;

  /*
   * This needs extra margin at the bottom
   * because of its box shadow
   */
  margin-bottom: 2rem;
  margin-top: -1rem;

  width: auto;
  max-height: calc(100vh - 7rem);
}

@media (max-width: @mobile-breakpoint) {

  #my-face {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;

    max-height: calc(100vh - 9rem);
  }

}

#social-media-widget {
  display: flex;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1em;
}


Update my face border colors
Update my face border colors
