@charset "utf-8";
/* CSS Document */

.bio-panel {
  display: flex;
  flex-direction: row;
}
.gene-pic { flex: 25.0%; padding: 10px }
.gene-info { flex: 25.0%; padding: 10px; text-align: right }
.jorge-pic { flex: 25.0%; padding: 10px }
.jorge-info { flex: 25.0%; padding: 10px; text-align: right}



.gene-pic img, .jorge-pic img { 
  border: 5px solid rgba(0,0,0,0.3);
  border-radius: 20px;
  width: 100%;
}

 .gene-info img,  .jorge-info img { width: 15px }

.heading {
  font-family: Neuvetica-Bold; 
  font-size: 30px; 
  line-height: 32px;
  color : rgba(255, 235, 173, 1);
  text-align: center
}

.summary {
  display: flex;
  flex-direction: row;
}
.summary .pic { flex: 40%; padding: 10px; text-align: center }
.summary .text { flex: 60%; padding: 10px }

.summary .pic img { 
  border: 5px solid rgba(0,0,0,0.3);
  border-radius: 20px;
  width: 100%;
}

.bio-name {
  font-family: Betterlett;
  font-size: 40px;
  color : rgba(255, 235, 173, 1);
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

ul { list-style: square}
li { margin-left: 20px }

/* adjust for mobile screen size */
@media only screen and (min-width: 0px) and (max-width: 600px) {
  .summary { flex-direction: column }
  .intro-panel { flex-direction: column }
}