h1 {
  font-size: xxx-large;
  font-family: "Montserrat", sans-serif;
  text-transform: Uppercase;
  text-align: center;
}

body {
  --padding: 8px;
  --card-width: 304px;
  --border-stroke-width: 2px;
  --stroke: solid var(--border-stroke-width) black;
  margin: 0;
  font-family: Spectral;
  font-size: 20px;
}

@media screen and (min-width: 1280px) {
  .card-grid {
    --column-count: 4;
  }
}

@media screen and (max-width: 1280px) {
  .card-grid {
    --column-count: 3;
  }
}

@media screen and (max-width: 940px) {
  .card-grid {
    --column-count: 2;
  }
}

@media screen and (max-width: 630px) {
  .card-grid {
    --column-count: 1;
  }
}

@supports (-webkit-touch-callout: none) {
  .card-grid {
    --column-count: 1;
    overflow-x: scroll;
  }
}

div.main-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: absolute;
}

.main-container-body {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: var(--padding);
}

.main-container-body-iframe {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.main-container-body-iframe * {
  flex-grow: 1;
}

.container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-center-ve {
  flex-direction: column;
}

img, video {
  object-fit: contain;
}

/*  _   _             */
/* | \ | | __ ___   __*/
/* |  \| |/ _` \ \ / /*/
/* | |\  | (_| |\ V / */
/* |_| \_|\__,_| \_/  */
/*                    */

nav {
  display: flex;
  justify-content: center;
  margin: auto;
  background: lightgrey;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: black;
  text-align: center;
  padding: var(--padding);
  text-decoration: underline;
}

nav li a:hover {
  background-color: #ADD8E6;
}

nav li a.active {
  background-color: #ADD8E6;
}

/*  ____                      _     */
/* / ___|  ___  __ _ _ __ ___| |__  */
/* \___ \ / _ \/ _` | '__/ __| '_ \ */
/*  ___) |  __/ (_| | | | (__| | | |*/
/* |____/ \___|\__,_|_|  \___|_| |_|*/
/*                                  */

div.center {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-block-start: 10px;
  margin-block-end: 10px;
}

input#search-box {
  margin: var(--padding);
}

div.search-bar input,label {
  vertical-align: middle;
}

/*   ____              _     */
/*  / ___|__ _ _ __ __| |___ */
/* | |   / _` | '__/ _` / __|*/
/* | |__| (_| | | | (_| \__ \*/
/*  \____\__,_|_|  \__,_|___/*/
/*                           */

.instructions {
  font-style: italic;
  text-align: center;
}

.card-grid {
  column-count: var(--column-count);
  --content-width: calc(var(--column-count) * var(--card-width));
  --number-of-gutters: calc(var(--column-count) - 1);
  --padding-width: calc(var(--number-of-gutters) * var(--padding));
  width: calc(var(--content-width) + var(--padding-width));
  margin: auto;
  margin-top: 0;
  padding-bottom: var(--padding);
}

.card-grid > .card {
  margin-bottom: 8px;
}

.card > a {
  color: inherit;
  text-decoration: inherit;
}

.card {
  position: relative;
  --actual-card-width: calc(var(--card-width) - calc(var(--padding) * 2) - calc(var(--border-stroke-width) * 2));
  width: var(--actual-card-width);
  border: var(--stroke);
  border-radius: 7px;
  padding: var(--padding);
  break-inside: avoid;
  background-color: white;
}

.card > div {
  padding-left: var(--padding);
  padding-right: var(--padding);
}

.card > table + div {
  padding-top: var(--padding);
}

.icon-stroke {
  stroke: black;
  stroke-width: 35px;
  stroke-linecap: round;
}

.card.nightMode {
  border-color: white;
}

.nightMode .icon-stroke {
  stroke: white;
}

.card-contents > * {
  width: 100%;
}

th,.card-head {
  padding-bottom: var(--padding);
  border-bottom: var(--stroke);
}

.card-head > div,.card-body > div {
  margin-left: var(--padding);
  margin-right: var(--padding);
  width: calc(100% - (var(--padding) * 2));
}

.card-body {
  padding-top: var(--padding);
}

.card-body > div + div {
  padding-top: var(--padding);
}

.card-body div {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card-body tr {
  line-height: 1.1;
}

tr:first-child td {
  padding-top: var(--padding);
}

tr:last-child td {
  padding-bottom: var(--padding);
}

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

.title {
  font-size: 24px;
  font-weight: bold;
}

.nightMode th {
  border-color: white;
}

.uppercase {
  text-transform: uppercase;
}

.text-small {
  font-size: 10pt;
}

.small-caps {
  font-family: "Spectral SC";
  font-variant: small-caps;
}

.i {
  font-style: italic;
}

.tdleft, .tdright {
  vertical-align: top;
}

.tdleft {
  min-width: 4em;
  text-align: right;
}

.tdright {
  text-align: left;
}

/* TODO separate into icon common and icon specific */
.icon {
  visibility: hidden;
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  /* background-color: black; */
}

.nightMode .icon {
  /* background-color: white; */
}

.icon-toml-cocktail {
  visibility: visible;
  background-image: url("/assets/icon_glass_martini.svg");
}

.icon-toml-cocktail-martini, .icon-toml-cocktail-cocktail {
  visibility: visible;
  background-image: url("/assets/icon_glass_martini.svg");
}

.icon-toml-cocktail-coupe {
  visibility: visible;
  background-image: url("/assets/icon_glass_coupe.svg");
}

.icon-toml-cocktail-highball {
  visibility: visible;
  background-image: url("/assets/icon_glass_highball.svg");
}

.icon-toml-cocktail-lowball, .icon-toml-cocktail-rocks {
  visibility: visible;
  background-image: url("/assets/icon_glass_lowball.svg");
}

.icon-toml-cocktail-flute {
  visibility: visible;
  background-image: url("/assets/icon_glass_flute.svg");
}

img, video {
  width: 100%;
}

/*   ___  _     _           _   */
/*  / _ \| |__ (_) ___  ___| |_ */
/* | | | | '_ \| |/ _ \/ __| __|*/
/* | |_| | |_) | |  __/ (__| |_ */
/*  \___/|_.__// |\___|\___|\__|*/
/*           |__/               */

@media screen and (min-width: 1280px) {
  div.object {
    max-width: 66ch;
  }
}

@media screen and (max-width: 1280px) {
  div.object {
    max-width: 100vw;
  }
}

@media screen and (max-width: 940px) {
  div.object {
    max-width: 100vw;
  }
}

@media screen and (max-width: 630px) {
  div.object {
    max-width: 100vw;
  }
}

summary {
  list-style-position: outside;
  margin-inline-start: 40px;
}

div.object-head {
  padding-bottom: var(--padding);
  border-bottom: var(--stroke);
}

.object-container {
  display: flex;
  flex-direction: column;
}

i.rc-scout__logo {
  vertical-align: -1pt;
}

p.rc-scout__text {
  height: unset;
}