.main {
    font-weight: 200;
    max-width: 1240px;
    margin:auto;
}
  
h1{
    font-weight: 200;
    text-align: center;
}

h2, h3 {
    font-weight: 200;
    text-align: justify;
}

a:link, a:visited {
    color: #aaaaaa;
    background-color: transparent;
    text-decoration: none;
    text-decoration: underline;
}

a:hover, a:active {
    color: #838383;
    background-color: transparent;
    text-decoration: underline;
}

input[type=text] {
    background-color:#1e1e1e;
    border: 1px solid #d4d4d4;
    color: #d4d4d4;
    padding: 2px 4px;
    font-size: 15px;
    font-family: 'Inconsolata', monospace;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

input[type=text]:focus{
    background-color:#353535;
    border: 1px solid #d4d4d4;
    outline: none;
  }

select{
  background-color:#1e1e1e;
  border: 1px solid #d4d4d4;
  color: #d4d4d4;
  padding: 2px 4px;
  font-size: 15px;
  font-family: 'Inconsolata', monospace;
}

select:focus{
  border: 1px solid #d4d4d4;
  outline: none;
}

button[type=submit], #clearer {
  background-color:#1e1e1e;
  border: 1px solid #d4d4d4;
  color: #d4d4d4;
  padding: 2px 4px;
  font-size: 15px;
  font-family: 'Inconsolata', monospace;
  transition: background-color 0.3s ease;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

button:hover[type=submit], #clearer:hover {
  background-color: #535353;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;

}

.left {
  width: 25%;
}

.right {
  width: 75%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.custom-checkbox {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}
  
.checkmark {
    position: relative;
    top: -0.1em; /* Adjust this value to align with the bottom of the text */
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px solid white;
    display: inline-block;
    vertical-align: middle;
}
  
.custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background-color: white;
    background-clip: content-box;
    padding: 3px;
}

textarea:focus{
    background-color:#353535;
    border: 1px solid #d4d4d4;
    outline: none;
}
  
textarea{
    width: 100%;
    height: 200px;
    background-color:#1e1e1e;
    border: 1px solid #d4d4d4;
    color: #d4d4d4;
    right: 100%;
    float: right;
    padding: 2px 2px;
    font-size: 15px;
    word-wrap: break-word;
    margin-bottom: 10px;
    }

.extras{
    margin-top: 10px;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --- additions for the client-side rebuild --- */
.row::after { content: ""; display: table; clear: both; }
#graph { width: 100%; height: auto; display: block; background: #1e1e1e; }
#readout { min-height: 1.4em; color: #aaaaaa; font-size: 14px; margin-top: 6px; }
#error { color: #e06c75; white-space: pre-wrap; margin-top: 8px; font-size: 14px; }
#savepng { font-size: 14px; }
#clearer { margin-top: 0; }
.savenote { color: #888888; font-size: 13px; margin: 0 0 8px; }
@media (max-width: 800px) {
  .left, .right { width: 100%; float: none; }
}