/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

@import '../index/index.module.scss';

.teamContainer {

  .teamIntro {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;

    h1 {
      margin-bottom: 32px;
    }

    p {
      line-height: 28px;
      margin-bottom: 8px;
    }

    .image img {
      width: 200px;
      margin-bottom: 16px;
    }
  }

  .teamMembers {
    background-color: #f5f5f5;
    --color-white: #f5f5f5;
    --color-black: black;
    --color-primary: #3AA2A5;
    --color-secondary: #282c34;
    --color-tertiary: #435B5B;
    --color-secondary-darken: #20232a;

    h2 {
      color: var(--color-primary);
    }

    .memberSubtitleContainer {
      text-align: left;
      margin: 32px 8%;
      color: var(--color-white);
      h3 {
        padding: 8px 0;
      }
      .border {
        height: 1px;
        border-bottom: 1px solid var(--color-white);
      }
      @media (min-width: 997px) {
        margin: 32px 200px;
      }
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .memberCard {
      width: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 32px;
      text-align: center;
    }

    .memberCard .imageContainer {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
    }

    .memberCard .imageContainer img {
      width: 100%;
    }

    .memberName {
      color: var(--color-primary);
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      padding: 16px 0;
    }

    .memberDescription {
      line-height: 125%;
      margin-bottom: 8px;
      a {
        color: var(--color-primary);
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
      }
    }

    .memberRoles li {
      border: 1px solid white;
      font-size: 13px;
      padding: 2px 6px;
      margin: 3px;
      border-radius: 14px;
      opacity: .8;
    }

    .memberLinks {
      display: flex;
      justify-content: center;
    }

    .memberLinks a>* {
      font-size: 32px;
      color: var(--color-white);
      margin: 16px 6px;
      transition: color .25s;
      &:hover, &:active {
        color: var(--color-primary);
      }
    }
  }
}