site/css/rfs.css

@font-face {
  font-family: Glass-TTY-VT220;
  src: local("Glass TTY VT220"),
       url(https://radiofreqs.space/assets/Glass_TTY_VT220.ttf);
}

body {
  background-color: #000000;
  font-family: 'Glass-TTY-VT220', sans-serif;
  line-height: 1.4;
  color: #27FE39;
  max-width: 60rem;
  padding: 2rem;
  margin: auto;
  font-size: 1.3em;
}

pre {
  font-family: 'Glass-TTY-VT220', sans-serif;
  line-height: 0.85;
}

.topnav {
  background-color: #000000;
  overflow: hidden;
  margin: auto;
  max-width: 650px;
}

a { color: #27FE39; }
a:hover { color: yellow; }

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #27FE39;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.1em;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: black;
  color: yellow;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  color: #27FE39;
}

hr {
  display: block; height: 1px;
  border: 0; border-top: 1px solid #27FE39;
  margin: 0.1em 0; padding: 0;
}

.visible-phone { display: none; max-width: 155px; margin: auto; }
.visible-tablet { display: none; max-width: 510px; margin: auto; }
.visible-desktop { display: none; max-width: 800px; margin: auto; }

@media screen and (min-width: 850px) { 
  .visible-desktop { display: block; } 
}

@media screen and (max-width: 568px) { 
  .visible-phone { display: block; } 
}

@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (min-width: 569px) and (max-width: 849px) { 
  .visible-tablet { display: block; }
}

table {
  width: 100%;
}

td.title {
  font-weight: bold;
  font-size: 1.3em;
  padding-top: 20px;
}

td.error {
  font-size: 1.0em;
  color: red;
}

form { margin-top: 30px; }
input[type=text] { 
  width: 100%; 
  border: 2px solid #27FE39;
  border-radius: 4px;
  background-color: black;
  color: #27FE39;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 1.2em;
}

input[type=text]:focus {
  border: 4px solid yellow;
  outline: none;
}

textarea { 
  width: 100%; 
  border: 2px solid #27FE39;
  border-radius: 4px;
  background-color: black;
  color: #27FE39;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 1.2em;
}

textarea:focus {
  border: 4px solid yellow;
  outline: none;
}

input[type=radio   ]:not(old) {
  width     : 3em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=radio   ]:not(old) + label {
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=radio   ]:not(old) + label > span {
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=radio]:not(old):checked + label > span > span {
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: black;
  border: 2px solid #27FE39;
  border-radius: 4px;
  color: #27FE39;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  width: 120px;
}

p.center {
  width: 248px;
  margin: auto;
  padding-top: 25px;
  padding-bottom: 25px;
}