/* z-indices
Instead of having magic z-indecies everywhere, these are stored here instead
to be easier to comprehend */
/* Media query sizes
Below are certain thresholds for mobile sizes. Mobile layouts need to be
tweaked on certain pages for smaller devices. 
*/
#team-photo-container {
  display: flex;
  align-items: center;
  margin: 2% 0%;
  height: 20%;
  width: 90%;
  align-self: center; }
  #team-photo-container img {
    width: 100%;
    border-radius: 5px; }

/* ----- */
/* ABOUT */
/* ----- */
#about-container {
  display: flex;
  justify-content: center;
  align-items: center; }
  #about-container img {
    height: 100px; }
  #about-container p {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    text-align: center; }

.light-theme #about-container p {
  color: #003333;
  background-color: white; }

.dark-theme #about-container p {
  color: white;
  background-color: #333333; }

@media only screen and (max-width: 1000px) {
  #about-container {
    padding: 3%; }
    #about-container img {
      display: none; }
    #about-container p {
      margin: 0; } }

/* --------- */
/* SUB TEAMS */
/* --------- */
.sub-team-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #003C3C; }
  .sub-team-container:nth-of-type(even) {
    flex-direction: row-reverse; }
  .sub-team-container .sub-team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: white;
    color: white;
    width: 50%;
    opacity: 0;
    transform: translateY(20px); }
    .sub-team-container .sub-team-info h2,
    .sub-team-container .sub-team-info p {
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      text-align: center; }
    .sub-team-container .sub-team-info h2 {
      opacity: 0;
      transform: translateY(-10px); }
    .sub-team-container .sub-team-info p {
      opacity: 0;
      transform: translateY(10px); }
    .sub-team-container .sub-team-info.show {
      opacity: 1; }
      .sub-team-container .sub-team-info.show h2 {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s; }
      .sub-team-container .sub-team-info.show p {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.6s; }
  .sub-team-container .sub-team-photo {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    opacity: 0;
    transition: 1s opacity 1s ease-out; }
    .sub-team-container .sub-team-photo.show {
      opacity: 1;
      transform: translateY(0); }
    .sub-team-container .sub-team-photo img {
      width: 100%; }

@media only screen and (max-width: 1000px) {
  .sub-team-container {
    flex-direction: column !important; }
    .sub-team-container .sub-team-info {
      width: 90%; }
      .sub-team-container .sub-team-info p {
        margin-bottom: 5vh; }
    .sub-team-container .sub-team-photo {
      width: 100%; }
  #team-photo-container {
    height: 24vh;
    width: 99%; }
    #team-photo-container img {
      height: 100%; } }