/** cssMediaExp.css -- css to detect device size and orientation **/
.portrait,
.landscape,
.desktop,
.tablet,
.phone,
.phoneMightNotch {
  display: none;
}

/* detect phone in portrait */
@media screen and (any-pointer: coarse) and (orientation: portrait)
    and (max-width: 400px) {
  .results {background: lightGreen;}
  .phone { display: block; }
}

/* detect phone in landscape */
@media screen and (any-pointer: coarse) and (orientation: landscape)
    and (max-width: 900px) {
  .results {background: lightBlue;}
  .phone { display: block; }
}

/* detect tablet in portrait */
@media screen and (any-pointer: coarse) and (orientation: portrait) and
    (min-width: 800px) and (max-width: 1024px) {
  .results {background: var(--darkYellow);}
  .tablet { display: block; }
}

/* detect tablet in landscape */
@media screen and (any-pointer: coarse) and (orientation: landscape) and
    (min-width: 1024px) and (max-width: 1200px) {
  .results {background: var(--lightYellow);}
  .tablet { display: block; }
}

/* detect desktop in portrait */
@media screen and (any-pointer: fine) and (orientation: portrait) {
  .results {background: var(--lightOrange);}
  .desktop { display: block; }
}

/* detect desktop in landscape */
@media screen and (any-pointer: fine) and (orientation: landscape) {
  .results {background: var(--extraLightOrange);}
  .desktop { display: block; }
}

/* detect orientation is portrait */
@media screen and (orientation:portrait) {
  .portrait  { display: block; }
  .landscape { display: none; }
}

/* detect orientation is landscape */
@media screen and (orientation:landscape) {
  .portrait  { display: none; }
  .landscape { display: block; }
}

/* detect phone in landscape which might have a notch so set margins/padding */
@media screen and (any-pointer: coarse) and (orientation: landscape)
    and (max-width: 900px) {
  .phoneMightNotch { display: block; }
}