botsym-css/style.css

:root { /* Styles applying to everyting */
  font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";

  --default-black: rgb(0, 0, 0);
  --default-white: rgb(201, 201, 201);
  --default-blue: rgb(23, 28, 148);

  background-color: var(--default-black);
  color: var(--default-white);
  font-weight: 400;
}

/* General styles for elements */

* { /* Remove margin and padding from everything by default */
  margin: 0;
  padding: 0;
}

p {
  width: auto;
}

b { /* Bolded text */
  font-weight: 1000;
}

li {
  list-style: none;
}

ul {
  padding-left: 1ch;
}

a {
  color: var(--default-white);
}
a:hover {
  background-color: var(--default-blue);
  color: var(--default-white);
}
.white a {
  color: var(--default-black);
}
.white a:hover {
  color: var(--default-white);
}
.blue a:hover {
  background-color: var(--default-white);
  color: var(--default-blue);
}

nav a {
  color: var(--default-black);
  display: block;
  width: 100%;
  text-decoration: none;
}
nav ul > li >ul:hover a {
  color: var(--default-white);
}

.hr {
  height: calc(1em + 5px);
}
hr {
  height: calc((1em + 4px) / 2);
  border: 0;
  border-bottom: 1px solid var(--default-white);
}
.blue hr {
  border-color: var(--default-white);
}
nav li hr, li.button-list > ul a hr, .white hr {
  border-color: var(--default-black);
}
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
  border-color: var(--default-white);
}

/* Lists */

li:not(.button-list) > ul::before {
  content: "- ";
}

li.button-list > ul {
  width: calc(100% - 1ch);
}

li.button-list > ul > li {
  width: 100%;
}

li.button-list a {
    display: block;
    width: 100%;
}

li.button-list > ul:hover {
  background-color: var(--default-blue);
  color: var(--default-white);
}
.blue li.button-list > ul:hover {
  background-color: var(--default-white);
  color: var(--default-black);
}

li.button-list > ul:hover > a {
  color: var(--default-white);
}
.blue li.button-list > ul:hover > a {
  color: var(--default-black);
}

 /* Navbars */

nav > li {  /* Navbar */
  background-color: var(--default-white);
  color: var(--default-black);
  margin-left: 0;
}
nav > li > ul { /* Navbar items */
  margin: 0;
  padding: 0;
  display: inline-block;
  padding-left: 1ch;
  padding-right: 1ch;
}
nav ul::before {
  content: "" !important;
}
nav > li > ul:hover { /* Navbar items */
  background-color: var(--default-blue);
  color: var(--default-white);
  cursor: pointer;
}
nav > li > ul:focus {
  background-color: var(--default-blue);
  color: var(--default-white);
}

@keyframes hide {
  0% {
    opacity: 0;
    left: inherit;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    left: -9999px;
  }
}

.submenu {
  display: inline-block;
  animation-name: show;
  animation-duration: 0.5s;
}

nav ul li { /* Navbar inner lists */
  position: absolute;
  border: 2px solid var(--default-white);
  border-color: var(--default-black);
  box-shadow: 0 0 0 0.25ch var(--default-white);
  background-color: var(--default-white);
  margin-left: calc(2px - 1ch);
  margin-right: calc(2px - 1ch);
  margin-top: calc(0.5em - 3px);
  margin-bottom: calc(0.5em - 1px);
  padding: calc(0.25ch + 2px);
  padding-top: calc(0.5em + 3px - 0.25ch);
  padding-bottom: calc(0.5em + 3px - 0.25ch);

  opacity: 0;
  left: -9999px;

  animation-name: hide;
  animation-duration: 0.5s;
}

nav ul li ul { /* Inner Items */
  background-color: var(--default-white);
  color: var(--default-black);
  padding-left: 1ch;
  padding-right: 1ch;
  min-height: calc(1em + 5px);
}
nav ul:focus li { /* Display inner items on focus */
  display: block;
  opacity: 1;
  left: inherit;
  animation-name: hide;

  animation-name: none;
}
nav ul li ul:hover { /* Navbar inner items hover */
  background-color: var(--default-blue);
  color: var(--default-white);
}

/* Classes */
.main-flexbox {
}
.mainframe {
  text-align: left;
  background: var(--default-black);
}

.box {
  border: 2px solid var(--default-white);
  margin: calc(0.5ch - 1px);
  padding: calc(0.5ch - 1px);
  width: auto;
  display: inline-block;
  margin-top: calc(0.5em - 1px + 2.5px);
  margin-bottom: calc(0.5em - 1px + 2.5px);
  padding-top: calc(0.5em - 1px + 2.5px);
  padding-bottom: calc(0.5em - 1px + 2.5px);
  vertical-align: top;
}
.box.double {
  border-style: double;
  border-width: 5px;
  margin: calc(0.5ch - 2.5px);
  padding: calc(0.5ch - 2.5px);
  margin-top: calc(0.5em - 2.5px + 2.5px);
  margin-bottom: calc(0.5em - 2.5px + 2.5px);
  padding-top: calc(0.5em - 2.5px + 2.5);
  padding-bottom: calc(0.5em - 2.5px + 2.5);
}
.box.black {
  background-color: var(--default-black);
  color: var(--default-white);
  border-color: var(--default-white);
  box-shadow: 0 0 0 0.25ch var(--default-black);
}
.box.white {
  background-color: var(--default-white);
  color: var(--default-black);
  border-color: var(--default-black);
  box-shadow: 0 0 0 0.25ch var(--default-white);
}
.box.blue {
  background-color: var(--default-blue);
  color: var(--default-white);
  border-color: var(--default-white);
  box-shadow: 0 0 0 0.25ch var(--default-blue);
}

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

/* Style helpers, like space-takers */
.space-1em { min-height: calc(1em + 5px); }
.space-2em { min-height: calc(2em + 10px); }

.width-50 { min-width: 50ch; }
.width-100 { min-width: 100ch; }
.width-150 { min-width: 150ch; }
.width-200 { min-width: 200ch; }

.padding-1 { padding: 1ch; padding-top: calc(1em + 5px); padding-bottom: calc(1em + 5px); }
.padding-2 { padding: 2ch; padding-top: calc(2em + 10px); padding-bottom: calc(2em + 10px); }
.padding-3 { padding: 3ch; padding-top: calc(3em + 15px); padding-bottom: calc(3em + 15px); }
.padding-4 { padding: 4ch; padding-top: calc(4em + 20px); padding-bottom: calc(4em + 20px); }
.padding-5 { padding: 5ch; padding-top: calc(5em + 25px); padding-bottom: calc(5em + 25px); }