@import url("mclibre-pie.css");

/* Paginas web HTML y hojas de estilo CSS    */
/* Bartolome Sintes Marco                    */
/* https://www.mclibre.org                   */
/*                                           */
/* CSS ejercicio: Frutas                     */
/*                                           */
/* 18 de enero de 2019                       */
/*                                           */

/* Propiedades comunes  */

html {
  font-family: sans-serif;
  hyphens: auto;
}

article {
  display: flex;
  flex-wrap: wrap;
}

div.ficha {
  border: black 2px solid;
  margin: 10px;
}

article p {
  margin: 0;
  padding: 5px;
}

p.p1 {
  text-align: center;
}

p.p2 {
  padding: 5px 0;
  background-color: lightgray;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}

p.p3 {
  text-align: justify;
}


/* * * * * * * * * * * * * * * * * * */
/* A11 */
/* * * * * * * * * * * * * * * * * * */

article.a11 p.p3 {
  width: 200px;
  margin: 10px;
  border: black 2px solid;
}


/* * * * * * * * * * * * * * * * * * */
/* A12 */
/* * * * * * * * * * * * * * * * * * */

article.a12 {
  justify-content: space-around;
}

article.a12 p.p3 {
  width: 200px;
  margin: 10px;
  border: black 2px solid;
}


/* * * * * * * * * * * * * * * * * * */
/* A13 */
/* * * * * * * * * * * * * * * * * * */

article.a13 {
  align-items: center;
}

article.a13 p.p3 {
  width: 200px;
  margin: 10px;
  border: black 2px solid;
}


/* * * * * * * * * * * * * * * * * * */
/* A21 */
/* * * * * * * * * * * * * * * * * * */

article.a21 div.ficha {
  width: 200px;
}


/* * * * * * * * * * * * * * * * * * */
/* A22 */
/* * * * * * * * * * * * * * * * * * */

article.a22 {
  align-items: center;
}

article.a22 div.ficha {
  width: 200px;
}

article.a22 p.p2 {
  border-bottom: black 2px solid;
}


/* * * * * * * * * * * * * * * * * * */
/* A23 */
/* * * * * * * * * * * * * * * * * * */

article.a23 div.ficha {
  display: flex;
  flex-direction: row;
  width: 250px;
}

article.a23 p.p1 {
  font-size: 400%;
}


/* * * * * * * * * * * * * * * * * * */
/* A24 */
/* * * * * * * * * * * * * * * * * * */

article.a24 {
  align-items: center;
}

article.a24 div.ficha {
  display: flex;
  flex-direction: row;
  width: 250px;
}

article.a24 p.p1 {
  border-right: black 2px solid;
  font-size: 400%;
}

article.a24 p.p3 {
  background-color: lightgray;
}


/* * * * * * * * * * * * * * * * * * */
/* A25 */
/* * * * * * * * * * * * * * * * * * */

article.a25 div.ficha {
  display: flex;
  flex-direction: row;
  width: 250px;
  background-color: lightgray;
}

article.a25 p.p1 {
  border-right: black 2px solid;
  font-size: 400%;
  background-color: white;
}

article.a25 p.p2 {
  flex-grow: 1;
  align-self: center;
}


/* * * * * * * * * * * * * * * * * * */
/* A31 */
/* * * * * * * * * * * * * * * * * * */

article.a31 div.ficha {
  width: 200px;
}

article.a31 p.p1 {
  font-size: 600%;
  text-align: center;
}


/* * * * * * * * * * * * * * * * * * */
/* A32 */
/* * * * * * * * * * * * * * * * * * */

article.a32 div.ficha {
  width: 300px;
  display: flex;
  flex-direction: row;
}

article.a32 div.parte {
  display: flex;
  flex-direction: column;
  border-left: black 2px solid;
}

article.a32 p.p1 {
  font-size: 600%;
  align-self: center;
}

article.a32 p.p2 {
  border-bottom: black 2px solid;
}


/* * * * * * * * * * * * * * * * * * */
/* A33 */
/* * * * * * * * * * * * * * * * * * */

article.a33 div.ficha {
  width: 300px;
  display: flex;
  flex-direction: column;
}

article.a33 div.parte {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: lightgray;
}

article.a33 p.p1 {
  font-size: 400%;
  border-bottom: black 2px solid;
  border-right: black 2px solid;
  border-bottom-right-radius: 10px;
}

article.a33 p.p2 {
  align-self: center;
  align-content: center;
}