Pack The Fool (CSS)

.fool {
  --bckg1:#eaeaea;
  --bckg2:#ececec;
  --bckg3:#efefef;
  --accent1:#d0829a;
  --accent2:#ab6379;
  --titlebckg:#ddd;
  --titlecolor1:#ccc;
  --titlecolor2:#fff;
  --text:#666;
  --border1:1px solid #ccc;
  --shadow-d: 1px 0 0 rgba(0,0,0,0.15), -1px 0 0 rgba(0,0,0,0.15), 0 1px 0 rgba(0,0,0,0.15), 0 -1px 0 rgba(0,0,0,0.15), 1px 1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), -1px -1px 0 rgba(0,0,0,0.15);
  --shadow-w: 1px 0 0 white, -1px 0 0 white, 0 1px 0 white, 0 -1px 0 white, 1px 1px 0 white, -1px 1px 0 white, -1px 1px 0 white, -1px -1px 0 white;
}

.fool {
  background:var(--bckg1);
  width:500px;
  box-sizing:border-box;
  padding:20px;
  margin:10px auto;
  font-size:12px;
  color:var(--text);
  border:var(--border1);
}

.foolheader, .foolenv, .foolspans {
  display:flex;
  justify-content:center;
  align-items:center;
}

.foolheader {
  margin:-20px -20px 20px;
  height:80px;
  background:var(--titlebckg);
  overflow:hidden;
  position:relative;
  border-bottom:var(--border1);
  align-items:flex-start;
  flex-direction:column;
}

.foolheader strong {
  position:absolute;
  color:transparent;
  -webkit-text-stroke:1px var(--titlecolor1);
  font:120px 'Abril Fatface';
}

.foolheader em {
  background:var(--accent1);
  border:1px solid var(--accent2);
  color:var(--titlecolor2);
  z-index:1;
  font-size:10px;
  font-weight:700;
  font-style:normal;
  text-transform:uppercase;
  padding:7px 10px;
  text-shadow:var(--shadow-d);
  margin-right:30px;
  align-self:flex-end;
}

.fooltext {
  border:16px solid var(--bckg2);
  outline:var(--border1);
  outline-offset:-1px;
  padding-right:5px;
  border-right-width:11px;
  text-align:justify;
  overflow:auto;
  box-sizing:border-box;
  line-height:16px;
}

.fool br { display:none; }

.fooltext br { display:block; }

.foolficha .fooltext {
  height:250px;
}

.foolficha .foolenv {
  border-top:var(--border1);
  margin:20px -20px -20px;
}

.fooldatos {
  outline:var(--border1);
  flex-shrink:0;
  box-sizing:border-box;
  border:10px solid var(--bckg2);
  background:var(--bckg2);
  border-right-width:5px;
  padding-right:5px;
  overflow:auto;
}

.foolficha .fooldatos {
  width:238px;
  height:210px;
}

.foolimg {
  border:5px solid var(--bckg3);
  box-sizing:border-box;
  background-size:cover;
  background-position:center;
}

.foolficha .foolimg {
  width:260px;
  box-sizing:border-box;
  align-self:stretch;
}

.fooldatos span {
  font-size:10px;
  margin-bottom:5px;
  display:block;
}

.fooldatos span:after {
  content:"";
  clear:both;
  display:block;
}

.fooldatos span:last-of-type {
  margin-bottom:0;
}

.fooldatos strong {
  background:var(--accent1);
  border:1px solid var(--accent2);
  color:var(--titlecolor2);
  text-shadow:var(--shadow-d);
  padding:2px 4px;
  text-transform:uppercase;
  margin-right:5px;
  float:left;
}

.fooldatos em {
  font-style:normal;
  float:left;
  margin-top:3px;
}

.fooladmin .fooltext, .foolrol .fooltext {
  height:unset;
}

.foolambi .foolheader {
  margin:20px -20px -20px;
  border-bottom:0;
  border-top:var(--border1);
}

.foolambi .foolimg {
  height:270px;
  width:498px;
  margin:-20px -20px 20px;
  border-width:10px;
  outline:var(--border1);
}

.foolregs .foolenv {
  flex-wrap:wrap;
  margin: 20px -20px -20px;
  border-top:var(--border1);
}

.foolregs .fooldatos {
  overflow:unset;
  flex-basis:50%;
  flex-grow:1;
  outline:0;
  border:0;
  border-bottom:var(--border1);
  padding:10px;
  box-sizing:border-box;
}

.foolregs .fooldatos:nth-of-type(odd) {
  border-right:var(--border1);
}

.foolregs .fooldatos:last-of-type:nth-of-type(odd), .foolregs .fooldatos:nth-last-of-type(2):nth-of-type(odd) {
  border-bottom:0;
}

.foolregs .fooldatos:last-of-type:nth-of-type(odd) {
  border-right:0;
}

.foolregs .fooldatos>strong {
  margin-bottom:5px;
}

.foolregs .foolenv .fooltext {
  width:100%;
  height:150px;
}

.foolspans {
  margin:20px -20px -20px;
  border-top:var(--border1);
  padding:10px;
  background:var(--bckg2);
}

.foolspans span {
  background:var(--bckg3);
  border:var(--border1);
  color:var(--accent1);
  text-shadow:var(--shadow-w);
  margin-right:10px;
  padding:5px;
  flex-grow:1;
  text-align:center;
  font-size:10px;
  text-transform:uppercase;
  font-weight:700;
}

.foolspans span:last-of-type {
  margin-right:0;
}

.foolbusq { padding:0; }

.foolbusq .foolheader, .foolbusq .foolspans { margin:0; }

.foolbusq .foolenv { padding:20px; height: 170px; }

.foolbusq .foolimg {
  width:160px;
  height:210px;
  margin:-20px 20px -20px -20px;
  outline:var(--border1);
}

.foolbusq .fooltext {
  align-self:stretch;
  width:298px;
}

.fool::selection, .fool *::selection {
  color:var(--titlecolor2);
  text-shadow:none;
  background:var(--accent1);
}

.fooltext::-webkit-scrollbar, .fooldatos::-webkit-scrollbar {
  width:3px;
}

.fooltext::-webkit-scrollbar-thumb, .fooldatos::-webkit-scrollbar-thumb {
  background:var(--accent1);
}

.fooltext::-webkit-scrollbar-track, .fooldatos::-webkit-scrollbar-track {
  background:transparent;
}