.raleway-thin > {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.raleway-italic {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: italic;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.montserrat-italic {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.open-sans-normal {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 10px;
}

.body--centered {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered {
  text-align: center;
}

.social-links {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 16px;
}

.social-link {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
}

.social-image {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  filter: grayscale(100%);
  transition: filter 1s ease;
}

.social-image:hover {
  filter: grayscale(0%);
}

.mask {
  margin-top: 0;
  padding-top: 0.2rem;
}

.bg--white {
  background-color: white;
}

.profile-pics {
  position: absolute;
  z-index: -1;
}

.my-name {
  font-size: calc(2.4rem + 4vw);
}

.profile-pic {
  position: relative;
  top: 0;
  left: 0%;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 50%;
  border: 0.4rem solid black;
  transform: scale(0.5);
  transition:
    scale 0.5s ease,
    transform 0.5s ease;
}

.hovered {
  transform: scale(1) translate3d(0, -20vh, 0);
}