water.css
   1  :root {
   2    --background-body: #2a2a2f;
   3    --background: #161f27;
   4    --background-alt: #1a242f;
   5    --selection: #1c76c5;
   6    --text-main: #c0c6cc;
   7    --text-bright: #dbe0e3;
   8    /*--text-bright: #fff;*/
   9    --text-muted: #a9b1ba;
  10    --links: #7eb7e1;
  11    --focus: #0096bfab;
  12    --border: #526980;
  13    --code: #ffbe85;
  14    --animation-duration: 0.1s;
  15    --button-base: #0c151c;
  16    --button-hover: #040a0f;
  17    --scrollbar-thumb: var(--button-hover);
  18    --scrollbar-thumb-hover: rgb(0, 0, 0);
  19    --form-placeholder: #a9a9a9;
  20    --form-text: #fff;
  21    --variable: #d941e2;
  22    --highlight: #efdb43;
  23    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
  24  }
  25  
  26  @font-face {
  27      font-family: yond;
  28      src: url(yond.woff2);
  29  }
  30  
  31  html {
  32    text-size-adjust: none;
  33    -webkit-text-size-adjust: none;
  34    -moz-text-size-adjust: none;
  35    -ms-text-size-adjust: none;
  36  }
  37  
  38  body {
  39    font-size: 1.1em;
  40  }
  41  
  42  body button {
  43    margin-bottom: 0.8em;
  44    margin-left: 0.2em;
  45    margin-left: 0.2em;
  46  }
  47  
  48  body li {
  49    margin-top: 0.4em;
  50    margin-bottom: 0.4em;
  51  }
  52  
  53  span.menu a {
  54      text-decoration: none;
  55  }
  56  
  57  body .logo {
  58    font-family: "yond", "monospace";
  59    font-size: 5em;
  60    text-align: center;
  61    width: 100%;
  62    display: block;
  63    line-height: 0.75em;
  64    color: #fff;
  65    color: var(--text-bright);
  66  }
  67  
  68  body a.topic_link {
  69    color: #dbdbdb;
  70    color: var(--text-main);
  71  }
  72  
  73  body .article_date {
  74    font-family: "yond", "monospace";
  75    font-size: 1.75em;
  76    text-align: right;
  77    line-height: 0.5em;
  78    margin-right: -0.33em;
  79    margin-bottom: -0.35em;
  80  }
  81  
  82  body .article_photo {
  83    width: 100%;
  84  }
  85  
  86  body .topic {
  87    display: inline-block;
  88    vertical-align: top;
  89    width: 48%;
  90    margin-bottom: 2.5em;
  91  }
  92  
  93  body .topic:nth-child(even) {margin-left: 2%}
  94  body .topic:nth-child(odd) {margin-right: 2%}
  95  
  96  body .topic .topic_image {
  97    display: block;
  98    width: 100%;
  99  }
 100  
 101  /*body .topic .topic_image { border: 1px solid #666; }*/
 102  
 103  body .topic .topic_title {
 104    display: block;
 105    font-weight: 600;
 106    font-size: 1.2em;
 107    margin-top: 0.35em;
 108    margin-bottom: 0.2em;
 109  }
 110  
 111  body .topic .topic_date {
 112    display: block;
 113    font-size: 0.85em;
 114    font-weight: 400;
 115    font-style: oblique;
 116    text-align: left;
 117    margin-bottom: 1em;
 118  }
 119  
 120  table#loracalc {
 121    /*border: 1px solid #888;*/
 122    min-width: 50%;
 123    width: auto;
 124  }
 125  
 126  table#loracalc tbody tr td {
 127    vertical-align: middle;
 128    font-weight: bold;
 129  }
 130  
 131  table#loracalc tbody tr td.lcfield {
 132    padding-left: 5em;
 133  }
 134  
 135  table#loracalc tbody tr:nth-child(2n) {
 136    background-color: transparent;
 137  }
 138  
 139  table#loracalc input {
 140    display: inline-block;
 141  }
 142  
 143  
 144  html {
 145    scrollbar-color: #040a0f #202b38;
 146    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
 147    scrollbar-width: thin;
 148  }
 149  
 150  body {
 151    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
 152    line-height: 1.4;
 153    max-width: 800px;
 154    margin: 20px auto;
 155    padding: 0 10px;
 156    word-wrap: break-word;
 157    color: #dbdbdb;
 158    color: var(--text-main);
 159    background: #202b38;
 160    background: var(--background-body);
 161    text-rendering: optimizeLegibility;
 162  }
 163  
 164  button {
 165    transition:
 166      background-color 0.1s linear,
 167      border-color 0.1s linear,
 168      color 0.1s linear,
 169      box-shadow 0.1s linear,
 170      transform 0.1s ease;
 171    transition:
 172      background-color var(--animation-duration) linear,
 173      border-color var(--animation-duration) linear,
 174      color var(--animation-duration) linear,
 175      box-shadow var(--animation-duration) linear,
 176      transform var(--animation-duration) ease;
 177  }
 178  
 179  input {
 180    transition:
 181      background-color 0.1s linear,
 182      border-color 0.1s linear,
 183      color 0.1s linear,
 184      box-shadow 0.1s linear,
 185      transform 0.1s ease;
 186    transition:
 187      background-color var(--animation-duration) linear,
 188      border-color var(--animation-duration) linear,
 189      color var(--animation-duration) linear,
 190      box-shadow var(--animation-duration) linear,
 191      transform var(--animation-duration) ease;
 192  }
 193  
 194  textarea {
 195    transition:
 196      background-color 0.1s linear,
 197      border-color 0.1s linear,
 198      color 0.1s linear,
 199      box-shadow 0.1s linear,
 200      transform 0.1s ease;
 201    transition:
 202      background-color var(--animation-duration) linear,
 203      border-color var(--animation-duration) linear,
 204      color var(--animation-duration) linear,
 205      box-shadow var(--animation-duration) linear,
 206      transform var(--animation-duration) ease;
 207  }
 208  
 209  h1 {
 210    font-size: 1.7em;
 211    margin-top: 0;
 212  }
 213  
 214  h1,
 215  h2,
 216  h3,
 217  h4,
 218  h5,
 219  h6 {
 220    margin-bottom: 12px;
 221    margin-top: 24px;
 222  }
 223  
 224  h1 {
 225    color: #fff;
 226    color: var(--text-bright);
 227  }
 228  
 229  h2 {
 230    font-size: 1.4em;
 231    color: #fff;
 232    color: var(--text-bright);
 233  }
 234  
 235  h3 {
 236    color: #fff;
 237    color: var(--text-bright);
 238  }
 239  
 240  h4 {
 241    color: #fff;
 242    color: var(--text-bright);
 243  }
 244  
 245  h5 {
 246    color: #fff;
 247    color: var(--text-bright);
 248  }
 249  
 250  h6 {
 251    color: #fff;
 252    color: var(--text-bright);
 253  }
 254  
 255  strong {
 256    color: #fff;
 257    color: var(--text-bright);
 258  }
 259  
 260  h1,
 261  h2,
 262  h3,
 263  h4,
 264  h5,
 265  h6,
 266  b,
 267  strong,
 268  th {
 269    font-weight: 600;
 270  }
 271  
 272  q::before {
 273    content: none;
 274  }
 275  
 276  q::after {
 277    content: none;
 278  }
 279  
 280  blockquote {
 281    border-left: 4px solid #0096bfab;
 282    border-left: 4px solid var(--focus);
 283    margin: 1.5em 0;
 284    padding: 0.5em 1em;
 285    font-style: italic;
 286  }
 287  
 288  q {
 289    border-left: 4px solid #0096bfab;
 290    border-left: 4px solid var(--focus);
 291    margin: 1.5em 0;
 292    padding: 0.5em 1em;
 293    font-style: italic;
 294  }
 295  
 296  blockquote > footer {
 297    font-style: normal;
 298    border: 0;
 299  }
 300  
 301  blockquote cite {
 302    font-style: normal;
 303  }
 304  
 305  address {
 306    font-style: normal;
 307  }
 308  
 309  a[href^='mailto\:']::before {
 310    content: '📧 ';
 311  }
 312  
 313  a[href^='tel\:']::before {
 314    content: '📞 ';
 315  }
 316  
 317  a[href^='sms\:']::before {
 318    content: '💬 ';
 319  }
 320  
 321  mark {
 322    background-color: #efdb43;
 323    background-color: var(--highlight);
 324    border-radius: 2px;
 325    padding: 0 2px 0 2px;
 326    color: #000;
 327  }
 328  
 329  a > code,
 330  a > strong {
 331    color: inherit;
 332  }
 333  
 334  button,
 335  select,
 336  input[type='submit'],
 337  input[type='reset'],
 338  input[type='button'],
 339  input[type='checkbox'],
 340  input[type='range'],
 341  input[type='radio'] {
 342    cursor: pointer;
 343  }
 344  
 345  input,
 346  select {
 347    display: block;
 348  }
 349  
 350  [type='checkbox'],
 351  [type='radio'] {
 352    display: initial;
 353  }
 354  
 355  input {
 356    color: #fff;
 357    color: var(--form-text);
 358    background-color: #161f27;
 359    background-color: var(--background);
 360    font-family: inherit;
 361    font-size: inherit;
 362    margin-right: 6px;
 363    margin-bottom: 6px;
 364    padding: 10px;
 365    border: none;
 366    border-radius: 6px;
 367    outline: none;
 368  }
 369  
 370  button {
 371    color: #fff;
 372    color: var(--form-text);
 373    background-color: #161f27;
 374    background-color: var(--background);
 375    font-family: inherit;
 376    font-size: inherit;
 377    margin-right: 6px;
 378    margin-bottom: 6px;
 379    padding: 10px;
 380    border: none;
 381    border-radius: 6px;
 382    outline: none;
 383  }
 384  
 385  textarea {
 386    color: #fff;
 387    color: var(--form-text);
 388    background-color: #161f27;
 389    background-color: var(--background);
 390    font-family: inherit;
 391    font-size: inherit;
 392    margin-right: 6px;
 393    margin-bottom: 6px;
 394    padding: 10px;
 395    border: none;
 396    border-radius: 6px;
 397    outline: none;
 398  }
 399  
 400  select {
 401    color: #fff;
 402    color: var(--form-text);
 403    background-color: #161f27;
 404    background-color: var(--background);
 405    font-family: inherit;
 406    font-size: inherit;
 407    margin-right: 6px;
 408    margin-bottom: 6px;
 409    padding: 10px;
 410    border: none;
 411    border-radius: 6px;
 412    outline: none;
 413  }
 414  
 415  button {
 416    background-color: #0c151c;
 417    background-color: var(--button-base);
 418    padding-right: 30px;
 419    padding-left: 30px;
 420  }
 421  
 422  input[type='submit'] {
 423    background-color: #0c151c;
 424    background-color: var(--button-base);
 425    padding-right: 30px;
 426    padding-left: 30px;
 427  }
 428  
 429  input[type='reset'] {
 430    background-color: #0c151c;
 431    background-color: var(--button-base);
 432    padding-right: 30px;
 433    padding-left: 30px;
 434  }
 435  
 436  input[type='button'] {
 437    background-color: #0c151c;
 438    background-color: var(--button-base);
 439    padding-right: 30px;
 440    padding-left: 30px;
 441  }
 442  
 443  button:hover {
 444    background: #040a0f;
 445    background: var(--button-hover);
 446  }
 447  
 448  input[type='submit']:hover {
 449    background: #040a0f;
 450    background: var(--button-hover);
 451  }
 452  
 453  input[type='reset']:hover {
 454    background: #040a0f;
 455    background: var(--button-hover);
 456  }
 457  
 458  input[type='button']:hover {
 459    background: #040a0f;
 460    background: var(--button-hover);
 461  }
 462  
 463  input[type='color'] {
 464    min-height: 2rem;
 465    padding: 8px;
 466    cursor: pointer;
 467  }
 468  
 469  input[type='checkbox'],
 470  input[type='radio'] {
 471    height: 1em;
 472    width: 1em;
 473  }
 474  
 475  input[type='radio'] {
 476    border-radius: 100%;
 477  }
 478  
 479  input {
 480    vertical-align: top;
 481  }
 482  
 483  label {
 484    vertical-align: middle;
 485    margin-bottom: 4px;
 486    display: inline-block;
 487  }
 488  
 489  input:not([type='checkbox']):not([type='radio']),
 490  input[type='range'],
 491  select,
 492  button,
 493  textarea {
 494    -webkit-appearance: none;
 495  }
 496  
 497  textarea {
 498    display: block;
 499    margin-right: 0;
 500    box-sizing: border-box;
 501    resize: vertical;
 502  }
 503  
 504  textarea:not([cols]) {
 505    width: 100%;
 506  }
 507  
 508  textarea:not([rows]) {
 509    min-height: 40px;
 510    height: 140px;
 511  }
 512  
 513  select {
 514    background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
 515    background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
 516    padding-right: 35px;
 517  }
 518  
 519  select::-ms-expand {
 520    display: none;
 521  }
 522  
 523  select[multiple] {
 524    padding-right: 10px;
 525    background-image: none;
 526    overflow-y: auto;
 527  }
 528  
 529  input:focus {
 530    box-shadow: 0 0 0 2px #0096bfab;
 531    box-shadow: 0 0 0 2px var(--focus);
 532  }
 533  
 534  select:focus {
 535    box-shadow: 0 0 0 2px #0096bfab;
 536    box-shadow: 0 0 0 2px var(--focus);
 537  }
 538  
 539  button:focus {
 540    box-shadow: 0 0 0 2px #0096bfab;
 541    box-shadow: 0 0 0 2px var(--focus);
 542  }
 543  
 544  textarea:focus {
 545    box-shadow: 0 0 0 2px #0096bfab;
 546    box-shadow: 0 0 0 2px var(--focus);
 547  }
 548  
 549  input[type='checkbox']:active,
 550  input[type='radio']:active,
 551  input[type='submit']:active,
 552  input[type='reset']:active,
 553  input[type='button']:active,
 554  input[type='range']:active,
 555  button:active {
 556    transform: translateY(2px);
 557  }
 558  
 559  input:disabled,
 560  select:disabled,
 561  button:disabled,
 562  textarea:disabled {
 563    cursor: not-allowed;
 564    opacity: 0.5;
 565  }
 566  
 567  ::-moz-placeholder {
 568    color: #a9a9a9;
 569    color: var(--form-placeholder);
 570  }
 571  
 572  :-ms-input-placeholder {
 573    color: #a9a9a9;
 574    color: var(--form-placeholder);
 575  }
 576  
 577  ::-ms-input-placeholder {
 578    color: #a9a9a9;
 579    color: var(--form-placeholder);
 580  }
 581  
 582  ::placeholder {
 583    color: #a9a9a9;
 584    color: var(--form-placeholder);
 585  }
 586  
 587  fieldset {
 588    border: 1px #0096bfab solid;
 589    border: 1px var(--focus) solid;
 590    border-radius: 6px;
 591    margin: 0;
 592    margin-bottom: 12px;
 593    padding: 10px;
 594  }
 595  
 596  legend {
 597    font-size: 0.9em;
 598    font-weight: 600;
 599  }
 600  
 601  input[type='range'] {
 602    margin: 10px 0;
 603    padding: 10px 0;
 604    background: transparent;
 605  }
 606  
 607  input[type='range']:focus {
 608    outline: none;
 609  }
 610  
 611  input[type='range']::-webkit-slider-runnable-track {
 612    width: 100%;
 613    height: 9.5px;
 614    -webkit-transition: 0.2s;
 615    transition: 0.2s;
 616    background: #161f27;
 617    background: var(--background);
 618    border-radius: 3px;
 619  }
 620  
 621  input[type='range']::-webkit-slider-thumb {
 622    box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
 623    height: 20px;
 624    width: 20px;
 625    border-radius: 50%;
 626    background: #526980;
 627    background: var(--border);
 628    -webkit-appearance: none;
 629    margin-top: -7px;
 630  }
 631  
 632  input[type='range']:focus::-webkit-slider-runnable-track {
 633    background: #161f27;
 634    background: var(--background);
 635  }
 636  
 637  input[type='range']::-moz-range-track {
 638    width: 100%;
 639    height: 9.5px;
 640    -moz-transition: 0.2s;
 641    transition: 0.2s;
 642    background: #161f27;
 643    background: var(--background);
 644    border-radius: 3px;
 645  }
 646  
 647  input[type='range']::-moz-range-thumb {
 648    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 649    height: 20px;
 650    width: 20px;
 651    border-radius: 50%;
 652    background: #526980;
 653    background: var(--border);
 654  }
 655  
 656  input[type='range']::-ms-track {
 657    width: 100%;
 658    height: 9.5px;
 659    background: transparent;
 660    border-color: transparent;
 661    border-width: 16px 0;
 662    color: transparent;
 663  }
 664  
 665  input[type='range']::-ms-fill-lower {
 666    background: #161f27;
 667    background: var(--background);
 668    border: 0.2px solid #010101;
 669    border-radius: 3px;
 670    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 671  }
 672  
 673  input[type='range']::-ms-fill-upper {
 674    background: #161f27;
 675    background: var(--background);
 676    border: 0.2px solid #010101;
 677    border-radius: 3px;
 678    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 679  }
 680  
 681  input[type='range']::-ms-thumb {
 682    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
 683    border: 1px solid #000;
 684    height: 20px;
 685    width: 20px;
 686    border-radius: 50%;
 687    background: #526980;
 688    background: var(--border);
 689  }
 690  
 691  input[type='range']:focus::-ms-fill-lower {
 692    background: #161f27;
 693    background: var(--background);
 694  }
 695  
 696  input[type='range']:focus::-ms-fill-upper {
 697    background: #161f27;
 698    background: var(--background);
 699  }
 700  
 701  a {
 702    text-decoration: underline;
 703    color: #41adff;
 704    color: var(--links);
 705  }
 706  
 707  a:hover {
 708    text-decoration: underline;
 709  }
 710  
 711  code {
 712    background: #161f27;
 713    background: var(--background);
 714    color: #ffbe85;
 715    color: var(--code);
 716    padding: 2.5px 5px;
 717    border-radius: 6px;
 718    font-size: 1em;
 719  }
 720  
 721  samp {
 722    background: #161f27;
 723    background: var(--background);
 724    color: #ffbe85;
 725    color: var(--code);
 726    padding: 2.5px 5px;
 727    border-radius: 6px;
 728    font-size: 1em;
 729  }
 730  
 731  time {
 732    background: #161f27;
 733    background: var(--background);
 734    color: #ffbe85;
 735    color: var(--code);
 736    padding: 2.5px 5px;
 737    border-radius: 6px;
 738    font-size: 1em;
 739  }
 740  
 741  pre > code {
 742    padding: 10px;
 743    display: block;
 744    overflow-x: auto;
 745  }
 746  
 747  var {
 748    color: #d941e2;
 749    color: var(--variable);
 750    font-style: normal;
 751    font-family: monospace;
 752  }
 753  
 754  kbd {
 755    background: #161f27;
 756    background: var(--background);
 757    border: 1px solid #526980;
 758    border: 1px solid var(--border);
 759    border-radius: 2px;
 760    color: #dbdbdb;
 761    color: var(--text-main);
 762    padding: 2px 4px 2px 4px;
 763  }
 764  
 765  img,
 766  video {
 767    max-width: 100%;
 768    height: auto;
 769    display: block;
 770    margin-left: auto;
 771    margin-right: auto;
 772  }
 773  
 774  hr {
 775    border: none;
 776    border-top: 1px solid #526980;
 777    border-top: 1px solid var(--border);
 778  }
 779  
 780  table {
 781    border-collapse: collapse;
 782    margin-bottom: 10px;
 783    width: 100%;
 784    table-layout: fixed;
 785  }
 786  
 787  table caption {
 788    text-align: left;
 789  }
 790  
 791  td,
 792  th {
 793    padding: 6px;
 794    text-align: left;
 795    vertical-align: top;
 796    word-wrap: break-word;
 797  }
 798  
 799  thead {
 800    border-bottom: 1px solid #526980;
 801    border-bottom: 1px solid var(--border);
 802  }
 803  
 804  tfoot {
 805    border-top: 1px solid #526980;
 806    border-top: 1px solid var(--border);
 807  }
 808  
 809  tbody tr:nth-child(even) {
 810    background-color: #161f27;
 811    background-color: var(--background);
 812  }
 813  
 814  tbody tr:nth-child(even) button {
 815    background-color: #1a242f;
 816    background-color: var(--background-alt);
 817  }
 818  
 819  tbody tr:nth-child(even) button:hover {
 820    background-color: #202b38;
 821    background-color: var(--background-body);
 822  }
 823  
 824  ::-webkit-scrollbar {
 825    height: 10px;
 826    width: 10px;
 827  }
 828  
 829  ::-webkit-scrollbar-track {
 830    background: #161f27;
 831    background: var(--background);
 832    border-radius: 6px;
 833  }
 834  
 835  ::-webkit-scrollbar-thumb {
 836    background: #040a0f;
 837    background: var(--scrollbar-thumb);
 838    border-radius: 6px;
 839  }
 840  
 841  ::-webkit-scrollbar-thumb:hover {
 842    background: rgb(0, 0, 0);
 843    background: var(--scrollbar-thumb-hover);
 844  }
 845  
 846  ::-moz-selection {
 847    background-color: #1c76c5;
 848    background-color: var(--selection);
 849    color: #fff;
 850    color: var(--text-bright);
 851  }
 852  
 853  ::selection {
 854    background-color: #1c76c5;
 855    background-color: var(--selection);
 856    color: #fff;
 857    color: var(--text-bright);
 858  }
 859  
 860  details {
 861    display: flex;
 862    flex-direction: column;
 863    align-items: flex-start;
 864    background-color: #1a242f;
 865    background-color: var(--background-alt);
 866    padding: 10px 10px 0;
 867    margin: 1em 0;
 868    border-radius: 6px;
 869    overflow: hidden;
 870  }
 871  
 872  details[open] {
 873    padding: 10px;
 874  }
 875  
 876  details > :last-child {
 877    margin-bottom: 0;
 878  }
 879  
 880  details[open] summary {
 881    margin-bottom: 10px;
 882  }
 883  
 884  summary {
 885    display: list-item;
 886    background-color: #161f27;
 887    background-color: var(--background);
 888    padding: 10px;
 889    margin: -10px -10px 0;
 890    cursor: pointer;
 891    outline: none;
 892  }
 893  
 894  summary:hover,
 895  summary:focus {
 896    text-decoration: underline;
 897  }
 898  
 899  details > :not(summary) {
 900    margin-top: 0;
 901  }
 902  
 903  summary::-webkit-details-marker {
 904    color: #dbdbdb;
 905    color: var(--text-main);
 906  }
 907  
 908  dialog {
 909    background-color: #1a242f;
 910    background-color: var(--background-alt);
 911    color: #dbdbdb;
 912    color: var(--text-main);
 913    border: none;
 914    border-radius: 6px;
 915    border-color: #526980;
 916    border-color: var(--border);
 917    padding: 10px 30px;
 918  }
 919  
 920  dialog > header:first-child {
 921    background-color: #161f27;
 922    background-color: var(--background);
 923    border-radius: 6px 6px 0 0;
 924    margin: -10px -30px 10px;
 925    padding: 10px;
 926    text-align: center;
 927  }
 928  
 929  dialog::-webkit-backdrop {
 930    background: #0000009c;
 931    -webkit-backdrop-filter: blur(4px);
 932            backdrop-filter: blur(4px);
 933  }
 934  
 935  dialog::backdrop {
 936    background: #0000009c;
 937    -webkit-backdrop-filter: blur(4px);
 938            backdrop-filter: blur(4px);
 939  }
 940  
 941  footer {
 942    border-top: 1px solid #526980;
 943    border-top: 1px solid var(--border);
 944    padding-top: 10px;
 945    color: #a9b1ba;
 946    color: var(--text-muted);
 947  }
 948  
 949  body > footer {
 950    margin-top: 40px;
 951  }
 952  
 953  @media print {
 954    body,
 955    pre,
 956    code,
 957    summary,
 958    details,
 959    button,
 960    input,
 961    textarea {
 962      background-color: #fff;
 963    }
 964  
 965    button,
 966    input,
 967    textarea {
 968      border: 1px solid #000;
 969    }
 970  
 971    body,
 972    h1,
 973    h2,
 974    h3,
 975    h4,
 976    h5,
 977    h6,
 978    pre,
 979    code,
 980    button,
 981    input,
 982    textarea,
 983    footer,
 984    summary,
 985    strong {
 986      color: #000;
 987    }
 988  
 989    summary::marker {
 990      color: #000;
 991    }
 992  
 993    summary::-webkit-details-marker {
 994      color: #000;
 995    }
 996  
 997    tbody tr:nth-child(even) {
 998      background-color: #f2f2f2;
 999    }
1000  
1001    a {
1002      color: #00f;
1003      text-decoration: underline;
1004    }
1005  }
1006  
1007  #load_overlay {
1008    display: none;
1009  }