.container {
  margin-top: 2.5em;
  display: flex;
  flex-flow: column nowrap;
}

.container-abt {
  align-items: center;
  justify-content: space-around;
}

.portrait {
  z-index: 2;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  margin-bottom: -60%;
  margin-right: -4%;
}

.portrait img {
  width: 30%;
  height: auto;
  border: 0.5em solid var(--fa-p);
  border-bottom: 0;
}

.socials {
  width: calc(30% + 1em);
  height: 3rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  background: var(--fa-p);
}

.socials i {
  font-size: 1.25rem;
  color: #fff;
}

.info {
  width: calc(30% + 1em);
  background: var(--fa-s);
  color: #141418;
  padding: 0.8em 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
}

.info p {
  margin: 0.5em 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8em;
  letter-spacing: 0.4;
  line-height: 1.2em;
}

.bio {
  margin-top: 5em;
  width: 72%;
  margin-left: 18%;
  background: var(--bg-secondary);
  padding: 1em;
  padding-left: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.text {
  width: 80%;
  padding: 1em 1.5em;
}

.text p {
  color: var(--text-secondary);
  text-align: justify;
}

.text h1 { text-align: left; }
.text p span {
  font-family: 'Cookie';
  font-size: 1.5em;
}

.fun-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.fun-fact {
  display: flex;
  flex-flow: row nowrap;
  color: var(--text-secondary);
  margin-top: 1.25em;
}
.fun-fact:first-child { margin-top: 0;}

.fun-fact .fun-icon {
  width: 15%;
}

.fun-fact .fun-icon i {
  font-size: 2.5em;
  color: var(--fa-p);
}

.fun-fact .fun-text {
  width: 85%;
  font-size: 14px;
}

.fun-fact .fun-text h3 {
  color: var(--fa-p);
  font-weight: 800;
  letter-spacing: 0.3;
  font-size: 20px;
  font-variant: small-caps;
  margin-bottom: -0.4em;
  margin-top: 0;
}

@media (min-width:2400px) {
  .bio {
    margin-top: 12em;
  }
}

@media (min-width:1600px) {
  .portrait {
    margin-bottom: -56%;
  }
}

@media (max-width:1125px) {
  .portrait {
    margin-bottom: -68%;
  }

  .fun-fact .fun-icon i {
    font-size: 2em;
  }
}

@media (min-width:900px) and (max-width:912px){
  .portrait {margin-top: 2em;}
}

@media (max-width:1024px) {
  .bio { margin-top: 1.5em;}
  .text { width: 77%;}
  .text p { text-align: left;}
  .socials i { font-size: 1em;}
  .info p { font-size: 0.75em;}
}

@media (max-width:916px) {
  .bio { margin-top: .5em;}
}

@media (max-width:800px) {
  .portrait {
    width: 90%;
    margin: 1em 0 0 0;
    padding: 0;
  }

  .portrait img {
    margin-left: -1em;
    width: calc(100% + 1em);
  }

  .socials, .info {
    margin-left: -1em;
    width: calc(100% + 2em);
  }

  .bio {
    width: 90%;
    margin: 0;
    padding-left: 1rem;
  }

  .text {
    width: 100%;
  }
  .info p { font-size: 0.8em;}
}

@media (max-width:480px) {
  .text p {
    font-size: 14px;
  }
}

@media (max-width:412px) {
  .container.container-abt {
    padding: 0;
    margin-top: 2em;
  }

  .fun-fact {
    flex-wrap: wrap;
  }

  .fun-fact .fun-icon, .fun-fact .fun-text {
    width: 100%;
  }

  .text p {
    font-size: 14px;
  }

  .fun-fact .fun-text {
    font-size: 13px;
  }
}