botsym-css/css/style.css

@charset "UTF-8";
@font-face {
  font-family: "Iosevka Slab Regular";
  src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
}
:root {
  font-family: "Iosevka Slab Regular", "monospace";
  background-color: rgb(0, 0, 0);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
}

/* General styles for elements */
* {
  margin: 0;
  padding: 0;
}

p {
  width: auto;
}

b {
  font-weight: 1000;
}

li {
  list-style: none;
}

ul {
  padding-left: 1ch;
}

a {
  color: rgb(201, 201, 201);
}
a:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}

nav ul > li > ul:hover a {
  color: rgb(201, 201, 201);
}

hr {
  height: 10.5px;
  border: 0;
  border-bottom: 1px solid rgb(201, 201, 201);
  margin-bottom: 9.5px;
}

nav li hr,
li.button-list > ul a hr,
.white hr {
  border-color: rgb(0, 0, 0);
}

nav > li > ul li > ul:hover > hr,
li.button-list > ul:hover a hr {
  border-color: rgb(201, 201, 201);
}

/* Lists */
li:not(.button-list) > ul::before {
  content: "- ";
}
li.button-list > ul {
  width: calc(100% - 1ch);
  text-decoration: underline;
}
li.button-list > ul:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}
li.button-list > ul > li {
  width: 100%;
}
li.button-list > ul a {
  display: block;
  width: 100%;
}

/* Navbars */
@keyframes hide {
  0% {
    opacity: 0;
    left: inherit;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    left: -9999px;
  }
}
nav a {
  color: rgb(0, 0, 0);
  display: block;
  width: 100%;
  text-decoration: none;
}
nav ul::before {
  content: "" !important;
}
nav > li {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  margin-left: 0;
}
nav > li > ul {
  margin: 0;
  padding: 0;
  display: table-cell;
  padding-left: 1ch;
  padding-right: 1ch;
}
nav > li > ul:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}
nav > li > ul:focus {
  background-color: rgb(23, 28, 148);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
}
nav > li > ul:focus li {
  display: block;
  opacity: 1;
  left: inherit;
  animation-name: hide;
  animation-name: none;
}
nav > li > ul > li {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  position: absolute;
  border: 2px solid;
  box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
  margin-left: calc(2px - 1ch);
  margin-right: calc(2px - 1ch);
  margin-top: 10.5px;
  margin-bottom: 10.5px;
  padding: calc(0.25ch + 2px);
  padding-top: 10.5px;
  padding-bottom: 10.5px;
  opacity: 0;
  left: -9999px;
  animation-name: hide;
  animation-duration: 0.5s;
}
nav > li > ul > li > ul {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  padding-left: 1ch;
  padding-right: 1ch;
  min-height: 21px;
}
nav > li > ul > li > ul:hover {
  background-color: rgb(23, 28, 148);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
}

/* Miscallaneous Classes */
.box {
  border: 2px solid rgb(201, 201, 201);
  margin: 0.5ch;
  padding: calc(0.5ch - 2px);
  width: auto;
  margin-top: 10.5px;
  margin-bottom: 10.5px;
  padding-top: 8.5px;
  padding-bottom: 8.5px;
  vertical-align: top;
}
.box.inline {
  display: inline-block;
}
.box.double {
  border-style: double;
  border-width: 4px;
  margin: 0.5ch;
  padding: calc(0.5ch - (4px));
  margin-top: 10.5px;
  margin-bottom: 10.5px;
  padding-top: 6.5px;
  padding-bottom: 6.5px;
}
.box.black {
  background-color: rgb(0, 0, 0);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
  box-shadow: 0 0 0 0.25ch rgb(0, 0, 0);
}
.box.white {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
}
.box.white a {
  color: rgb(0, 0, 0);
}
.box.white a:hover {
  background-color: rgb(23, 28, 148);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
}
.box.blue {
  background-color: rgb(23, 28, 148);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
  box-shadow: 0 0 0 0.25ch rgb(23, 28, 148);
}
.box.blue li.button-list > ul:hover {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
}
.box.blue li.button-list > ul:hover > a {
  color: rgb(0, 0, 0);
}
.box.blue a:hover {
  background-color: rgb(201, 201, 201);
  color: rgb(23, 28, 148);
  border-color: rgb(23, 28, 148);
}
.box.blue hr {
  border-color: rgb(201, 201, 201);
}
.box.blue button:hover {
  background-color: rgb(201, 201, 201);
  color: rgb(23, 28, 148);
  border-color: rgb(23, 28, 148);
}
.box.blue .checkbox-right:hover,
.box.blue .checkbox-left:hover,
.box.blue .radio-right:hover,
.box.blue .radio-left:hover {
  background-color: rgb(201, 201, 201);
  color: rgb(23, 28, 148);
  border-color: rgb(23, 28, 148);
}

.list-symbol::after {
  content: " ▼";
}

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

/* How to add pages:
*
* (at)for (dollar)i from 1 through 20 {
*   .page-dollar i {
*     display: none;
*   }
*   #radio-page-dollar i:checked ~ .page-dollar i {
*     display: block;
*   }
* }
*/
/* Form styles */
input[type=checkbox],
input[type=radio] {
  display: none;
}

.checkbox-right:hover,
.checkbox-left:hover,
.radio-right:hover,
.radio-left:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}

.checkbox-right::after {
  content: "[ ]";
}

.checkbox-left::before {
  content: "[ ]";
}

.radio-right::after {
  content: "( )";
}

.radio-left::before {
  content: "( )";
}

input[type=checkbox]:checked + .checkbox-right::after {
  content: "[x]";
}
input[type=checkbox]:checked + .checkbox-left::before {
  content: "[x]";
}

input[type=radio]:checked + .radio-right::after {
  content: "(x)";
}
input[type=radio]:checked + .radio-left::before {
  content: "(x)";
}

input[type=text],
button {
  background-color: inherit;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
input[type=text]:hover,
button:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}

label:hover {
  cursor: pointer;
}

button:focus, button:hover, button:active, button::-moz-focus-inner {
  border: none;
  text-decoration: none;
}
button::before {
  content: "[ ";
}
button::after {
  content: " ]";
}

.textinput {
  display: inline-block;
}
.textinput:hover {
  cursor: pointer;
  color: rgb(201, 201, 201);
  background-color: rgb(23, 28, 148);
}
.textinput::before {
  content: "[";
}
.textinput::after {
  content: "]";
}
.textinput:hover > input[type=text] {
  background-color: rgb(23, 28, 148);
  color: rgb(201, 201, 201);
  border-color: rgb(201, 201, 201);
}

input[type=text] {
  background-color: rgb(201, 201, 201);
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  width: 15ch;
}

/* Style helpers, like space-takers */
.space-1 {
  min-height: 21px;
}

.space-2 {
  min-height: 42px;
}

.space-3 {
  min-height: 63px;
}

.space-4 {
  min-height: 84px;
}

.space-5 {
  min-height: 105px;
}

.width-5 {
  width: 5ch;
}

.width-10 {
  width: 10ch;
}

.width-15 {
  width: 15ch;
}

.width-20 {
  width: 20ch;
}

.width-25 {
  width: 25ch;
}

.width-50 {
  width: 48ch;
}

.width-100 {
  width: 98ch;
}

.width-150 {
  width: 148ch;
}

.width-200 {
  width: 198ch;
}

.width-250 {
  width: 248ch;
}

.width-percentage-5 {
  width: 5%;
  width: round(5%, 1ch);
}

.width-percentage-10 {
  width: 10%;
  width: round(10%, 1ch);
}

.width-percentage-15 {
  width: 15%;
  width: round(15%, 1ch);
}

.width-percentage-20 {
  width: 20%;
  width: round(20%, 1ch);
}

.width-percentage-25 {
  width: 25%;
  width: round(25%, 1ch);
}

.width-percentage-30 {
  width: 30%;
  width: round(30%, 1ch);
}

.width-percentage-35 {
  width: 35%;
  width: round(35%, 1ch);
}

.width-percentage-40 {
  width: 40%;
  width: round(40%, 1ch);
}

.width-percentage-45 {
  width: 45%;
  width: round(45%, 1ch);
}

.width-percentage-50 {
  width: 50%;
  width: round(50%, 1ch);
}

.width-percentage-55 {
  width: 55%;
  width: round(55%, 1ch);
}

.width-percentage-60 {
  width: 60%;
  width: round(60%, 1ch);
}

.width-percentage-65 {
  width: 65%;
  width: round(65%, 1ch);
}

.width-percentage-70 {
  width: 70%;
  width: round(70%, 1ch);
}

.width-percentage-75 {
  width: 75%;
  width: round(75%, 1ch);
}

.width-percentage-80 {
  width: 80%;
  width: round(80%, 1ch);
}

.width-percentage-85 {
  width: 85%;
  width: round(85%, 1ch);
}

.width-percentage-90 {
  width: 90%;
  width: round(90%, 1ch);
}

.width-percentage-95 {
  width: 95%;
  width: round(95%, 1ch);
}

.width-percentage-100 {
  width: 100%;
  width: round(100%, 1ch);
}

.padding-1 {
  padding: 1ch;
  padding-top: 21px;
  padding-bottom: 21px;
}

.padding-2 {
  padding: 2ch;
  padding-top: 42px;
  padding-bottom: 42px;
}

.padding-3 {
  padding: 3ch;
  padding-top: 63px;
  padding-bottom: 63px;
}

.padding-4 {
  padding: 4ch;
  padding-top: 84px;
  padding-bottom: 84px;
}

.padding-5 {
  padding: 5ch;
  padding-top: 105px;
  padding-bottom: 105px;
}

/*# sourceMappingURL=style.css.map */