@media (max-width: 800px) {
  :root {
    --float_right_by_width: none;
    --float_left_by_width: none;

    --margin_by_width_1rem_auto: auto;
  }
}

.kevux {
  box-sizing: border-box;
}

.kevux > .header-block {
  position: relative;
  box-sizing: border-box;

  height: var(--height_header_site);
  min-height: var(--height_header_site);
  max-height: var(--height_header_site);

  overflow: hidden;

  border: 1px dashed #556000;

  font-family: monospace;

  color: #000000;
  background-color: #a7c4a8;
}

.kevux > .header-block > .header-section > .header-site {
  position: absolute;
  top: 0px;

  margin: 3px 6px;
}

.kevux > .header-block > .nav-block {
  position: absolute;
  bottom: 0px;

  box-sizing: border-box;
}

.kevux > .header-block > .nav-block > .nav-menu {
  display: block;
}

.kevux > .header-block > .nav-block > .nav-menu > .nav-item {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;

  padding: 2px 4px;
  border-width: 1px 1px 0px 1px;
  border-color: #556000;
  border-style: dashed;
  border-radius: 4px 4px 0px 0px;

  text-align: center;
  word-wrap: break-word;

  background-color: #87d686;
}

.kevux > .header-block > .nav-block > .nav-menu > .nav-item.active {
  background-color: #83e969;
}

.kevux > .header-block > .nav-block > .nav-menu > .nav-item:first-of-type {
  margin-left: 4px;
}

.kevux > .header-block > .nav-block > .nav-menu > .nav-item:last-of-type {
  margin-right: 4px;
}

.kevux > .header-block > .nav-block > .nav-menu > .nav-item:focus-within,
.kevux > .header-block > .nav-block > .nav-menu > .nav-item:hover {
  background-color: #d8e560;
}

.kevux > .content-block > .nav-block {
  position: relative;
  padding: 2px;
}

.kevux > .content-block > .nav-block > .nav-menu > .nav-item > .nav-text.notice {
  font-weight: bold;
}

.kevux > .content-block > .main-block {
  position: relative;
  box-sizing: border-box;

  padding: 8px;

  width: 100%;
}

.kevux > .content-block > .main-block > .main {
  max-width: 100%;
}

.kevux > .content-block > .main-block > .main .header > .h1 {
  border-bottom: 1px dashed #556000;
  margin-bottom: 8px;
}

.kevux > .content-block .header {
  margin-bottom: 4px;
}

.kevux .header > .h1,
.kevux .header > .h2,
.kevux .header > .h3,
.kevux .header > .h4,
.kevux .header > .h5,
.kevux .header > .h6 {
  display: block;

  margin: 0px;
  padding: 0px;
}

.kevux > .content-block .article:not(:last-of-type),
.kevux > .content-block .section:not(:last-of-type) {
  margin-bottom: 1rem;
}

.kevux > .content-block .image.content {
  max-width: 100%;
}