input {

        width: 100%;

        border: none;

    }

    .in {

        background-color: #ffe;

        border: solid 1px #ccc;

        width: 100%;

        text-align: right;

    }

    .out {

        background-color: #eee;

        border: solid 1px #55f;

        width: 100%;

        text-align: right;

        color: #00f;

    }

    table {

        border: none;

        margin: auto;

        border-collapse: collapse;

        padding: 3.5px;

    }

    .heading, th {

        background-color: #cdf;

        font-size: larger;

        padding: 10px;

    }

    .equation {
        background-color: #eee;
        text-align: center;
        font-style: italic;
    }

    td {

        width: 100px;

        max-width: 100%;

        padding: 3.5px;

    }

    .rowlabel {

        text-align: right;

        margin: 10px 10px;

        width: auto;

    }

    .collabel {

        text-align: center;
        margin: none;
        padding: none;

    }

    .colunit {

        text-align: center;
        font-style: italic;
        margin: none;
        padding: none;
        font-size: .75em;

    }

    .clear {

        width: 100%;

        border-radius: 0px;;

    }

    /*

body {

	background-color: red;

}

*/



html, body {

    font-family: 'Roboto', sans-serif;

  }

  h1, h2, h3, h4, h5, h6 {

      font-family: 'Staatliches', cursive;

  }

  

  body {

      background-color: #f0f0f7;

  }

  

  #boundary {

      max-width: 100%;

      width: 1200px;

      margin: auto;

      background-color: #f0f0f7;

  }

  

  main {

      width: 100%;

      margin: auto;

      text-align: center;

  }

  

  footer {

      padding: 10px;

  }

  

  main h1 {

      padding: 10px 0px;

  }

  

  section {

      background: white;

      border: 1px solid #eee;

      margin: 7px 3.5px 0px 3.5px;

      padding: 7px;

      display: inline-block;

      vertical-align: top;

  }

  td .radio {

      width: 25px;

  }

  #backtotop {

    display: none;

    position: fixed;

    bottom: 20px;

    right: 30px;

    z-index: 99;

    font-size: 18px;

    border: none;

    outline: none;

    background-color: #555;

    color: #fff;

    cursor: pointer;

    padding: 15px;

    border-radius: 4px;

  }

  

  #backtotop:hover {

    background-color: #888;

  }

   /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  /* ---------------- Dark mode ---------------- */
  html.dark-mode body,
  html.dark-mode #boundary {
      background-color: #14161a;
      color: #d7dadf;
  }

  html.dark-mode header.w3-white {
      background-color: #1e2127 !important;
      color: #e8eaed !important;
  }

  html.dark-mode section {
      background: #1e2127;
      border-color: #2c2f36;
      color: #d7dadf;
  }

  html.dark-mode .heading,
  html.dark-mode th {
      background-color: #2a3340;
      color: #e8eaed;
  }

  html.dark-mode .equation {
      background-color: #23262c;
      color: #cdd2d8;
  }

  html.dark-mode input { color: #f0f0f0; }

  html.dark-mode .in {
      background-color: #20242b;
      border-color: #3a3f48;
      color: #f0f0f0;
  }

  html.dark-mode .out {
      background-color: #1a1d22;
      border-color: #4664c8;
      color: #7fa8ff;
  }

  /* Nav dropdown panels use w3-light-gray (which forces light colors) */
  html.dark-mode .w3-dropdown-content.w3-light-gray {
      background-color: #23262c !important;
      color: #d7dadf !important;
  }
  html.dark-mode .w3-dropdown-content .w3-button { color: #d7dadf !important; }
  html.dark-mode .w3-dropdown-content .w3-button:hover {
      background-color: #3a3f48 !important;
      color: #fff !important;
  }

  /* Devlog cards (their base styles live inline on devlog.php) */
  html.dark-mode .devlog-entry {
      background: #1e2127;
      border-left-color: #4664c8;
  }
  html.dark-mode .devlog-title { color: #e8eaed; }
  html.dark-mode .devlog-details { color: #b9bec5; }
  html.dark-mode .devlog-date { color: #8a9099; }
  html.dark-mode #devlog-intro { color: #aab0b8; }

  html.dark-mode #backtotop { background-color: #3a3f48; }
  html.dark-mode #backtotop:hover { background-color: #555b66; }