/** @fileoverview: helloOTD.css css for a simple on this day card
 *
 * <!-- -------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
:root {
  --backgroundColor:    rgb(110, 170, 215);
  --border:             solid 1px rgb(200, 200, 200);
  --foregroundColor:    black;
  --miniCardHeight:     25rem;
}

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, arial;
  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;
  margin-top:           -1rem;
  width:                33%;
}

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

.titleLogo {
  height:               3rem;
  transition:           filter 0.25s ease, transform 0.25s ease;
}

.titleLogo:hover {
  filter:               drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.25));
  transform:            scale(1.1);
}

.title {
  font-family:          monaSansLight, arial;
  font-size:            2rem;
}

.subTitle {
  font-size:            1rem;
}

.titleDate {
  font-family:          monaSans, arial;
  font-size:            0.8rem;
}

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

.mainContainer {
  align-items:          center;
  display:              flex;
  flex-direction:       column;
  height:               calc(100% - 6rem);
  justify-content:      flex-start;
  margin-top:           1rem;
  width:                100%;
}

.otdCardContainer {
  display:              flex;
  flex-direction:       row;
  justify-content:      center;
  margin-top:           1rem;
  width:                100%;
}

.otdCard {
  border:               none;
  margin-right:         2rem;
  max-width:            40rem;
  width:                40rem;
}

.otdCardDescription {
  font-size:            1.3rem;
  text-align:           center;

}

.relatedCardsContainer {
  align-items:          top;
  border-bottom:        solid 1px rgb(115, 175, 255);
  display:              flex;
  flex-direction:       row;
  flex-grow:            1;
  flex-wrap:            wrap;
  gap:                  1rem;
  justify-content:      space-around;
  overflow-y:           auto;
  margin-top:           1rem;
  padding:              0.5rem;
  position:             relative;
  transform:            scale(0.8);
  width:                100%;
}

.relatedCard {
  max-width:            30rem;
  width:                30rem;
}

.relatedCardDescription {
  font-size:            1.1rem;
}

.anotherCardButton {
  align-self:           center;
  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) {
}