section#Logo a#LogoImage {
  pointer-events: auto;
}

img#Person {
  display: block;
  width: 88%;
  border-radius: 14px;
  margin: auto;
  border: 1px solid white;
  padding: calc(8px);
  --_c: #0000 0 25%, #14078b 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
  background-size: 200% 14px,14px 200%;
  cursor: pointer;
  filter: grayscale(0);
  transition: .3s;
}

img#Person:hover{
    --_p: 75%;
  filter: grayscale(44%);
}

section#Content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 88%;
  margin: auto;
  overflow: hidden;
}

h1 {
  background-image: url("../img/Staff/BG.jpg");
  background-size: contain;
  text-align: center;
  width: 88%;
  margin: auto;
  border-radius: 14px;
}

section#Content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 88%;
  margin: auto;
  overflow: hidden;
}
section#Content summary {
  position: relative;
  outline: 0;
  overflow: hidden;
  cursor: crosshair;
  transition: all 0.1s ease-out;
  clip-path: polygon(25px 0%, 100% 0%, calc(100% - 25px) 100%, 0% 100%);
  background: #fedd00;
  padding: 0px 22px;
  color: #333;
}

section#Content summary::marker {
  content: "";
}

section#Content summary:hover:before {
  text-indent: -10px;
}

section#Content summary:after {
  content: "+";
  position: absolute;
  font-size: 1.5em;
  left: 35px;
  top: 50%;
  color: #000;
  line-height: 0;
  transform: translatey(-50%);
}

section#Content details[open] summary {
  text-indent: 30px;
}

section#Content details[open] summary:before {
  text-indent: -10px;
}

section#Content details[open] summary:after {
  content: "–";
}

section#Content details[open] summary ~ * {
  -webkit-animation: animationRotate 0.4s ease-out forwards;
  animation: animationRotate 0.4s ease-out forwards;
}

@keyframes animationRotate {
  from {
    opacity: 0;
    transform: translatex(-50%);
  }

  to {
    opacity: 1;
    transform: translatex(0%);
  }
}

section#Content :is(ul, li) {
  margin: 0;
  padding: 0;
}

section#Content ul,ol {
  display: table;
  text-align: justify;
}

section#Content li {
  list-style: none;
  display: table-row;
  text-indent: 4px;
}

section#Content li::before {
  content: "\2713";
  color: yellow;
  font-size: 110%;
  display: table-cell;
  text-align: right;
  padding-right: 0.3em;
}

section#Content li:hover {
  font-weight: 900;
}

section#Content table {
  border-collapse: collapse;
}

section#Content table th,
td {
  border: 1px black solid;
  text-align: center;
}