@media (min-width: 1024px) {
  .team {
    margin: 0 auto;
    width: 1024px;
  }
  .team__roles {
    flex-wrap: nowrap;
  }
}
* {
  font-family: Helvetica, sans-serif;
  box-sizing: border-box;
  margin: 0;
}

.width-wrapped {
  width: min(100%, 1024px);
  margin: 0 auto;
}

.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 1rem;
  height: fit-content;
  width: 100%;
  position: relative;
  margin: 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.1);
}
.contact hr {
  height: 1px;
  width: 100%;
  border: none;
  background: #d0d0d0;
}
.contact address {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-style: initial;
}
.contact__field ul {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
}
.contact__field ul li {
  margin-bottom: 0.25rem;
}
.contact__field a {
  width: fit-content;
}
.contact__field p {
  margin-bottom: 0.5rem;
}
.contact__field-address {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact__field label {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .contact {
    padding: 4rem 8rem;
  }
  .contact address {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.background-bubbles {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.background-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 12.5vmin;
  height: 17.5vmin;
  bottom: -160px;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #6A9B40, #58893D);
  animation: bubble-animation-1 15s infinite linear;
}
.background-bubbles li::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation-1 {
  0% {
    transform: translateY(0vh) scale(1) skew(calc(1 * 0.05rad), calc(1 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(1) skew(calc(1 * 0.05rad), calc(1 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(1) {
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #7FAE41, #5D8F3E);
  left: 5%;
}
.background-bubbles li:nth-child(1)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
.background-bubbles li:nth-child(2) {
  left: 15%;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #ED7A22, #E45E25);
  animation: bubble-animation-2 15s infinite linear;
  animation-delay: 2s;
  animation-duration: 17s;
}
.background-bubbles li:nth-child(2)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation-2 {
  0% {
    transform: translateY(0vh) scale(2) skew(calc(2 * 0.05rad), calc(2 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(1 * 600deg)) rotateZ(45deg) scale(2) skew(calc(2 * 0.05rad), calc(2 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(3) {
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #F8991C, #ED7A22);
  left: 20%;
  animation-delay: 4s;
}
.background-bubbles li:nth-child(3)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
.background-bubbles li:nth-child(4) {
  left: 35%;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #7FAE41, #5D8F3E);
  animation: bubble-animation--4 15s infinite linear;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.background-bubbles li:nth-child(4)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation--4 {
  0% {
    transform: translateY(0vh) scale(1.5) skew(calc(1.5 * 0.05rad), calc(1.5 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(1.5) skew(calc(1.5 * 0.05rad), calc(1.5 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(5) {
  left: 75%;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #ED7A22, #E45E25);
}
.background-bubbles li:nth-child(5)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
.background-bubbles li:nth-child(6) {
  left: 85%;
  animation: bubble-animation-3 15s infinite linear;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
@keyframes bubble-animation-3 {
  0% {
    transform: translateY(0vh) scale(3) skew(calc(3 * 0.05rad), calc(3 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(3) skew(calc(3 * 0.05rad), calc(3 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(7) {
  left: 32%;
  animation: bubble-animation-4 15s infinite linear;
  animation-delay: 7s;
}
@keyframes bubble-animation-4 {
  0% {
    transform: translateY(0vh) scale(4) skew(calc(4 * 0.05rad), calc(4 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(1 * 600deg)) rotateZ(45deg) scale(4) skew(calc(4 * 0.05rad), calc(4 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(8) {
  left: 55%;
  animation: bubble-animation--5 15s infinite linear;
  animation-delay: 15s;
  animation-duration: 40s;
}
@keyframes bubble-animation--5 {
  0% {
    transform: translateY(0vh) scale(0.5) skew(calc(0.5 * 0.05rad), calc(0.5 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(0.5) skew(calc(0.5 * 0.05rad), calc(0.5 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(9) {
  left: 25%;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #7FAE41, #5D8F3E);
  animation: bubble-animation--25 15s infinite linear;
  animation-delay: 2s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.background-bubbles li:nth-child(9)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation--25 {
  0% {
    transform: translateY(0vh) scale(0.25) skew(calc(0.25 * 0.05rad), calc(0.25 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(0.25) skew(calc(0.25 * 0.05rad), calc(0.25 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(10) {
  left: 95%;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #F8991C, #ED7A22);
  animation: bubble-animation-4 15s infinite linear;
  animation-delay: 11s;
}
.background-bubbles li:nth-child(10)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation-4 {
  0% {
    transform: translateY(0vh) scale(4) skew(calc(4 * 0.05rad), calc(4 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(1 * 600deg)) rotateZ(45deg) scale(4) skew(calc(4 * 0.05rad), calc(4 * 5deg));
    opacity: 0.25;
  }
}
.background-bubbles li:nth-child(11) {
  left: 0;
  height: calc(1.1 * 3.5rem);
  width: calc(1.1 * 2.5rem);
  border-radius: 4px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom right, #ED7A22, #E45E25);
  animation: bubble-animation-3 15s infinite linear;
  animation-delay: 11s;
}
.background-bubbles li:nth-child(11)::after {
  content: "";
  position: absolute;
  top: calc(1.1 * 1rem / 4);
  left: calc(1.1 * 1rem / 4);
  height: calc(1.1 * 3rem);
  width: calc(1.1 * 2rem);
  background: white;
  border-radius: 2px;
}
@keyframes bubble-animation-3 {
  0% {
    transform: translateY(0vh) scale(3) skew(calc(3 * 0.05rad), calc(3 * -10deg));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-150vh) rotate(calc(-1 * 600deg)) rotateZ(45deg) scale(3) skew(calc(3 * 0.05rad), calc(3 * 5deg));
    opacity: 0.25;
  }
}

.download {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.download hr {
  margin-top: 2rem;
  background: #2c2c2c;
  height: 1px;
  width: 100%;
  border: none;
}
.download__alternatives {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.download__alternatives-buttons {
  display: flex;
  gap: 1rem;
}
.download__bottom {
  position: absolute;
  bottom: -4rem;
  width: 150%;
  left: -25%;
}
.download__button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: fit-content;
  width: fit-content;
  padding: 1rem 2rem;
  background: #00b2ff;
  border-radius: 0.5rem;
  color: white;
  text-decoration: none;
}
.download__button:hover {
  background: #00b2ff;
}
.download__button-icon {
  font-size: 1.75rem;
}
.download__button__button-text {
  font-size: 1.25rem;
  font-weight: bold;
}
.download__button > .fa-apple {
  position: relative;
  top: -2px;
}
.download__crown {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}
.download__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
  width: 100%;
  padding: 2rem;
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.1);
  text-align: center;
}
.download__main.show-desktop {
  display: none;
}
.download__main.show-mobile {
  display: flex;
}
.download__header {
  margin: 0;
  font-size: 3rem;
}
.download__sub-header {
  margin: 0.5rem 0 2rem;
  font-size: 1.25rem;
  font-weight: normal;
}
.download__wrapper {
  grid-area: splash;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (min-width: 1024px) {
  .download__main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem;
  }
  .download__main.show-desktop {
    display: flex;
  }
  .download__main.show-mobile {
    display: none;
  }
}
body {
  overflow: hidden;
}

.site-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header   " "container";
  gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

.container {
  grid-area: container;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas: "content" "footer";
  width: 100%;
  position: relative;
  z-index: 0;
  overflow-y: auto;
  background: url("https://static.riothub.com/web/splash-background.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: content;
  width: min(100%, 1024px);
  margin: 0 auto;
  position: relative;
  z-index: 4;
}

@media (min-width: 1024px) {
  .container {
    padding: 0;
  }
}
.block {
  display: block;
}

.legal-content {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  width: fit-content;
  max-width: 1024px;
  margin: 2rem auto;
  background: white;
}
.legal-content address, .legal-content p, .legal-content li {
  line-height: 1.5rem;
}
.legal-content li {
  margin-bottom: 0.5rem;
}
.legal-content .updated {
  color: #3d3d3d;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;
}
.legal-content main, .legal-content section {
  width: 100%;
  padding: 2rem;
}
.legal-content section:first-of-type {
  padding-top: 4rem;
}
.legal-content section:last-of-type {
  padding-bottom: 4rem;
}
.legal-content address {
  font-style: normal;
}
.legal-content section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.legal-content .section-summary {
  font-style: italic;
  background: #f2f2f2;
  padding: 1rem;
  border-radius: 0.5rem;
}
.legal-content table, .legal-content tr, .legal-content th, .legal-content td {
  border: 1px solid #a5a5a5;
  border-collapse: collapse;
}
.legal-content th, .legal-content td {
  padding: 1rem;
}
.legal-content th {
  background: #f2f2f2;
}

@media (min-width: 1024px) {
  .legal-content {
    margin: 4rem auto;
  }
  .legal-content main, .legal-content section {
    padding: 2rem 4rem;
  }
}
.header {
  grid-area: header;
  height: 6rem;
  width: 100%;
  z-index: 3;
  background: white;
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.25);
}
.header__container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: min(100%, 1024px);
  height: 100%;
  position: relative;
  padding: 0 1rem;
  margin: 0 auto;
}
.header__sign-in {
  display: flex;
  align-items: center;
  justify-self: flex-end;
  gap: 0.8ch;
  color: #1c1c1c;
  font-weight: bold;
  font-size: 1.25rem;
  text-decoration: none;
}
.header__sign-in i {
  font-size: 1.5rem;
}
.header__sign-in:hover {
  color: #3f3f3f;
}
.header-spacer {
  display: none;
}
.header a {
  width: fit-content;
}
.header img {
  position: relative;
  height: 6rem;
  width: 12rem;
}
.header .section__dice--one, .header .section__dice--two {
  display: none;
}
.header .section__dice--one {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: -1rem;
  transform: rotate(4deg);
}
.header .section__dice--two {
  position: absolute;
  z-index: 4;
  right: 4.5rem;
  bottom: -1.5rem;
  perspective: 200px;
  transform: rotate(-6deg);
}

@media (min-width: 1024px) {
  .header__container {
    grid-template-columns: 1fr auto 1fr;
  }
  .header-spacer {
    display: block;
  }
  .header .section__dice--one, .header .section__dice--two {
    display: block;
  }
}
.about {
  grid-area: about;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.about__section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.5rem;
  text-align: left;
  height: 400px;
  width: 250px;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 3;
  isolation: isolate;
  background: white;
  border-radius: 1rem;
}
.about__section-wrapper {
  padding: 1rem;
  position: relative;
  z-index: 1;
  background: url("https://static.riothub.com/web/splash-background.png");
  background-position: center;
  background-size: cover;
  border-radius: 2rem;
  transition: transform ease-out 0.3s;
}
.about__section-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(0, 0, 0, 0.125);
  border-radius: 2rem;
}
.about__section-wrapper:nth-child(1) {
  transform: rotate(-3deg);
}
.about__section-wrapper:nth-child(1):hover {
  transform: rotate(3deg) scale(1.025);
  z-index: 3;
}
.about__section-wrapper:nth-child(2) {
  transform: rotate(-1deg);
}
.about__section-wrapper:nth-child(2):hover {
  transform: rotate(2deg) scale(1.025);
  z-index: 3;
}
.about__section-wrapper:nth-child(3) {
  transform: rotate(2deg);
}
.about__section-wrapper:nth-child(3):hover {
  transform: rotate(-2deg) scale(1.025);
  z-index: 3;
}
.about__section h2 {
  font-size: 1.5rem;
  display: inline-block;
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid lightgray;
}
.about__section p {
  display: inline-block;
  line-height: 1.5rem;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  height: 100%;
  margin: 4rem 0 0rem;
}

.interest {
  grid-area: interest;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
  }

  .interest {
    display: flex;
    justify-content: flex-end;
  }
}
.footer {
  grid-area: footer;
  width: 100%;
  background: linear-gradient(to bottom right, #3f3f3f, #1c1c1c);
  padding: 1rem;
  z-index: 2;
  color: white;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
}
.footer__art {
  position: absolute;
  bottom: -10rem;
  left: 0;
  width: 100%;
  z-index: 1;
}
.footer__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "links" "legal";
  gap: 2rem;
  position: relative;
  z-index: 2;
}
.footer a, .footer a:hover, .footer a:focus {
  color: white;
  text-decoration: none;
}
.footer__legal {
  grid-area: legal;
  text-align: center;
  font-size: 0.8rem;
}
.footer__links {
  grid-area: links;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.footer__links-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.footer__links-section h6 {
  font-size: 1rem;
}
.footer__links-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}
.footer__links-section ul a:hover {
  text-decoration: underline;
}
.footer__links-section ul, .footer__links-section li {
  list-style: none;
  text-align: center;
  margin: 0;
}
.footer__social-link {
  transition: all ease-out 0.25s;
}
.footer__social-link--twitter:hover {
  color: #00afff !important;
}
.footer__social-link--youtube:hover {
  color: red !important;
}
.footer__social-link--facebook:hover {
  color: #0084ff !important;
}
.footer__socials {
  grid-area: socials;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
.footer__socials a {
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .footer {
    position: relative;
    padding: 2rem 1rem;
  }
  .footer__links {
    gap: 4rem;
  }
}
.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: team;
  width: min(100%, 1025px);
  padding: 2rem 1rem;
  margin: 4rem 0;
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.1);
}
.team__empty-section {
  text-align: center;
  background: lightgray;
  padding: 1rem;
  border-radius: 1rem;
}
.team__heading {
  text-align: center;
  margin: 0 0 2rem;
  font-size: 2.5rem;
}
.team__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.team__member {
  border: 1px solid lightgray;
  height: 325px;
  width: 200px;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}
.team__member-information {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 1rem;
}
.team__member-name {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
.team__member-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  background: white;
  border: 1px solid lightgray;
  border-radius: 50%;
  color: inherit;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all ease-out 0.25s;
}
.team__member-social-link--linked-in {
  color: #0c6598;
  box-shadow: 0 0 0 2px #0c6598;
}
.team__member-social-link--linked-in:hover {
  box-shadow: 0 0 0 4px #0c6598;
}
.team__member-socials {
  display: flex;
  gap: 1rem;
  height: fit-content;
  position: absolute;
  top: calc(200px - 0.75rem);
  left: 50%;
  transform: translateX(-50%);
}
.team__member-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #595959;
  text-align: center;
}
.team__member-picture-container {
  height: 198px;
  width: 198px;
}
.team__member-picture-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.team__role-selector {
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  font-size: 1rem;
}
.team__role-selector--active::after {
  content: "";
  height: 2px;
  width: calc(100% + 1rem);
  position: absolute;
  left: -0.5rem;
  top: calc(100% + 0.25rem);
  background: #00b2ff;
}
.team__roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  position: relative;
  padding: 0 2rem;
  margin-bottom: 4rem;
}
.team__roles::after {
  content: "";
  position: absolute;
  bottom: -2rem;
  left: 0;
  width: 100%;
  margin: 0 auto;
  height: 1px;
  background: #ededed;
}

/*# sourceMappingURL=style.css.map */