/*
 * general styles
 *
 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --primary-color: rgb(255, 255, 255);
  --secondary-color: rgb(41, 41, 41);
  --background-color: rgb(21, 21, 21);
}

@font-face {
  font-family: RobotoMono;
  src: url("/assets/RobotoMono.ttf");
}

body {
  color: var(--primary-color);
  background-color: var(--background-color);
  font-family: RobotoMono,monospace;
  font-size: 1.1em;
  font-weight: 400;
}

/*
 * menu styles
 *
 */
.home-menu {
  padding: 0.2em;
  text-align: center;
  background-color: var(--secondary-color);
}

.pure-menu .pure-menu-fixed {
  border-bottom: none;
  z-index: 4;
}

.pure-menu .pure-menu-link:visited{
  color: var(--primary-color);
}

.home-menu .pure-menu-heading {
  color: var(--primary-color);
  font-weight: 400;
  font-size: 130%;
  text-transform: none;
}

.home-menu .pure-menu-selected a {
  color: var(--primary-color);
  background-color: var(--background-color);
}

.home-menu a {
  color: var(--primary-color);
}
.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
  border: none;
  color: var(--primary-color);
  background-color: var(--background-color);
}

/*
 * button styles
 *
 */
.pure-button {
  padding: 0.5em 2em;
  border-radius: 0px;
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

a.pure-button-primary {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  font-size: 120%;
}

/*
 * content styles
 *
 */
.content-center {
  text-align: center;
  padding-top: 20%;
}