assets/style.css
/* automatic dark mode */
@media (prefers-color-scheme: dark) {
  body:not([data-iframe-mode]) {
    color: white;
    background-color: black;
  }
}

/* manual dark mode */
.dark {
  color: white;
  background-color: black;
}
/* link for both light and dark */
:link,
:visited {
  color: #90aefc;
}

@font-face {
  font-family: nintendo_NTLG;
  src: url(/assets/nintendo_NTLG.woff2);
  font-display: swap;
}

html, select, input[type=submit] {
  /*font-family: sans-serif;
*/
  font-family:
      nintendo_NTLG,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
}
body {
  line-height: 180%;
  text-align: center;
}
.small {
  font-size: 12px;
}

.smaller {
  font-size: 10px;
  line-height: 150%;
}

.left-aligned-ul {
  padding: 0;
  text-align: initial;
}

/* only intended to show in other langs */
.subtitle {
  margin: -10px -10px 10px;
  font-size: 18px;
}
.results {
  list-style-type: none;
  padding: 0;
}
ul {
  list-style-position: inside;
}
.results > li {
  margin: 0 auto 5px;
  padding: 5px;
  word-break: break-word;
}
.results img {
  border-radius: 5px;
  /*max-width: calc(100vw - 32px);
  */max-width: 100%;
  border: 1px solid #808080;
}
.short-number {
  width: 45px;
}
.load-error {
  color: red;
  border-radius: 5px;
  max-width: 80vw;
  border: 1px solid red;
}
.long-field {
  /* now entire site is thin
  width: 30em;*/
  margin: 5px;
  font-size: 16px;
  width: 90%;
}
.green-border {
  border: 2px solid green;
  border-radius: 5px;
}
/* for pattern attribute */
/*.long-field:required:invalid:not(:placeholder-shown) {
  background-color: lightpink;
}*/


/* enlarge controls slightly */
select,
input[type=file],
input[type=submit] {
  width: 70%;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 16px;
  margin: 5px;
}
input[type=checkbox] {
  width: 25px;
  height: 25px;
}


input[type=submit] {
  width: 80%;
  margin-top: 5px;
  height: 50px;
}


/* desktop (mobile is default) */
@media (width > 40em) {
  body {
    max-width: 26em;
    margin: 0 auto;
  }
  .load-error {
    max-width: 40vw;
  }

  select,
  input[type=file],
  input[type=submit] {
    font-size: 13px;
    width: initial;
    box-sizing: initial;
    padding: 5px;
  }

  input[type=submit] {
    width: 50%;
    height: 15px;
    /*border-radius: initial;*/
    padding: 10px;
  }


}
/*
@media (width < 40em) {

}
*/

/* allows an element to span the entire width */
.entire-width {
  width: 96vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: calc(-48vw); /* Adjust based on the width */
  margin-right: calc(-48vw); /* Adjust based on the width */
}

@media (width > 1000px) {
  .entire-width {
    width: 900px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-450px); /* Adjust based on the width */
    margin-right: calc(-450px); /* Adjust based on the width */
  }
}

.fade-in {
  opacity: 0;
  -webkit-animation: fadeInAnimation 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: fadeInAnimation 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-animation: fadeInAnimation 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: fadeInAnimation 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
.fade-in {
  opacity: 0;
  transform: translateY(-100%) translateX(0);
  animation: slideInFrom 250ms cubic-bezier(0.165, 0.840, 0.440, 1.000) 0ms forwards;
}
@keyframes slideInFrom{ to {  transform: unset; opacity: unset; } }
*/

/* summaries are what you click to expand a details */
summary {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: default;
}

/* for data conversion dropdown */

pre, code {
  white-space: pre-wrap;
  word-break: break-all;
}
.no-break-all {
  word-break: break-word;
}

.left-justified-compact {
  padding: 0;
  text-align: initial;
  font-size: 13px;
  line-height: 150%;
}
.left-justified-compact > li {
  margin-top: 5px;
}

code {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
code.code-block {
  display: block;
}
.image-80 {
  height: 80px;
  width: 80px;
}
.image-qr {
  height: 150px;
  width: 150px;
}
.image-qr-container {
  margin-top: 8px;
  padding: 5px;
  border-style: dotted;
  border-radius: 5px;
}
.image-qr-container:hover img {
  height: 100%;
  width: 100%;
}
.dashed {
  border: 3px dashed #555;
}
/* add spacing so these do not clash */
input[type=range] {
  margin: 10px;
}
input[type=color] {
  margin: 5px;
}






/* iframe mode */
body[data-iframe-mode] h1,
body[data-iframe-mode] h2,
body[data-iframe-mode] h3,
/*body[data-iframe-mode] hr,*/
body[data-iframe-mode] .hide-iframe-mode {
  display: none;
}


@media (prefers-color-scheme: dark) {
  body:not([data-iframe-mode]) {
    background: #eeeeee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAIAAAC2BqGFAAABOElEQVR42u3cwQnDMBBEUWXIyV24//58Tg0BadHK7xcQZt8hARP8ue97rOl5ntGt67oWfXKGSgINGrRAgwaNADRogQYNWqBBCzRo0AINWqBBgxZo0NoEuuO/Z5bODuWa8aFcc0Io1xwSyjXnfMt01v1Rc53mRJy8WblyWN6sXDkvL1cuGxnKNVNDuWawZx1FgQYNWqBBg0YAGrRAgwYt0KAFGjRogQYt0KBBCzRogQYNWqBBCzRo0AINWqBBgxZo0AINGrRAgxZo0KAFGrS2gG73Grylg9N3eq+p6X5Al5E544z95+WkY3Ye9p34DrKy93yWNREne846THn+V8cx1tMPyf4TD1Be9WPY2nrR+PSa21R5eNZRFmjQoAUaNGgEoEELNGjQAg1aoEGDFmjQAg0atECD1p/9ABENTxu+Riw4AAAAAElFTkSuQmCC') !important;
  }
}

body:not([data-iframe-mode]) {
  background-color: #f4f4f4;
  background-attachment: fixed;
  background: #eeeeee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAIAAAC2BqGFAAADF0lEQVR4nO2dwW7bMBAFuRLz/5+bgyWyhwUE13ELtN43EIE3pyQHZj1YUoRMPcX393fT8Hg8zvOcc4rGryUi9n3/+voSjb+Jxm2tbdsWEbrxa4mIbVPa0A1tnrFoCIuGsGgIi4awaAiLhrBoCIuGsGgIi4awaAiLhrBoCIuGsGgIi4awaAiLhrBoCKHoOecqX4E3fbUS0RGxluUkaxZ9c6/q6DnnGEM0uIgxhq456kVnO+fRmYWaOqvNshVNXS96znkcx0JnlC5S9HEcisorRWcjnOd5nmfhsDBX/bV93UtGyZrGGFnl20XjqvsO58Su8l7qzF+zqfd9z0NiJQ1eIzovI1cv/KwsK87zbTcRnTVHxMtF+8V1RJQU3B+Px4eH+66i2zvFWeW2bYVFl/B89Wu/V54/jzHGGCXNMcbo53l+uA/70zRsraXZfd9rp2EJ1ySLiLcTMS1nG30oes7ZdZuw/Ay99+zl+yhOsp7s1og4jqP9Ycn++ff/QHuvI3u53amRX8jCrjp1qETnitF7v8+i/BeeZ57oX6judaToG64Yb8nth/Ryrerom2zj/gnp0xXCpWOVdk6yqZdcOhQjq1lv6TAvWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDWDSERUNYNIRFQ1g0hEVDSESvFS34jK5yYWSmLudTgTpPVSVamvMpQpqnKlw6dDmf5QB5qsKlQ5fzWQ6Qp6rddYhyPgvB8lT755krfM5nCWSe6pyzXwo+GQXO+SyBzFMdY/SSd7uTOZ8lwHmq+77XpO2SOZ8l8HmqNaLhnE8dujzVyl0HlvMpRZSnKnmZgjrnU4Q0T1XyMgV1zqcCdZ6qMDJTl/MpQrojUt3rWKudE2meqrDp1nKtrnax2b0uFg1h0RAWDWHREBYNYdEQFg1h0RAWDWHREBYNYdEQFg1h0RAWDWHREBYNYdEQFg0hFL3W0xXS5ypaa78A+zg9ngAQ62UAAAAASUVORK5CYII=');
}
