.BioWrapper {
    display: grid;
    width: 100%;
    height: auto;
    color: white;
    grid-template-columns: 4fr 8fr 1fr;
    align-items: start;
    justify-items: start;
}

body {
    background: linear-gradient(30deg, rgb(0, 0, 0), rgb(0, 23, 8));
}
.BioWrapper h1,h2{
    font-size: 2rem;
}

.BioWrapper p{
    font-size: 1.1rem;
}

.PortraitWrapper {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 50px;
    padding-top: 100px;
}

.PortraitContainer {
    width: 500px;
    height: 700px;
    align-self: center;
    position: relative;
}

.Portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1);
}

.portrait-1 {
    clip-path: polygon(0 0%, 0 12.5%, 12.5% 0);
    transform: translate(0px, -100px);
    animation-name: rotate1;
}

.portrait-2 {
    clip-path: polygon(12.5% 0, 25% 0, 0 25%, 0 12.5% );
    transform: translate(0px, -87.5px);
    animation-name: rotate2;
}

.portrait-3 {
    clip-path: polygon(25% 0, 37.5% 0, 0 37.5%, 0 25%);
    transform: translate(0px, -75px);
    animation-name: rotate3;
}

.portrait-4 {
    clip-path: polygon(37.5% 0, 50% 0, 0 50%, 0 37.5%);
    transform: translate(0px, -62.5px);
    animation-name: rotate4;
}

.portrait-5 {
    clip-path: polygon(50% 0, 62.5% 0, 0 62.5%, 0 50%);
    transform: translate(0px, -50px);
    animation-name: rotate5;
}

.portrait-6 {
    clip-path: polygon(62.5% 0, 75% 0, 0 75%, 0 62.5%);
    transform: translate(0px, -37.5px);
    animation-name: rotate6;
}

.portrait-7 {
    clip-path: polygon(75% 0, 87.5% 0, 0 87.5%, 0 75%);
    transform: translate(0px, -25px);
    animation-name: rotate7;
}

.portrait-8 {
    clip-path: polygon(87.5% 0, 100% 0, 0 100%, 0 87.5%);
    transform: translate(0px, -12.5px);
    animation-name: rotate8;
}
.portrait-9 {
    clip-path: polygon(100% 0%, 100% 12.5%, 12.5% 100%, 0 100%);
    animation-name: rotate9;
}

.portrait-10 {
    clip-path: polygon(100% 12.5%, 100% 25%, 25% 100%, 12.5% 100%);
    transform: translate(0px, 12.5px);
    animation-name: rotate10;
}

.portrait-11 {
    clip-path: polygon(100% 25%, 100% 37.5%, 37.5% 100%, 25% 100%);
    transform: translate(0px, 25px);
    animation-name: rotate11;
}

.portrait-12 {
    clip-path: polygon(100% 37.5%, 100% 50%, 50% 100%, 37.5% 100%);
    transform: translate(0px, 37.5px);
    animation-name: rotate12;
}
.portrait-13 {
    clip-path: polygon(100% 50%, 100% 62.5%, 62.5% 100%, 50% 100%);
    transform: translate(0px, 50px);
    animation-name: rotate13;
}

.portrait-14 {
    clip-path: polygon(100% 62.5%, 100% 75%,75% 100%, 62.5% 100%);
    transform: translate(0px, 62.5px);
    animation-name: rotate14;
}

.portrait-15 {
    clip-path: polygon(100% 75%, 100% 87.5%, 87.5% 100%, 75% 100%);
    transform: translate(0px, 75px);
    animation-name: rotate15;
}

.portrait-16 {
    clip-path: polygon(100% 87.5%, 87.5% 100%, 100% 100%);
    transform: translate(0px, 87.5px);
    animation-name: rotate16;
}

.BioTextWrapper {
  padding: 10px;
  padding-top: 20px;
}

.BioTextWrapper p:first-of-type {
  margin-top: 3rem;
}

.NameWrapper {
    padding-top: 20px;
}

/* Rotation animations for all 16 shapes */
@keyframes rotate1 {
    0% { transform: translate(0px, -100px) rotate(0deg); }
    50% { transform: translate(0px, -100px) rotate(360deg); }
    100% { transform: translate(0px, -100px) rotate(0deg); }
}

@keyframes rotate2 {
    0% { transform: translate(0px, -87.5px) rotate(0deg); }
    50% { transform: translate(0px, -87.5px) rotate(-360deg); }
    100% { transform: translate(0px, -87.5px) rotate(-720deg); }
}

@keyframes rotate3 {
    0% { transform: translate(0px, -75px) rotate(0deg); }
    50% { transform: translate(0px, -75px) rotate(180deg); }
    100% { transform: translate(0px, -75px) rotate(360deg); }
}

@keyframes rotate4 {
    0% { transform: translate(0px, -62.5px) rotate(0deg); }
    50% { transform: translate(0px, -62.5px) rotate(-180deg); }
    100% { transform: translate(0px, -62.5px) rotate(-360deg); }
}

@keyframes rotate5 {
    0% { transform: translate(0px, -50px) rotate(0deg); }
    50% { transform: translate(0px, -50px) rotate(270deg); }
    100% { transform: translate(0px, -50px) rotate(-360deg); }
}

@keyframes rotate6 {
    0% { transform: translate(0px, -37.5px) rotate(0deg); }
    50% { transform: translate(0px, -37.5px) rotate(-270deg); }
    100% { transform: translate(0px, -37.5px) rotate(-360deg); }
}

@keyframes rotate7 {
    0% { transform: translate(0px, -25px) rotate(0deg); }
    50% { transform: translate(0px, -25px) rotate(90deg); }
    100% { transform: translate(0px, -25px) rotate(-360deg); }
}

@keyframes rotate8 {
    0% { transform: translate(0px, -12.5px) rotate(0deg); }
    50% { transform: translate(0px, -12.5px) rotate(-90deg); }
    100% { transform: translate(0px, -12.5px) rotate(-360deg); }
}

@keyframes rotate9 {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(360deg); }
    100% { transform: rotate(720deg); }
}

@keyframes rotate10 {
    0% { transform: translate(0px, 12.5px) rotate(0deg); }
    50% { transform: translate(0px, 12.5px) rotate(-360deg); }
    100% { transform: translate(0px, 12.5px) rotate(-720deg); }
}

@keyframes rotate11 {
    0% { transform: translate(0px, 25px) rotate(0deg); }
    50% { transform: translate(0px, 25px) rotate(180deg); }
    100% { transform: translate(0px, 25px) rotate(360deg); }
}

@keyframes rotate12 {
    0% { transform: translate(0px, 37.5px) rotate(0deg); }
    50% { transform: translate(0px, 37.5px) rotate(-180deg); }
    100% { transform: translate(0px, 37.5px) rotate(-360deg); }
}

@keyframes rotate13 {
    0% { transform: translate(0px, 50px) rotate(0deg); }
    50% { transform: translate(0px, 50px) rotate(270deg); }
    100% { transform: translate(0px, 50px) rotate(360deg); }
}

@keyframes rotate14 {
    0% { transform: translate(0px, 62.5px) rotate(0deg); }
    50% { transform: translate(0px, 62.5px) rotate(-270deg); }
    100% { transform: translate(0px, 62.5px) rotate(-360deg); }
}

@keyframes rotate15 {
    0% { transform: translate(0px, 75px) rotate(0deg); }
    50% { transform: translate(0px, 75px) rotate(90deg); }
    100% { transform: translate(0px, 75px) rotate(360deg); }
}

@keyframes rotate16 {
    0% { transform: translate(0px, 87.5px) rotate(0deg); }
    50% { transform: translate(0px, 87.5px) rotate(-90deg); }
    100% { transform: translate(0px, 87.5px) rotate(-360deg); }
}

/* Title rows with Chinese and English text */
.title-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.english-paragraphs {
  margin-top: 5rem;
}

.title-row h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  min-width: 300px;
}

.english-title {
  text-align: left;
  font-size: 1.5rem;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 2rem;
  flex: 1;
}