/*
*     ___    ____  ____  __  ________
*    /   |  / __ )/ __ \/ / / /_  __/
*   / /| | / __  / / / / / / / / /   
*  / ___ |/ /_/ / /_/ / /_/ / / /    
* /_/  |_/_____/\____/\____/ /_/     
*                                   
*/

:root {
  --tab-start-bg: var(--lsuawm-bg);
  --tab-unselected-bg: var(--lsuawm-darkgray);
  --tab-unselected-fg: var(--lsuawm-gray);
  --tab-selected-bg: var(--lsu-purple);
  --tab-selected-fg: white;
  --tab-hover-bg: var(--lsu-purple);
}

h2 {
  font-size: 32px;
}

.peoplebar-container {
  width: 100vw;
  background-image: linear-gradient(to bottom, var(--tab-start-bg) 40%, var(--tab-unselected-bg) 95%);
}

.peoplebar {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.advisor-cheat::after {
  content: "Faculty Advisor";
}

.vp-cheat::after {
  content: "Vice President";
}

.hidden {
  display: none;
}


@media screen and (max-width:450px) {
  .card {
    min-width: 33vw !important;
    flex-grow: 1;
  }
}


/*have to change style at 900px*/
@media screen and (max-width:900px) {
  .card span.namefrag {
    font-size: 14pt !important;
  }

  .card img {
    scale: 0.9;
  }
}


.tab-content {
  /* see sixty-fourty idea in index */
  width: 100%;
  align-content: center;
  display: none;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto auto;
}


.tab-content.active {
  display: grid;
}

@media screen and (max-width:750px) {
  .tab-content {
    grid-template-columns: 100%;
  }

  .card span.namefrag {
    margin-left: 20%;
    margin-right: 20%;
  }

  .card img {
    scale: 0.75;
  }

  .card {
    font-size: 10pt !important;
  }

  .advisor-cheat::after {
    content: "Advisor";
  }

  .vp-cheat::after {
    content: "VP";
  }

  #tab-content-container {
    height: 850px !important;
  }

  .aboutline {
    text-align: center;
    margin: auto;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
  }

}

#tab-content-container {
  height: 600px;
  margin-top: -2px;
  padding: 2%;
  padding-top: 20px;
  margin-bottom: 0;
  text-align: center;
  align-content: center;
}

.card {
  border: 0;
  width: 20vw;
  max-width: 250px;
  font-size: 12pt;
  color: var(--tab-unselected-fg);
  padding: 10px;
  background-image: linear-gradient(to bottom, var(--tab-start-bg) 40%, transparent 95%);
  background-color: var(--tab-unselected-bg);
  transition: background-color 0.3s, color 0.3s;
  font-family: Verdana, Helvetica, sans-serif;
}

.card:hover,
.card:focus {
  background-color: var(--tab-hover-bg);
}

.card:active,
.card.active {
  background-color: var(--tab-selected-bg);
  color: var(--tab-selected-fg);
}

.card span.namefrag {
  font-family: 'Times New Roman', Times, serif;
  color: var(--lsuawm-fg);
  font-weight: bold;
  font-size: 18pt;
}

.card img {
  max-width: 15vw;
  /*change when there's a diff # of ppl */
  height: 120px;
  width: 120px;
  object-fit: cover;
  border-radius: 120px;
  filter: drop-shadow(0 0 10px #0005)
}

.spacer {
  margin: 0 !important;
  flex-grow: 1;
  width: 100%;
}

footer,
.spacer,
#tab-content-container {
  transition: background-color 0.5s linear;
  background: var(--tab-unselected-bg);
}

.spacer.active,
footer.active,
#tab-content-container.active {
  background-color: var(--tab-selected-bg);
}




.tab-content p {
  text-align: left;
  font-size: 14pt;
  line-height: 20pt;
  color: var(--tab-selected-fg);
}

.tab-content a {
  color: var(--tab-selected-fg);
}



.biopic img {
  max-width: min(100%, 80vw);
  object-fit: cover;
  border-radius: 100%;
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  transform: scale(1.05);
}

.biopic {
  max-width: min(100%, 80vw);
  max-height: 400px;
  aspect-ratio: 1;
  margin: auto;
  outline: 2px solid var(--lsuawm-gray);
  outline-offset: 10px;
  border-radius: 100%;
  filter: drop-shadow(0 0 20px #000c);
}

.tab-content .text {
  background-color: transparent;
  border: none;
  margin: 2%;
  color: var(--tab-selected-fg);
}

.aboutline {
  font-size: 11pt;
}