/* || GENERAL STYLES ||||||||||||||||||||||||||||||||||||||||||||||||

It is a good idea to have all of the common styling first
in the stylesheet. This means all of the styles which will
generally apply unless you do something special with that
element. You will typically have rules set up for

In this section of the stylesheet we are providing default
styling for the type on the site, setting up a default style
for data tables and lists and so on

body { ... }

ul, ol { ... }
*/

body {
  background: #000;
  color: #fff;
  font-family: Georgia, serif;
  text-align: center;
  margin: 0 auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

textarea {
  resize: none;
}

/* || SITEWIDE ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Then we can add everything that is used sitewide.
That might be things like the basic page layout, the header,
navigation styling, and so on.

.main-nav { ... }

.logo { ... }
*/

.head-section {
  font-family: Smooch, cursive;
  font-size: calc(4rem + 0.5vw);
  font-weight: bold;
}

.body-section-head {
  font-family: Karantina, cursive;
  font-size: calc(3rem + 0.5vw);
  display: flex;
  position: relative; /* to accomodate absolute position of children */
}

.body-section {
  text-align: left;
  margin: 1em 2em;
  border: 2px solid white;
}

.body-section label {
  margin: 0;
}

.body-section .filler,
.body-section button,
.body-section input,
.body-section output,
.body-section select,
.body-section textarea {
  margin: 0.5em;
}

.body-section label ~ output {
  margin: 0 0 0 0.5em;
}

.ghost-button {
  background: inherit;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #666;
  border-radius: 0.25em;
  padding: 0.25em 0 0.1em;
  flex: 1;
}

.ghost-button:disabled {
  opacity: 0.33;
}

.ghost-button:focus { outline: 1px solid #eee; }

@media screen and (pointer: fine) { /* hover wonky on touchscreens */
  .ghost-button:hover { background: gray; }
}

.ghost-button:active { background: #ccc; }

.toggle-button {
  margin: 0 auto;
}

.toggle-button label { /* google "radio button toggle switch" */
  background-color: #e4e4e4;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
  text-align: center;
  padding: 0.25em 1em;
  margin-top: 0.5em;
  margin-right: -1px;
  margin-left: 0;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px gray, 0 1px rgba(255 255 255 / 10%);
}

.toggle-button label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}

.toggle-button label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}

.toggle-button input:checked + label {
  background-color: #a5dc86;
  box-shadow: none;
}

.menu {
  text-align: left;
  margin: 1em 6em;
  border: 2px solid pink;
}

.feature-check {
  font-family: Consolas, "Courier New", monospace;
}

/* || DATA ATTRIBUTES |||||||||||||||||||||||||||||||||||||||||||||||

https://css-tricks.com/a-complete-guide-to-data-attributes/#aa-styling-with-data-attributes

// Selects if the attribute is present at all
[data-size] { }

// Selects if the attribute has a particular value
[data-state="open"],
[aria-expanded="true"] { }

// "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14"
[data-version^="3"] { }

// "Contains" meaning if the value has the string anywhere inside it
[data-company*="google"] { }
*/

/* || CARDS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Finally, we will include CSS for specific things, broken down
by the context, page, or even component in which they are used.

.product-listing { ... }

.product-box { ... }
*/

.card-gui {
  display: grid;
  grid-template-rows: auto;
}

.card-flex-row {
  display: flex;
  flex-wrap: wrap; /* overflow onto next line if row element too wide */
  position: relative; /* to accomodate absolute position of children */
}

.card-flex-col {
  display: flex;
  flex: 1; /* share space equally when flex cols are side-by-side */
  flex-direction: column;
  position: relative; /* same as row .. good for implementing overlays */
}

#card-notif {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: center;
  margin: 1rem;
  border-radius: 5px;
}

#card-decks {
  margin: auto;
}

#card-log,
#card-side-b,
#card-text {
  min-width: 14em; /* good layout balance across device/viewport widths */
  min-height: 12em; /* high enough for readability across various widths */
}

#card-text,
#card-log {
  background: white;
  color: black;
  border-radius: 0.5em;
  padding: 0.5em;
  position: relative;
}

#card-text {
  touch-action: pan-y;
  white-space: pre-wrap;
}

#card-log {
  font-family: monospace;
  white-space: pre-wrap; /* pre more readable but the stretch causes probs */
  overflow-x: auto;
}

#card-text::first-line,
#card-log::first-line {
  font-weight: bold;
}

#card-progress {
  background: transparent;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: right;
  margin: 0;
  position: absolute;
  top: 1em;
  right: 1.5em;
}

.card-hint {
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5em;
  font-weight: bold;
  position: absolute;
  filter: opacity(0);
}

#card-o-hint {
  text-align: left;
  left: 0;
}

#card-x-hint {
  text-align: right;
  right: 0;
}

#card-shuffle-auto + label {
  font-family: Arial, Helvetica, sans-serif;
}

#card-fixed-width + label {
  font-family: monospace;
}