@font-face {
  font-family: 'flankergriffo';
  src: url('fonts/FlankerGriffo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'flankergriffo', serif;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header {
  background-color: #EAEAE4; 
  padding: 1rem;
  text-align: center;
}

header h1 {
  margin: 0.5rem 0;
}

nav {
background-image:linear-gradient(to bottom left,  #ff00ff 10%,  #ff0000 30%,  #ffff00 50%,  #00ff00 70%,#00ffff 90%);
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

nav a {
  text-decoration: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
background-color:rgba(24, 10, 22, .4);
  transition: background-color 0.3s ease;
}

nav a:hover, nav a:focus {
  background-color: rgba(74, 68, 88, .4);
}

#profile {
border-radius: 50%;
  width: 30px;
  height: 30px;
  position:absolute;
  top: 1em;
  right: 1em;
  border:solid darkgrey 2px;
  cursor:pointer;
}

#profileMenu {
position: absolute;
  top: calc(1em + 40px);
  right: 1em;
  background-color: white;
  border-radius: 4px;
  z-index:1000;
}

#profileMenu > div, #profileMenu > a > div {
    padding: 0.5rem;
    cursor: pointer;
    font-family:'flankergriffo';
  font-size:.75em;
}

#profileMenu > div:hover, #profileMenu > a > div:hover {
background-color:lightgrey;
  
}

a {
text-decoration: none;
color:inherit;
}

#signupForm input, #signupForm select {
    display: block;
    margin: 3px;
}

#pfp, .pfp {
width:50px;
height:50px;
border-radius:50%;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  #accountInfo table td:nth-child(1) {
    width:60%;
    text-align:left;
  }
    #accountInfo table td:nth-child(2) {
    width:40%;
    text-align:right;
  }

  #superSecretStuffHere td {
    width:150px;
    text-align:center;
  }

  .bigPFP {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    vertical-align: middle;
    border: solid darkgrey 3px;
    margin-top: 5px;
  }
  
.staffMember {
    display: flex; 
    width: 200px;
    margin: 5px;
    flex-direction: column;
    padding: 1rem;
    border-radius: 1rem;
    height: 300px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    align-items: center;
}
.staffMember > p {
    margin: 4px;
}
  .staffBio {
      flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;      /* IE/Edge */
    scrollbar-width: none;         /* Firefox */
    min-width: min-content;
    font-size:small;
  }
div .staffBio::-webkit-scrollbar {
      display: none;
}
  .staffBioWrapper {
   background: white;
    border-radius: 0.5rem;
    margin-top: auto;
    padding: 1em;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}


  #staffHolder > div > div {
    display:flex;
    flex-wrap:wrap;
  }

  .pronouns {
    font-size:.8em;
    font-style:italic;
  }

.staffMember:nth-child(9n+1) {
    background-color: #df9892;
}
.staffMember:nth-child(9n+1) .pronouns {
    color:rgb(128, 61, 55);
}
.staffMember:nth-child(9n+1) .bigPFP {
    border-color:rgb(128, 61, 55);
}

.staffMember:nth-child(9n+2) {
    background-color: #f2bc83;
}
.staffMember:nth-child(9n+2) .pronouns{
    color:rgb(126, 66, 3);
}
.staffMember:nth-child(9n+2) .bigPFP{
    border-color:rgb(126, 66, 3);
}
.staffMember:nth-child(9n+3) {
    background-color: #ffff80;
}
.staffMember:nth-child(9n+3) .pronouns {
    color:rgb(180, 180, 0);
}
.staffMember:nth-child(9n+3) .bigPFP {
    border-color:rgb(180, 180, 0);
}
.staffMember:nth-child(9n+4) {
    background-color: #95d395;
}

.staffMember:nth-child(9n+4) .pronouns{
    color:rgb(34, 117, 34);
}

.staffMember:nth-child(9n+4) .bigPFP{
    border-color:rgb(34, 117, 34);
}

.staffMember:nth-child(9n+5) {
    background-color: #87CEEB;
}
.staffMember:nth-child(9n+5) .pronouns{
    color:rgb(38, 96, 119);
}
.staffMember:nth-child(9n+5) .bigPFP{
    border-color:rgb(38, 96, 119);
}
.staffMember:nth-child(9n+6) {
    background-color: #8d8cd3;
}
.staffMember:nth-child(9n+6) .pronouns{
    color:rgb(32, 31, 83);
}
.staffMember:nth-child(9n+6) .bigPFP{
    border-color:rgb(32, 31, 83);
}
.staffMember:nth-child(9n+7) {
    background-color: #c384c3;
}
.staffMember:nth-child(9n+7) .pronouns{
    color:rgb(90, 20, 90);
}
.staffMember:nth-child(9n+7) .bigPFP{
    border-color:rgb(90, 20, 90);
}
.staffMember:nth-child(9n+8) {
    background-color: #e19ec3;
}
.staffMember:nth-child(9n+8) .pronouns{
    color:rgb(114, 34, 78);
}
.staffMember:nth-child(9n+8) .bigPFP{
    border-color:rgb(114, 34, 78);
}
.staffMember:nth-child(9n+9) {
    background-color: #ffb2b2;
}
.staffMember:nth-child(9n+9) .pronouns{
    color:rgb(119, 74, 74);
}
.staffMember:nth-child(9n+9) .bigPFP{
    border-color:rgb(119, 74, 74);
}

#profileContainer .pfp {
  width:70px;
  height:70px;
}

#top {
    display: flex;
    gap: 8px;
    align-items: center;
}

#top .stacked {
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.displayName {
  margin:0;
  font-size:1.8rem;
}

.username {
  color:#464646;
  font-weight:400;
}

#top .pronouns {
color:#838383;
font-size:.95rem;
}

.editButton {
     width: 16px;
    height: 16px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
}

.editButton svg{
  fill:none;
  stroke-width: 2;
  stroke: rgba(0,0,0,.5);
}

.editButton svg:hover{
  stroke: rgba(0,0,0,.9);
}

.editButton path {
      stroke-linecap: round;
    stroke-linejoin: round;
    d: path("m 16.862 4.487 l 1.687 -1.688 a 1.875 1.875 0 1 1 2.652 2.652 L 6.832 19.82 a 4.5 4.5 0 0 1 -1.897 1.13 l -2.685 0.8 l 0.8 -2.685 a 4.5 4.5 0 0 1 1.13 -1.897 L 16.863 4.487 Z m 0 0 L 19.5 7.125");
}

.editButton::-webkit-scrollbar {
  display: none;
}

.staff-edit-menu {
  margin:auto;
  position:fixed;
  border-radius:5px;
  background-color:white;
  min-height:40%;
  min-width:55%;
  top: 50%;
  left: 50%;
  padding:10px;
  transform: translate(-50%, -50%);
}

.dimmingOverlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.3);
}

.resourceImage {
  width:150px;
  border-radius:50%;
}

#imageContainer {
  display:flex;
  
}

#imageContainer div {
  display:grid;
  text-align:center;
  padding:5px;
}