[Pack completo] Eternal Innocence CSS

.wiccan {
  --dbckg1:#1a1a1a;
  --dbckg2: #1c1c1c;
  --dbckg3: #1e1e1e;
  --dbckg4: #202020;
  --tbckg1:rgba(0,0,0,0.4);
  --border1:1px solid #111;
  --border2:16px solid #222;
  --tborder1:11px solid rgba(0,0,0,0.01);
  --shadow-d:1px 1px rgba(0,0,0,0.2), -1px 1px rgba(0,0,0,0.2), 1px -1px rgba(0,0,0,0.2), -1px -1px rgba(0,0,0,0.2);
  --txt:#ccc;
  --title:#fff;
  --accent1:#566965;
  --accent2:#485754;
}

.wiccan {
  border:var(--border2);
  outline:var(--border1);
  outline-offset:-1px;
  background:var(--dbckg1);
  margin:10px auto;
  color:var(--txt);
}

.wiccan br { display: none; }
.wiccan .wtext br {display:block;}

.wiccan *::selection {
  background:var(--accent1);
  color:white;
  text-shadow:var(--shadow-d);
}

.whover {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.wambi, .wafi {
  width:500px;
  height:600px;
}

.wbusq {
  width:500px;
  height:300px;
}

.wcajas {
  width:400px;
}

.wiccan .wbody {
  border:var(--border1);
}

.wcajas .wbody{
  padding:10px;
}

.whover .wimg {
  position:absolute;
  width:inherit;
  height:inherit;
  box-sizing:border-box;
  border:var(--border1);
  background-clip:border-box;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.whover .wtext {
  background:var(--tbckg1);
  outline:var(--border1);
  border:var(--tborder1);
  position:absolute;
  bottom:-321px;
  left:0;
  width:220px;
  height:320px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-sizing:border-box;
  color:var(--txt);
  font:12px 'Roboto';
  text-align:justify;
  overflow:auto;
  padding-right:3px;
  border-right:7px;
  transition:ease 0.6s;
}

.wbusq .wtext {
  height:300px;
  bottom:-300px;
}

.wcajas .wtext {
  background:var(--dbckg2);
  border:var(--border1);
  padding:10px;
  text-align:justify;
  font-size:12px;
  line-height:15px;
}

.whover .wtitle {
  position:absolute;
  bottom:360px;
  color:var(--title);
  text-shadow:var(--shadow-d);
  text-transform:uppercase;
  font:35px 'Montserrat';
  font-weight:700;
  width:230px;
  text-align:right;
  line-height:35px;
}

.wcajas .wttitle {
  font:20px 'Montserrat';
  text-transform:uppercase;
  font-weight:700;
  background:var(--dbckg2);
  border-bottom:var(--border1);
  padding:20px;
  margin:-10px -10px 10px -10px;
  text-align:center;
}

.wbusq .wtitle {
  bottom:unset;
  top:unset;
  right:20px;
}

.wcajas .wtitle {
  margin: 10px 0;
  border:var(--border1);
  background:var(--dbckg4);
  text-shadow:var(--shadow-d);
  font:12px 'Montserrat';
  text-transform:uppercase;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding-right:20px;
}

.wcajas .wtitle em {
  border-right:var(--border1);
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  font-size:12px;
  color:var(--accent1);
  background:var(--dbckg3);
  margin-right:20px;
  flex-shrink:0;
}

.wcajas .wtitle em:before {
  line-height:50px;
}

.whover .wtitle m {
  font:10px 'Roboto';
  font-weight:700;
  text-align:justify;
  text-align-last:justify;
  display:block;
  width:100%;
}

.wafi .wtitle a {
  color:var(--title);
  text-decoration:none;
}

.whover:hover .wtext {
  bottom:0;
}

.wafi .wtext.wbotones {
    left: unset;
    right: -270px;
    width: 270px;
    height:250px;
    bottom:0;
}
.wafi:hover .wtext.wbotones {
  right:0;
}

.wcajas .wenv {
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.wcajas .wenv2 {
  width:calc(50% - 5px);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  align-self:stretch;
}

.wcajas .wenv2:nth-of-type(odd) {
  margin-right:10px;
}

.wcajas .wenv2 .wtext {
  align-self:stretch;
  flex-grow:1;
  text-align:left;
}

.wcajas .wtitle {
  flex-shrink:0;
}

.ncredit {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  display: block;
  font-size: 10px;
  text-decoration: none;
  font: 8px verdana;
  color: #aaa;
}

.wiccan + br + .ncredit {
  margin-top: -15px;
}

.ncredit:before {
  content: "©";
}