1  
   2  * {
   3    margin: 0;
   4    padding: 0;
   5    box-sizing: border-box;
   6  }
   7  
   8  /*----------------------------------------------------------------------------------------------------------*/
   9  
  10  body {
  11    background-color: #181818;
  12    color: #ffffff;
  13    font-family: 'Consolas';
  14    line-height: 1.6;
  15  }
  16  
  17  /*----------------------------------------------------------------------------------------------------------*/
  18  
  19  header {
  20    background-color: #1f1f1f;
  21    padding: 0.75rem 1rem;
  22    border-bottom: 1px solid #f60;
  23  }
  24  
  25  /*----------------------------------------------------------------------------------------------------------*/
  26  
  27  .branding {
  28    display: flex;
  29    align-items: center;
  30    gap: 0.75rem;
  31    padding: 0.5rem 0;
  32    flex-wrap: wrap;
  33  }
  34  
  35  .logo {
  36    width: 64px;
  37    height: 64px;
  38    flex-shrink: 0;
  39    object-fit: contain;
  40    filter: brightness(1.2);
  41  }
  42  
  43  .site-name {
  44    font-size: 1.75rem;
  45    color: #ff6600;
  46    font-weight: 700;
  47    font-family: 'Consolas', monospace;
  48    line-height: 1.2;
  49    white-space: nowrap;
  50  }
  51  
  52  /*----------------------------------------------------------------------------------------------------------*/
  53  
  54  main {
  55    padding: 1rem 2rem;
  56    max-width: clamp(600px, 90%, 1200px);
  57    margin: 0 auto;
  58  }
  59  
  60  .main-content h2 {
  61    font-size: 2rem;
  62    margin-bottom: 1rem;
  63    color: #f60;
  64  }
  65  
  66  .main-content p {
  67    font-size: 1.1rem;
  68    margin-bottom: 2rem;
  69    color: #ddd;
  70  }
  71  
  72  /*----------------------------------------------------------------------------------------------------------*/
  73  
  74  .cta-button {
  75    display: inline-block;
  76    padding: 0.75rem 1.5rem;
  77    background-color: #f60;
  78    color: #181818;
  79    text-decoration: none;
  80    border-radius: 4px;
  81    font-weight: bold;
  82    transition: background 0.3s ease;
  83  }
  84  
  85  .cta-button:hover {
  86    background-color: #e55a00;
  87    cursor: pointer;
  88  }
  89  
  90  .post-content button {
  91    display: inline-block;
  92    padding: 0.75rem 1.5rem;
  93    background-color: #f60;
  94    color: #181818;
  95    text-decoration: none;
  96    border-radius: 4px;
  97    font-weight: bold;
  98    border: none;
  99    cursor: pointer;
 100    transition: background 0.3s ease, transform 0.2s ease;
 101  }
 102  
 103  .post-content button:hover {
 104    background-color: #e55a00;
 105    transform: scale(1.05);
 106  }
 107  
 108  .post-content button:focus {
 109    outline: none;
 110    box-shadow: 0 0 5px rgba(255, 102, 0, 0.7);
 111  }
 112  
 113  /*----------------------------------------------------------------------------------------------------------*/
 114  
 115  body::before {
 116    content: '';
 117    position: fixed;
 118    top: 0;
 119    left: 0;
 120    width: 60px;
 121    height: 100vh;
 122    background-color: transparent;
 123  }
 124  
 125  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 126  
 127  .card-grid {
 128    display: flex;
 129    flex-wrap: wrap;
 130    gap: 1rem;
 131    margin-top: 1rem;
 132    justify-content: center;
 133  }
 134  
 135  .info-card {
 136    flex: 1 1 350px;
 137    max-width: 400px;
 138    height: 200px;
 139    box-sizing: border-box;
 140    border: 2px solid #f60;
 141    border-radius: 15px;
 142    padding: 1rem;
 143    min-height: 220px;
 144    background: #1F1F1F;
 145  }
 146  
 147  .info-card:hover {
 148    transform: translateY(-5px);
 149  }
 150  
 151  .info-card h3 {
 152    color: #f60;
 153    margin-bottom: 0.8rem;
 154    font-size: 1.3rem;
 155    text-align: center;
 156  }
 157  
 158  .info-card p {
 159    color: #ccc;
 160    font-size: 1rem;
 161    margin-bottom: 1.5rem;
 162  }
 163  
 164  .card-button {
 165    display: inline-block;
 166    padding: 5px;
 167    background-color: #f60;
 168    color: #181818;
 169    text-decoration: none;
 170    text-align: center;
 171    border-radius: 4px;
 172    font-weight: bold;
 173    font-size: 0.95rem;
 174    transition: background-color 0.3s ease;
 175    margin-top: auto;
 176    align-self: flex-start;
 177    margin-top: auto;
 178    margin-bottom: 0;
 179  }
 180  
 181  .card-button:hover {
 182    background-color: #e55a00;
 183  }
 184  
 185  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 186  
 187  .site-post {
 188    margin: 1rem auto;
 189    padding: 0;
 190    color: #ddd;
 191    max-width: 100%;
 192  }
 193  
 194  .post-header {
 195    padding-bottom: 1rem;
 196  }
 197  
 198  .post-title {
 199    font-size: 2rem;
 200    color: #ff6600;
 201    margin-bottom: 0.25rem;
 202    font-weight: 600;
 203    line-height: 1.2;
 204  }
 205  
 206  .post-meta {
 207    font-size: 0.85rem;
 208    color: #999;
 209    display: flex;
 210    flex-wrap: wrap;
 211    gap: 0.5rem;
 212    align-items: center;
 213  }
 214  
 215  .post-meta time,
 216  .post-meta .post-author {
 217    font-style: normal;
 218  }
 219  
 220  .meta-separator {
 221    color: #555;
 222  }
 223  
 224  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 225  
 226  .post-content h1 {
 227    color: #f60;
 228    margin-top: 1rem;
 229    font-size: 1.75rem;
 230  }
 231  
 232  .post-content h2 {
 233    color: #f60;
 234    margin-top: 0rem;
 235    font-size: 1.25rem;
 236  }
 237  
 238  .post-content h3 {
 239    color: #f60;
 240    margin-top: 1rem;
 241    font-size: 1rem;
 242  }
 243  
 244  .post-content p {
 245    margin-bottom: 1.5rem;
 246    line-height: 1.7;
 247  }
 248  
 249  .post-content a:not(.button1):not(.img-link) {
 250    color: #ff6600;
 251    text-decoration: underline;
 252    transition: color 0.2s ease, background-color 0.2s ease;
 253    padding: 2px 4px;
 254  }
 255  
 256  .post-content a:hover:not(.button1):not(.img-link),
 257  .post-content a:focus:not(.button1):not(.img-link) {
 258    color: #fff;
 259    background-color: #ff6600;
 260    text-decoration: none;
 261    padding: 2px 4px;
 262    border-radius: 4px;
 263  }
 264  
 265  .post-content ul {
 266    list-style: none;
 267    padding-left: 0;
 268    margin: 2rem 0;
 269  }
 270  
 271  .post-content li {
 272    position: relative;
 273    padding-left: 1.5rem;
 274    margin-bottom: 1.2rem;
 275    color: #ddd;
 276    font-size: 1rem;
 277    line-height: 1.6;
 278  }
 279  
 280  .post-content li strong {
 281    color: #f60;
 282  }
 283  
 284  .post-content hr {
 285    color: #f60;
 286  }
 287  
 288  .post-content li::before {
 289    content: "▸";
 290    position: absolute;
 291    left: 0;
 292    color: #ff6600;
 293    font-weight: bold;
 294    font-size: 1rem;
 295    line-height: 1;
 296    top: 0.1em;
 297  }
 298  
 299  .post-content table:not(.hljs-ln) {
 300    width: 100%;
 301    border-collapse: collapse;
 302    margin: 2rem 0;
 303    font-size: 0.95rem;
 304    color: #ddd;
 305  }
 306  
 307  .post-content .hljs-ln-code {
 308    width: 100%;
 309  }
 310  
 311  .post-content thead {
 312    background-color: #1f1f1f;
 313  }
 314  
 315  .hljs {
 316    padding: 0 !important;
 317  }
 318  
 319  .hljs-ln td {
 320    padding: 2px !important;
 321  }
 322  
 323  .post-content th,
 324  .post-content td {
 325    padding: 0.75rem 1rem;
 326    text-align: left;
 327    border-bottom: 1px solid #333;
 328  }
 329  
 330  .post-content th {
 331    color: #ff6600;
 332    font-weight: 600;
 333    border-bottom: 2px solid #ff6600;
 334  }
 335  
 336  .post-content tr:hover {
 337    background-color: #222;
 338  }
 339  
 340  .post-content caption {
 341    caption-side: top;
 342    font-size: 1rem;
 343    color: #aaa;
 344    margin-bottom: 0.5rem;
 345    text-align: left;
 346  }
 347  
 348  .post-content img {
 349    display: block;
 350    max-width: 100%;
 351    height: auto;
 352    cursor: zoom-in;
 353    transition: transform 0.2s ease;
 354    margin: 2rem auto;
 355  }
 356  
 357  .post-content figcaption,
 358  .post-content .caption {
 359    font-size: 0.9em;
 360    color: #aaa;
 361    text-align: center;
 362    margin-top: 0.5rem;
 363  }
 364  
 365  .post-nav {
 366    display: flex;
 367    justify-content: space-between;
 368    margin-top: 3rem;
 369    padding-top: 2rem;
 370    border-top: 1px solid #2a2a2a;
 371  }
 372  
 373  .post-nav a {
 374    color: #f60;
 375    text-decoration: none;
 376    font-size: 0.95rem;
 377    transition: color 0.2s ease;
 378  }
 379  
 380  .post-nav a:hover {
 381    color: #fff;
 382  }
 383  
 384  .post-content .video-embed {
 385    position: relative;
 386    padding-bottom: 56.25%;
 387    height: 0;
 388    overflow: hidden;
 389    margin: 2rem 0;
 390    border-radius: 6px;
 391  }
 392  
 393  .post-content .video-embed iframe {
 394    position: absolute;
 395    top: 0; left: 0;
 396    width: 100%;
 397    height: 100%;
 398    border: 0;
 399  }
 400  
 401  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 402  
 403  blockquote {
 404    background-color: #1f1f1f;
 405    border-left: 4px solid #f60;
 406    padding: 10px;
 407    padding-left: 1rem;
 408    color: #aaa;
 409    margin: 2rem 0;
 410    border-top-right-radius: 5px;
 411    border-bottom-right-radius: 5px;
 412  }
 413  
 414  /*----------------------------------------------------------------------------------------------------------*/
 415  
 416  pre {
 417    background-color: #1f1f1f;
 418    padding: 1rem;
 419    border-radius: 6px;
 420    overflow-x: auto;
 421    margin: 1.5rem 0;
 422  }
 423  
 424  code {
 425    font-family: Consolas, monospace;
 426    color: #f60;
 427  }
 428  
 429  /*----------------------------------------------------------------------------------------------------------*/
 430  
 431  .post-footer {
 432    margin-top: 2rem;
 433    text-align: left;
 434  }
 435  
 436  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 437  
 438  .breadcrumb {
 439    font-size: 0.9rem;
 440    color: #aaa;
 441    margin: 1rem 0 1rem;
 442  }
 443  
 444  /* Sub Override */
 445  .main-content .breadcrumb {
 446    margin: 0;
 447  }
 448  
 449  .breadcrumb a {
 450    color: #ff6600;
 451    text-decoration: none;
 452    transition: color 0.2s ease;
 453    padding: 1px 4px;
 454  }
 455  
 456  .breadcrumb a:hover {
 457    color: #fff;
 458    background-color: #ff6600;
 459    padding: 1px 4px;
 460    border-radius: 4px;
 461  }
 462  
 463  .breadcrumb .divider {
 464    margin: 0 0.1rem;
 465    color: #666;
 466  }
 467  
 468  .breadcrumb .current {
 469    color: #ddd;
 470  }
 471  
 472  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 473  
 474  img {
 475      max-width: 95%;
 476      width: 550px;
 477  }
 478  
 479  #zoom-modal {
 480    position: fixed;
 481    top: 0;
 482    left: 0;
 483    width: 100vw;
 484    height: 100vh;
 485    background: rgba(0, 0, 0, 0.8);
 486    display: none;
 487    justify-content: center;
 488    align-items: center;
 489    z-index: 9999;
 490    cursor: zoom-out;
 491  }
 492  
 493  #zoom-modal img {
 494    max-width: 90vw;
 495    max-height: 90vh;
 496    width: auto;
 497    height: auto;
 498    border-radius: 8px;
 499    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
 500    animation: zoomIn 0.25s ease;
 501    border: 3px solid #ff6600;
 502  }
 503  
 504  @keyframes zoomIn {
 505    from {
 506      transform: scale(0.85);
 507      opacity: 0;
 508    }
 509    to {
 510      transform: scale(1);
 511      opacity: 1;
 512    }
 513  }
 514  
 515  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 516  
 517  .videodiv {
 518    width: 1000px;
 519    max-width: 95%;
 520    margin: 0 auto;
 521    border: 3px solid #ff6600;
 522    border-radius: 10px;
 523  }
 524  
 525  video {
 526    width: 100%;
 527    max-width: 1000px;
 528    height: auto;
 529    background-color: #000;
 530    outline: none;
 531    border-radius: 7px;
 532  }
 533  
 534  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 535  
 536  .post-content .code-box {
 537    position: relative;
 538    background-color: #1f1f1f;
 539    border: 1px solid #ff6600;
 540    border-radius: 6px;
 541    margin: 1rem 0;
 542    overflow: auto;
 543    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 544    font-size: 12px;
 545    color: #ddd;
 546    line-height: 1.6;
 547  }
 548  
 549  .post-content .code-box pre,
 550  .post-content .code-box code {
 551    background: none;
 552    border: none;
 553    padding: 0;
 554    margin: 0;
 555    font-size: inherit;
 556    color: inherit;
 557    white-space: pre;
 558  }
 559  
 560  .post-content .hljs-ln td {
 561    padding: 0.25rem 0.5rem !important;
 562  }
 563  
 564  .post-content .hljs-ln-numbers {
 565    text-align: right;
 566    color: #666;
 567    border-right: 1px solid #333;
 568    padding-right: 1rem;
 569    user-select: none;
 570  
 571    user-select: none;
 572    -webkit-user-select: none;
 573    -moz-user-select: none;
 574    pointer-events: none;
 575  }
 576  
 577  .post-content .hljs {
 578    background: transparent;
 579    padding: 0 !important;
 580  }
 581  
 582  .post-content .hljs-ln-line:hover {
 583    background-color: rgba(255, 102, 0, 0.05);
 584  }
 585  
 586  pre code {
 587    display: block;
 588    background-color: #f5f5f5;
 589    border: 1px solid #ccc;
 590    border-radius: 4px;
 591    padding: 8px 12px;
 592    font-family: 'Fira Mono', 'Courier New', monospace;
 593    font-size: 14px;
 594    overflow-x: auto;
 595    color: #333;
 596    margin: 10px 0;
 597    white-space: pre;
 598  }
 599  
 600  #copyCodeButton {
 601    position: absolute;
 602    top: 10px; /* Space to border. */
 603    right: 10px; /* Space to border. */
 604    background-color: #ff6600;
 605    color: white;
 606    border: none;
 607    padding: 6px 12px;
 608    font-size: 16px;
 609    border-radius: 5px;
 610    cursor: pointer;
 611    z-index: 10; /* Button displayed over the text. */
 612  }
 613  
 614  #copyCodeButton:hover {
 615    background-color: #e65c00;
 616  }
 617  
 618  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 619  
 620  #background {
 621    position:absolute;
 622    z-index:-1;
 623    right:0;
 624      max-width: unset;
 625    bottom:0;
 626    top:0;
 627    min-height:100vh
 628  }
 629  
 630  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 631  
 632  .button1 {
 633    display: inline-block;
 634    padding: 0.75rem 1.5rem;
 635    background-color: #f60;
 636    color: #181818;
 637    text-decoration: none;
 638    border-radius: 4px;
 639    font-weight: bold;
 640    transition: background 0.3s ease;
 641  }
 642  
 643  .button1:hover {
 644    background-color: #e55a00;
 645  }
 646  
 647  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 648  
 649  @keyframes blink-caret {
 650      50% {
 651          border-color: #ff6600; /* Blinking caret */
 652      }
 653  }
 654  
 655  /* Steps & width == number of letters | +1 for simulated space. */
 656  .typing-animation {
 657    font: bold 135% Consolas, Monaco, monospace;
 658    border-right: .1em solid #1f1f1f;
 659    color: #ff6600;
 660    white-space: nowrap;
 661    overflow: hidden;
 662    animation: blink-caret .75s step-end infinite alternate;
 663    display: inline-block;
 664    max-width: 100%;
 665  }
 666  
 667  /*-------------------------------------------------------------------------------------------------------------------------------------*/
 668  
 669  .toggle-btn-navbar {
 670      width: 40px;
 671      height: 40px;
 672      background-color: #ff6600;
 673      color: black;
 674      border: none;
 675      padding: 10px;
 676      cursor: pointer;
 677      z-index: 1000;
 678      transition: left 0.5s ease;
 679  }
 680  
 681  /*----------------------------------------------------------------------------------------------------------*/
 682  
 683  .navbar-body {
 684      background-color: #1F1F1F;
 685      overflow-x: hidden;
 686  }
 687  
 688  .navbar-container {
 689      position: absolute;
 690      top: 0;
 691      width: 0;
 692      height: 100%;
 693      background-color: #212121;
 694      z-index: 999;
 695      transition: width 0.5s ease;
 696  }
 697  
 698  .navbar-container.fixed {
 699    top: -100px;
 700    overflow-y: hidden;
 701  }
 702  
 703  .navbar-open {
 704      width: 480px;
 705      background-color: #212121;
 706      overflow-y: hidden;
 707      overflow-x: hidden;
 708      border-left: none;
 709      border-right: 5px solid #ff6600;
 710  }
 711  
 712  .navbar-iframe {
 713      width: 100%;
 714      height: 100%;
 715      overflow-x: hidden;
 716      overflow-y: hidden;
 717  }
 718  
 719  .navbar {
 720      padding: 0;
 721      margin: 0;
 722      overflow-y: hidden;
 723  }
 724  
 725  .navbar-branding {
 726    display: flex;
 727    align-items: center;
 728    gap: 0.75rem;
 729    padding: 0.5rem 0;
 730    padding-top: 20px;
 731    padding-left: 70px;
 732  }
 733  
 734  .navbar-logo {
 735    min-width: 60px !important;
 736    min-height: 60px !important;
 737    max-width: 60px !important;
 738    max-height: 60px !important;
 739    flex-shrink: 0;
 740    object-fit: contain;
 741    filter: brightness(1.2);
 742  }
 743  
 744  .navbar-site-name {
 745    font-size: 1.75rem;
 746    color: #ff6600;
 747    font-weight: 700;
 748    font-family: 'Consolas', monospace;
 749    line-height: 1.2;
 750    white-space: nowrap;
 751  }
 752  
 753  /*----------------------------------------------------------------------------------------------------------*/
 754  
 755  .navbar-item {
 756      position: relative;
 757      padding-left: 10px;
 758      display: block;
 759      width: 470px;
 760  }
 761  
 762  .navbar-link {
 763      text-decoration: none;
 764      color: #ff6600;
 765      font-size: 17px;
 766  }
 767  
 768  .navbar-link:hover {
 769      text-decoration: underline;
 770  }
 771  
 772  /*----------------------------------------------------------------------------------------------------------*/
 773  
 774  .navbar-item.level-0 { passing-left: 0px; }
 775  .navbar-item.level-1 { padding-left: 30px; }
 776  .navbar-item.level-2 { padding-left: 50px; }
 777  .navbar-item.level-3 { padding-left: 70px; }
 778  .navbar-item.level-4 { padding-left: 90px; }
 779  .navbar-item.level-5 { padding-left: 110px; }
 780  
 781  /*----------------------------------------------------------------------------------------------------------*/
 782  
 783  .navbar-item.has-children {
 784    position: relative;
 785    display: inline-flex;
 786    align-items: center;
 787    white-space: nowrap;
 788  }
 789  
 790  .toggle-label {
 791    cursor: pointer;
 792    color: #ff6600;
 793    text-decoration: none;
 794    padding-right: 20px; /* Gap between arrow and link text */
 795  }
 796  
 797  .mini-link {
 798    font-size: 14px;
 799    color: #ff6600;
 800    text-decoration: none;
 801    display: inline-flex;
 802    align-items: center;
 803    margin-left: -4px;
 804    transition: transform 0.2s;
 805  }
 806  
 807  .mini-link:hover {
 808    text-decoration: underline;
 809    transform: translateX(2px);
 810    color: #fff;
 811    background-color: #ff6600;
 812    text-decoration: none;
 813    padding: 2px 2px;
 814    border-radius: 2px;
 815  }
 816  
 817  /*----------------------------------------------------------------------------------------------------------*/
 818  
 819  #search {
 820    margin: 20px auto;
 821    padding: 8px;
 822    width: 100%;
 823    max-width: 500px;
 824    min-width: 250px;
 825    background-color: #181818;
 826    border: 3px solid #FF6600;
 827    border-radius: 10px;
 828    font-size: 1rem;
 829    font-family: sans-serif;
 830    outline: none;
 831    transition: all 0.3s ease;
 832    margin-left: 20px;
 833    margin-right: 20px;
 834    color: #E2E8F0;
 835  }
 836  
 837  #search:focus {
 838    outline: none;
 839    border-color: #FF6600;
 840    background-color: #181818;
 841    color: inherit;
 842  }
 843  
 844  #search::placeholder {
 845    color: #CBD5E0;
 846    opacity: 1;
 847  }
 848  
 849  #search:focus {
 850    caret-color: #FF6600;
 851  }
 852  
 853  #search input {
 854    color: #E2E8F0;
 855    background-color: #181818;
 856    border: none;
 857    outline: none;
 858  }
 859  
 860  input {
 861    color: #FF6600 !important;
 862    caret-color: #FF6600 !important;
 863  }
 864  
 865  /*----------------------------------------------------------------------------------------------------------*/
 866  
 867  .post-content textarea {
 868    background: #282c34;
 869    width: 100%;
 870    height: 200px;
 871    font-family: Consolas, "Courier New", monospace;
 872    font-size: 12px;
 873    padding: 10px;
 874    margin-bottom: 1.5rem;
 875    border-radius: 5px;
 876    border: 2px solid #ff6600;
 877    color: #FF6600 !important;
 878    caret-color: #FF6600 !important;
 879    resize: none;
 880  }
 881  
 882  .post-content button {
 883    display: inline-block;
 884    padding: 0.75rem 1.5rem;
 885    background-color: #f60;
 886    color: #181818;
 887    text-decoration: none;
 888    border-radius: 4px;
 889    font-weight: bold;
 890    border: none;
 891    cursor: pointer;
 892    transition: background 0.3s ease, transform 0.2s ease;
 893  }
 894  
 895  .post-content button:hover {
 896    background-color: #e55a00;
 897    transform: scale(1.05);
 898  }
 899  
 900  .post-content button:focus {
 901    outline: none;
 902    box-shadow: 0 0 5px rgba(255, 102, 0, 0.7);
 903  }
 904  
 905  /*-----------------------------------------------------------------------*/
 906  
 907  .output-container {
 908    position: relative;
 909    width: 100%;
 910    height: 200px;
 911  }
 912  
 913  #OutputBox {
 914    background: #282c34;
 915    text-align: left;
 916    width: 100%;
 917    height: 200px;
 918    border-radius: 5px;
 919    border: 2px solid #ff6600;
 920    color: #FF6600 !important;
 921    padding: 10px;
 922    font-family: Consolas, "Courier New", monospace;
 923    white-space: pre-wrap;
 924    word-wrap: break-word;
 925    font-size: 12px;
 926    overflow: auto;
 927  }
 928  
 929  
 930  #copyButton {
 931    position: absolute;
 932    top: 10px; /* Space to border. */
 933    right: 10px; /* Space to border. */
 934    background-color: #ff6600;
 935    color: white;
 936    border: none;
 937    padding: 6px 12px;
 938    font-size: 16px;
 939    border-radius: 5px;
 940    cursor: pointer;
 941    z-index: 10; /* Button displayed over the text. */
 942  }
 943  
 944  #copyButton:hover {
 945    background-color: #e65c00;
 946  }
 947  
 948  *:focus {
 949    outline: none;
 950  }
 951  
 952  /*-----------------------------------------------------------------------*/
 953  
 954  .retroBanner-container {
 955    text-align: center;
 956    font-size: 0;
 957    line-height: 0;
 958    max-width: 1000px;
 959    margin: 0 auto;
 960    padding: 0 3px;
 961  }
 962  
 963  .retro-banner {
 964    display: inline-block !important;
 965    width: 88px !important;
 966    height: 31px !important;
 967    margin: 0 3px 3px 0 !important;
 968    padding: 0;
 969    border: 0;
 970    vertical-align: top;
 971  }
 972  
 973  .retro-banner:nth-child(11n) {
 974    margin-right: 0 !important;
 975  }
 976  
 977  /* Mobile */
 978  @media (max-width: 768px) {
 979    .retro-banner {
 980      width: 80px !important;
 981      margin-right: 2px !important;
 982    }
 983    .retro-banner:nth-child(10n) {
 984      margin-right: 0 !important;
 985    }
 986  }
 987  
 988  .retro-banner-NON-NORM {
 989    display: inline-block !important;
 990    margin: 0 20px 20px 0 !important;
 991    padding: 0;
 992    border: 0;
 993    vertical-align: top;
 994  }
 995  
 996  .img-link {
 997  
 998  }
 999  
1000  /*-----------------------------------------------------------------------*/
1001  
1002  .dropdown {
1003    background-color: #181818;
1004    color: #f60;
1005    border: 2px solid #f60;
1006    border-radius: 8px;
1007    padding: 10px 40px 10px 16px;
1008    font-size: 1rem;
1009    font-weight: 600;
1010    font-family: 'Consolas';
1011    cursor: pointer;
1012    width: 250px;
1013    line-height: 1.3;
1014    background-position:
1015      calc(100% - 20px) center,
1016      calc(100% - 15px) center;
1017    background-repeat: no-repeat;
1018    background-size: 8px 8px;
1019    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
1020    outline: none;
1021    position: relative;
1022  }
1023  
1024  .dropdown:disabled {
1025    background-color: #121212;
1026    border-color: #662a00;
1027    color: #662a00;
1028    cursor: not-allowed;
1029    background-image: none;
1030  }
1031  
1032  .dropdown-content {
1033    display: none;
1034    position: absolute;
1035    background-color: #f60;
1036    min-width: 160px;
1037    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
1038    padding: 12px 16px;
1039    z-index: 1;
1040  }
1041  
1042  /*-----------------------------------------------------------------------*/
1043  
1044  /* Paste & Share site*/
1045  
1046  #outputLink,
1047  #decryptedContent,
1048  #decrypt_pass,
1049  #password {
1050    background: #282c34;
1051    text-align: left;
1052    font: Consolas;
1053    width: 100%;
1054    border-radius: 5px;
1055    border: 2px solid #ff6600;
1056    color: #FF6600;
1057    padding: 10px;
1058    font-family: Consolas;
1059    white-space: pre-wrap;
1060    word-wrap: break-word;
1061    font-size: 12px;
1062    overflow: auto;
1063  }