* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* appearance: none; */

}

body {
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    background-color: #F9F6EE;
    color: #343434; /* jet */
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: ivory;
    }
}

.card {
    /* width: calc(100vw - (100vw - 100%));
    max-width: calc(100vw - (100vw - 100%)); */
    background-color: #FEFEFA;
    /* border: 0.1rem solid #808080; */
    border-radius: 0.25rem;
    box-shadow: 0 0.8rem 0rem -0.5rem rgba(0, 0, 0, 0.2);
}

/* @media only screen and (min-width: 32rem) {
    .card {
        width: 32rem;
        max-width: 32rem;
    }
} */

@media (prefers-color-scheme: dark) {
    .card {
        background-color: rgba(32, 28, 28, 1);
        /* box-shadow: 0 0.8rem 0rem -0.5rem rgba(0, 0, 0, 0.5); */
        box-shadow: none;
    }
}

/* @media only screen and (min-width: 32rem) and (prefers-color-scheme: dark) {
    .card {
        width: 32rem;
        max-width: 32rem;
    }
} */

.card-head {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

.card-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.card-foot {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}


.flex {
    display: flex;
}

.flex-laid {
    display: flex;
    flex-direction: row;
}

.flex-rise {
    display: flex;
    flex-direction: column;
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.cage {
    width: 100%;
}

@media only screen and (min-width: 32rem) {
    .cage {
        min-width: 32rem;
        max-width: 32rem;
    }
}

.position-fixed-bottom {
    position: fixed;
    bottom: 0;
    transform: translate3d(0,0,0); /* fix for ios, position fixed is bouncing when zoom on landscape */ 
}

.justify-content-center {
    justify-content: center;
}

.vertical-align-middle {
    vertical-align: middle;
}

.float-right {
    float: right;
}

.hide {
    display: none;
}
.w-100pc {
    width: 100%;
}

.w-20pc {
    width: 20%;
}

.w-plus-0pt1rem {
    width: calc(100% + 0.1rem);
}

.min-w-20pc {
    min-width: 20%;
}

.min-w-16rem {
    min-width: 16rem;
}

.max-w-16rem {
    max-width: 16rem;
}

.w-90vw-32rem {
    width: 90vw;
    min-width: 90vw;
    max-width: 90vw;
}

@media only screen and (min-width: 24rem) {

    .w-90vw-32rem  {
        width: 24rem;
        min-width: 24rem;
        max-width: 24rem;
    }
}

.w-1rem {
    width: 1rem;
}

.w-2rem {
    width: 2rem;
}

.h-1rem {
    height: 1rem;
}

.h-2rem {
    height: 2rem;
}

.h-50pc {
    height: 50%;
}


.h-100pc {
    height: 100%;
}

.h-100vh {
    height: 100dvh;
}

.min-h-8rem {
    min-height: 8rem;
}

.max-h-45vh {
    max-height: 45vh;
}

.max-h-100vh {
    max-height: 100vh;
}

.max-h-50pc {
    max-height: 50%;
}

.max-h-100pc {
    max-height: 100%;
}

.max-h-8-16-24rem {
    max-height: 8rem;
}

@media only screen and (max-height: 24rem) {

    .max-h-8-16-24rem {
        max-height: 16rem;
    }
}

@media only screen and (min-height: 32rem) {

    .max-h-8-16-24rem{
        max-height: 24rem;
    }
}

.overflow-y-scroll {
    overflow-y: scroll;
}
.font-bold {
  font-weight: bold;
}

.font-size-nano {
  font-size: xx-small;
}

.font-size-tiny {
  font-size: x-small;
}

.font-size-mini {
  font-size: small;
}

.font-size-norm {
  font-size: medium;
}

.font-size-bulk {
    font-size: large;
}

.font-size-hulk {
    font-size: x-large;
}

.font-size-huge {
    font-size: xx-large;
}

.font-size-vast {
    font-size: xxx-large;
}

.cell-item-text {
  background-color: #f5f5f5; /* whitesmoke */
}

@media (prefers-color-scheme: dark) {
  .cell-item-text {
    background-color: rgba(64, 48, 48, 1);
  }
}

/* unvisited link */
a:link {
  color: royalblue;
}

/* mouse over link */
a:hover {
  color: mediumslateblue;
}

/* selected link */
a:active {
  color: slateblue;
}

/* visited link */
a:visited {
  color: darkslateblue;
}

@media (prefers-color-scheme: dark) {
    /* unvisited link */
    a:link {
      color: cornflowerblue;
    }

    /* mouse over link */
    a:hover {
      color: deepskyblue;
    }

    /* selected link */
    a:active {
      color: mediumslateblue;
    }

    /* visited link */
    a:visited {
      color: blueviolet;
    }
}

.text-logo-link:link {
    color: #A0522D; /* sienna */
    text-decoration: none;
}

.text-logo-link:hover {
    color: #A0522D; /* sienna */
    cursor:pointer;
}

/* selected link */
.text-logo-link:active {
    color: #A0522D; /* sienna */
    cursor:pointer;
}

/* visited link */
.text-logo-link:visited {
    color: #A0522D; /* sienna */
}

.text-center {
    text-align: center;
}

.text-mute {
  color: gray;
}

@media (prefers-color-scheme: dark) {
  .text-mute {
    color: silver;
  }
}

.text-align-center {
  text-align: center;
}

.keep-space-newline {
  white-space: break-spaces;
}

.keep-space-no-wrap {
  white-space: nowrap;
}

.word-wrap {
  word-wrap: break-word;
  word-break: break-all;
}


.m-0-auto {
    margin: 0 auto;
}

.m-0pt5rem {
    margin: 0.5rem;
}

.mx-0pt5rem {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-1rem {
    margin-left: 1rem;
    margin-right: 1rem;
}

.my-0pt5rem {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-1rem {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.ml-0pt25rem {
    margin-left: 0.25rem;
}

.ml-0pt5rem {
    margin-left: 0.5rem;
}

.ml-1rem {
    margin-left: 1rem;
}

.mr-0pt5rem {
    margin-right: 0.5rem;
}

.mr-1rem {
    margin-right: 1rem;
}

.mt-less-0pt5rem {
    margin-top: -0.5rem;
}

.mt-0pt5rem {
    margin-top: 0.5rem;
}

.mt-1rem {
    margin-top: 1rem;
}

.mt-2rem {
    margin-top: 2rem;
}

.mb-0pt5rem {
    margin-bottom: 0.5rem;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.mb-2rem {
    margin-bottom: 2rem;
}

.p-0pt5rem {
    padding: 0.5rem;
}

.p-1rem {
    padding: 1rem;
}

.px-0pt5rem {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-1rem {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-0pt5rem {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-1rem {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pl-0pt25rem {
    padding-left: 0.25rem;
}

.pl-0pt5rem {
    padding-left: 0.5rem;
}

.pl-1rem {
    padding-left: 1rem;
}

.pl-1pt5rem {
    padding-left: 1.5rem;
}

.pt-0pt5rem {
    padding-top: 0.5rem;
}

.pt-1rem {
    padding-top: 1rem;
}

.pb-1rem {
    padding-bottom: 1rem;
}