style.css

@import url("OpenSans.css");
@import url("BigNoodle.css");
@import url("asap.css");

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

html, body, h1, h2, h3, a {
    background-color: black;
    color: #00FF00;
    font-family: 'Open Sans';
    margin: 0pt;
    padding: 0pt;
    text-decoration: none;
}

.header {
    list-style: none;
    margin: 0pt;
    text-align: center;
    background-color: #00FF00;
    color: black;
    padding-bottom: 30pt;
    padding-top: 30pt;
}

.header nav ul {
    margin: 0pt;
    padding: 0pt;
}

.header nav ul li {
    border: 4pt solid black;
    display: inline-block;
    margin: 4pt;
    padding: 0pt;
}

.header nav ul li a {
    background-color: #00FF00;
    color: black;
    display: block;
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
    padding: 5pt;
    text-align: center;
    text-decoration: none;
}

.header nav ul li a:hover {
    background-color: black;
    color: #00FF00;
}

.header h1 {
    background-color: #00FF00;
    color: black;
    font-family: 'BigNoodleTitling';
    font-size: 50pt;
    letter-spacing: 20pt;
    padding: 10pt;
    text-align: center;
}

.page {
    height: 100%;
}

section.empty {
    background-color: #000000;
    border: 4pt solid #00FF00;
    text-align: center;
    padding: 5pt;
    width: 100%;
}

section.empty p {
    font-family: 'BigNoodleTitling';
    font-size: 80pt;
    font-style: normal;
    letter-spacing: 20pt;
    padding: 5pt;
    margin: 0pt;
    text-align: center;
    text-decoration: none;
}

.inventory_container .button {
    text-align: center;
}

.inventory_container .button a {
    background-color: black;
    color: #00FF00;
    display: inline-block;
    font-family: 'BigNoodleTitling';
    border: 4pt solid #00FF00;
    font-size: 30pt;
    padding: 5pt;
    margin: 0pt auto;
    text-align: center;
    width: 50%;
}

.inventory_container .button a:hover {
    background-color: #00FF00;
    color: black;
}

.inventory_container article {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 30pt;
    padding: 0pt;
}

.thing {
    background-color: black;
    flex: 1 0 33%;
    border: 4pt solid;
    margin: 30pt;
    padding: 20pt;
}

.thing ul {
    list-style: none;
}

.thing h2, .thing h3{
    margin: 0pt;
    padding: 0pt;
    padding-bottom: 4pt;
}

.thing h2 a {
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
}

.thing h2 a:hover {
    text-decoration: underline overline;
}

.thing h3 {
    font-family: 'BigNoodleTitling';
    font-size: 10pt;
    letter-spacing: 2pt;
}

.thing h3 a {
}

.thing h3 a:hover {
}

.thing_attribs {
    margin: 0pt;
    padding: 0pt;
}

.thing_attribs p {
    font-family: 'asap';
    font-size: 17pt;
    padding: 0pt;
    padding-bottom: 2pt;
    margin: 0pt;
}

.thing_attribs a {
    font-family: 'asap';
    margin-left: 5pt;
}

.thing_attribs li {
    position:relative;
    margin: 0pt;
    padding: 0pt;
}

.print {
    margin: 10pt;
    margin-right: -24pt;
    margin-bottom: -24pt;
    text-align: right;
}

.print_form {
}

.print_form input {
    background-color: #00FF00;
    border: 4pt solid #00FF00;
    color: black;
    font-family: 'BigNoodleTitling';
    font-size: 15pt;
    letter-spacing: 2pt;
    font-weight: bold;
    padding: 4pt;
}

.print_form input:hover {
}

.inventory_container, .thing_container, .person_container, .usage_rule_container {
    display: block;
/*    background: repeating-linear-gradient(
        -45deg,
        #0f0,
        #0f0 4pt,
        #000 4pt,
        #000 20pt
    );
*/
    padding: 30pt 0 30pt 0;
    margin: 0;
    position: relative;
    /* that's ugly and does not work properly and hmmm.... */
    min-height: calc(100% - 190pt);
}

.thing_container, .person_container, .usage_rule_container {
    text-align: center;
}

.thing_form, .person_form, .usage_rule_form {
    display: block;
    margin: 0 auto;
    width: 50%;
    padding-bottom: 18pt;
}

.form_input {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    font-family: 'BigNoodleTitling';
    background: #000000;
    color: #00FF00;
    border: 4pt solid #00FF00;
    font-size: 30pt;
    padding: 5pt;
    margin-bottom: 5pt;
}

.form_input label {
    flex: 0 0 auto;
    padding-right: 5pt;
}

.form_input input, .form_input button {
    flex: 1;
    background: #000000;
    border: 0pt;
    color: #00FF00;
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
}

.form_input select {
    display: table-cell;
    background: #000000;
    border: 0pt;
    color: #00FF00;
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
    margin-bottom: 5pt;
    width: 100%;
}

.form_button input {
    background: #00FF00;
    border: 0pt;
    color: #000000;
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
    padding: 4pt;
    margin-bottom: 5pt;
    width: 100%;
}

.form_button input:hover {
    background: #000000;
    border: 4pt solid #00FF00;
    color: #00FF00;
    padding: 0pt;
    margin-bottom: 5pt;
}

.form_delete_button input {
    background: #000000;
    border: 4pt solid #FF0000;
    color: #FF0000;
    font-family: 'BigNoodleTitling';
    font-size: 30pt;
    margin-bottom: 5pt;
    width: 100%;
}

.form_delete_button input:hover {
    background: #FF0000;
    color: #000000;
}

.message {
    font-family: 'asap';
    background: #000000;
    border: 1px #00FF00 solid;
    width: 50%;
    padding: 3pt;
    text-align: center;
    margin: 0 auto;

/*
.thing_form input, .person_form input, .usage_rule_form input {
    display: block;
    margin-bottom: 1pt;
    padding-top: 0.5pt;
    padding-bottom: 0.5pt;
}

/* unused
.inventory hr {
    border: 0pt;
    border-top: 4pt dashed #00FF00;
    background-color: black;;
    height: 0pt;
    margin-top: 30pt;
}
*/

.btn-stripe {

}

/*#NameInput {
    font-family: 'Open Sans';
}*/