/** @fileoverview: wikiCard.css **/
/* <!-- -------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
:root {
  --wikiCardImageBorder: solid 1px rgb(200, 200, 200);
  --wikiCardFadeUpAnim:  fadeUpAnim 0.25s ease-in-out 0.25s forwards;
  --wikiCardWidth:       20rem;
  --wikiCardHeight:      25rem;
}

.wikiCardContainer {
  animation:            var(--fadeUpAnim);
  background:           white;
  border-radius:        1rem;
  box-shadow:           var(--boxShadow);
  height:               fit-content;
//  max-height:           var(--wikiCardHeight);
  max-width:            var(--wikiCardWidth);
  opacity:              0;
  width:                var(--wikiCardWidth);
  z-index:              5;
}

.wikiCardImageContainer {
  align-items:          center;
  border-bottom:        var(--wikiCardImageBorder);
  border-radius:        0.9rem 0.9rem 0 0;
  display:              flex;
  height:               auto;
  justify-content:      center;
  max-height:           15rem;
  height:               15rem;
  overflow:             hidden;
  position:             relative;
}

.wikiCardBlurryImage {
  aspect-ratio:         1 / 1;
  background-image:     none;
  background-position:  center;
  border-radius:        1rem 1rem 0 0;
  filter:               blur(2px) brightness(75%);
  left:                 0;
  object-fit:           contain;
  object-position:      center;
  position:             absolute;
  top:                  0;
  transform:            scale(1.5);
  width:                100%;
  z-index:              1;
}

.wikiCardImage {
  background:           white;
  height:               100%;
  object-fit:           contain;
  object-position:      center;
  position:             relative;
  z-index:              2;
}

.wikiCardTitle {
  color:                green;
  font-family:          monaSans, arial;
  font-size:            1.25rem;
  margin-top:           0.5rem;
  overflow:             hidden;
  text-align:           center;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  width:                100%;
}

.wikiCardDescription {
  /*
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  -webkit-line-clamp:   3;
  text-overflow:        ellipsis;
  */
  font-size:            1rem;
  overflow-y:           auto;
  padding:              0.5rem;
}

.wikiCardId {
  color:                rgb(50, 50, 50);
  font-size:            0.65rem;
  padding:              0 0 0.5rem 0.5rem;
}