/** @fileoverview: otd001.css css for on this day experiment 001
 *  This experiment is a simple "hello world" test for accessing wikipedia.
 */
/* <!-- -------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
:root {
  --border:             solid 1px rgb(200, 200, 200);
  --backgroundColor:    rgb(110, 170, 215);
  --foregroundColor:    black;
  --miniCardHeight:     25rem;
  --trayTop:            5rem;
  --trayWidth:          15rem;
}

body {
  accent-color:         var(--blue);
  background-color:     var(--backgroundColor);
  background:           radial-gradient(circle,
                                        rgba(240, 250, 255, 1) 0%,
                                        rgba(115, 175, 255, 1) 100%);
  color:                var(--foregroundColor);
  display:              flex;
  flex-direction:       column;
  font-family:          monaSans;
  margin:               0;
  overflow:             hidden;
  padding:              1rem;;
}

/* anchor */
a:link, a:visited {
  border-bottom:              solid 1px blue;
  color:                      rgb(100, 100, 200);
  text-decoration:            none;
  transition:                 border 0.2s ease-in-out, color 0.2s ease-in-out;
  width:                      fit-content;
}

a:hover, a:focus, a:active {
  border-bottom:              solid 1px green;
  color:                      green;
}

.titleContainer {
  align-items:          flex-start;
  display:              flex;
  flex-direction:       row;
  justify-content:      space-between;
  width:                100%;
}

.titleContainerLeft {
  align-items:          flex-start;
  display:              flex;
  flex-direction:       column;
  width:                33%;
}

.titleContainerCenter {
  align-items:          center;
  display:              flex;
  flex-direction:       column;
  width:                33%;
}

.titleContainerRight {
  align-items:          flex-end;
  display:              flex;
  flex-direction:       column;
  margin-top:           -0.5rem;
  width:                33%;
}

.titleLogo {
  height:               3rem;
}

.title {
  font-family:          monaSansExtraLight;
  font-size:            1.5rem;
  margin:               -1rem 0 -0.5rem 0;
  text-align:           center;
  width:                100%;
}

.subtitle {
  font-family:          monaSansLight;
  font-size:            0.9rem;
  margin-bottom:        0.5rem;
}

.titleDescription {
  font-family:          monaSansLight;
  font-size:            0.75rem;
}

.mainContainer {
  align-items:          center;
  display:              flex;
  flex-direction:       column;
  flex-grow:            1;
  font-size:            0.8rem;
  gap:                  1rem;
  height:               100%;
  justify-content:      flex-start;
  padding-top:          2rem;
  width:                100%;
}

.trayContainer {
  background:           rgba(0, 65, 130, 0.1);
  border-radius:        var(--borderRadius);
  box-shadow:           var(--boxShadow);
  padding:              0 0.5rem 0.5rem 0.5rem;
  transition:           background 0.25s ease-in-out 0.1s,
                        opacity 0.25s ease-in-out 0.1s,
                        transform 0.25s ease-in-out 0.1s;
  transform:            scale(0.5);
  /* max-width:         calc(100% - 2rem); */
  max-width:            calc(200% - 2rem);
  margin-top:           -6rem;
  overflow:             auto;
  z-index:              2;
}

.trayContainer:hover {
  background:           rgba(140, 190, 255, 1);
  max-width:            calc(90% - 2rem);
  transform:            scale(1.15);
}

.trayTitle {
  color:                rgb(0, 15, 120);
  font-size:            0.9rem;
  margin-left:          0.25rem;
}

.trayInnerContainer {
  display:              flex;
  gap:                  1rem;
  justify-content:      space-between;
  transition:           width 0.5s ease-in-out;
}

.miniCard {
  align-items:          center;
  animation:            var(--fadeUpAnim);
  background-color:     white;
  border-radius:        var(--borderRadius);
  display:              flex;
  flex-direction:       column;
  height:               fit-content;
  min-height:           var(--miniCardHeight);
  max-height:           var(--miniCardHeight);
  opacity:              0;
  overflow:             hidden;
  position:             relative;
  width:                18rem;  /* 100% */
  min-width:            18rem;
}

.miniCardBlurryImg {
  position:             absolute;
  top:                  0;
  left:                 0;
  width:                100%;
  height:               calc(var(--miniCardHeight) / 3);
  max-height:           calc(var(--miniCardHeight) / 3);
  filter:               blur(2px) brightness(75%);
  transform:            scale(1.1);
  transform-origin:     top left;
  overflow:             hidden;
  z-index:              1;
}

.miniCardImg {
  background:           white;
  border-bottom:        var(--border);
  box-shadow:           var(--boxShadow);
  height:               calc(var(--miniCardHeight) / 3);
  max-height:           calc(var(--miniCardHeight) / 3);
  object-fit:           contain;
  transform:            scale(0.999);
  transform-origin:     top left;
  position:             relative;
  z-index:              2;
}

.miniCardTitle {
  background:           white;
  background:           #ffbf00;
  border-top:           var(--border);
  border-bottom:        var(--border);
  color:                green;
  color: black;
  font-family:          monaSansLight;
  font-size:            0.9rem;
  overflow:             hidden;
  text-align:           center;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  width:                100%;
  z-index:              2;
}

.miniCardDetailsContainer {
  background:           rgb(240, 250, 255);
  background:           #fff3dc;
  height:               calc((2 * (var(--miniCardHeight) / 3)) - 1.5rem);
  overflow-x:           hidden;
  overflow-y:           auto;
  overscroll-behavior:  contain;
  padding:              0.5rem 0.5rem 0.5rem 0.5rem;
  width:                100%;
}

.miniCardShortDescription {
  display:              block;
  font-size:            0.75rem;
  font-weight:          bold;
  overflow:             hidden;
  text-align:           center;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  width:                100%;
}

.miniCardDescription {
  font-size:            0.75rem;
}

.miniCardSrc {
  color:                rgb(100, 100, 100);
  font-size:            0.6rem;
}

.cardContainer {
  z-index:              1;
}

.anotherCardButton {
  position:             absolute;
  top:                  20rem;
  right:                2rem;
  left:                 calc(50% + 12rem);
  width:                fit-content;
  z-index:              5;
}

/* detect phone */
@media screen and (any-pointer:   coarse) and (max-width: 900px) {
}

/* detect phone in portrait */
@media screen and
(any-pointer: coarse) and (orientation: portrait) and (max-width: 400px) {
}

/* detect phone in landscape */
@media screen and
(any-pointer: coarse) and (orientation: landscape) and (max-width: 900px) {
}