:root
{
  --dark0-hard:     #1d2021;
  --dark0:          #282828;
  --dark0-soft:     #32302f;
  --dark1:          #3c3836;
  --dark2:          #504945;
  --dark3:          #665c54;
  --dark4:          #7c6f64;
  --gray:           #928374;
  --light0-hard:    #f9f5d7;
  --light0:         #fbf1c7;
  --light0-soft:    #f2e5bc;
  --light1:         #ebdbb2;
  --light2:         #d5c4a1;
  --light3:         #bdae93;
  --light4:         #a89984;
  --bright-red:     #fb4934;
  --bright-green:   #b8bb26;
  --bright-yellow:  #fabd2f;
  --bright-blue:    #83a598;
  --bright-purple:  #d3869b;
  --bright-aqua:    #8ec07c;
  --bright-orange:  #fe8019;
  --neutral-red:    #cc241d;
  --neutral-green:  #98971a;
  --neutral-yellow: #d79921;
  --neutral-blue:   #458588;
  --neutral-purple: #b16286;
  --neutral-aqua:   #689d6a;
  --neutral-orange: #d65d0e;
  --faded-red:      #9d0006;
  --faded-green:    #79740e;
  --faded-yellow:   #b57614;
  --faded-blue:     #076678;
  --faded-purple:   #8f3f71;
  --faded-aqua:     #427b58;
  --faded-orange:   #af3a03;
  --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
  --font-body-text: 'Open Sans', 'Arial', sans-serif;
  --background-primary:         var(--dark0);
  --background-primary-alt:     var(--dark0);
  --background-secondary:       var(--dark0-hard);
  --background-secondary-alt:   var(--dark1);
  --text-normal:                var(--light0);
  --text-faint:                 var(--light3);
  --text-title-h1:              var(--neutral-red);
  --text-title-h2:              var(--neutral-orange);
  --text-title-h3:              var(--neutral-yellow);
  --text-title-h4:              var(--neutral-green);
  --text-title-h5:              var(--neutral-aqua);
  --text-link:                  var(--bright-blue);
  --text-a:                     var(--bright-orange);
  --text-a-hover:               var(--bright-blue);
  --text-mark:                  rgba(215, 153, 33, 0.4); /* neutral-yellow */
  --pre-code:                   var(--dark1);
  --text-highlight-bg:          var(--faded-aqua);
  --interactive-accent:         var(--bright-orange);
  --interactive-before:         var(--dark4);
  --background-modifier-border: var(--dark2);
  --text-accent:                var(--bright-orange);
  --interactive-accent-rgb:     var(--bright-orange);
  --inline-code:                var(--bright-blue);
  --code-block:                 var(--bright-blue);
  --text-selection:             rgba(168, 153, 132, 0.5); /* light4 */
}

body {
  display:			grid;
  padding-left:     0;
  padding-right:    0;
  margin:           0;
  border:           0;
  font-size:        0.9em;
  background-color: var(--background-primary);
}

h1 {
  font-weight: 500;
  font-size:   34px;
  color:       var(--text-title-h1);
  text-align:  left;
}

h2 {
  font-weight: 500;
  font-size:   26px;
  color:       var(--text-title-h2);
  text-align:  left;
}

h3 {
  font-weight: 500;
  font-size:   22px;
  color:       var(--text-title-h3);
  text-align:  left;
}

h4 {
  font-weight: 500;
  font-size:   20px;
  color:       var(--text-title-h4);
  text-align:  left;
}

h5 {
  font-weight: 500;
  font-size:   18px;
  color:       var(--text-title-h5);
  text-align:  left;
}

h6 {
  font-weight: 500;
  font-size:   18px;
  color:       var(--text-title-h5);
  text-align:  left;
}

p {
 font-size: 16px;
 color: var(--text-normal);
}

strong {
    font-weight: 600;
}

a
{
    color: var(--text-a);
    text-decoration: none;
}

a:hover
{
    color: var(--text-a-hover);
    text-decoration: none;
}

mark {
    color:            var(--text-normal);
    background-color: var(--text-mark);
}

#banner{
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 40%, transparent 100%);
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: none;
    width: 100%;
    height: 300px;
}

::selection
{
    background-color: var(--text-selection);
}

.navigation {
    position: sticky;
    display: flex;
    justify-content: space-between;
    margin-right: 44px;
    align-items: left;
    height: 30px;
    top: 0;
    font-weight: 500;
    font-size:   16px;
    text-align:  left;
    list-style-type: none;
    background: var(--background-primary);
	  }

.page {
  	justify-self:  	  center;
  	font-family:      var(--font-body-text);
  	background-color: transparent;
  	max-width:        800px;
  	margin-left:      10px;
}

input[type=text], select, textarea{
	width: 20%;
  	transition: 0.2s width ease-in-out;
  	padding: 12px;
  	resize: vertical;
  	font-family:      var(--font-body-text);
  	font-size: 16px;
 	color: var(--text-normal);
 	font-size: 16px;
 	 background-color: var(--background-primaray);
	border: none;
	border-bottom: 1px solid var(--neutral-red);
}
input[type=text]:focus {
	outline: none;
	border: none;
	padding: 11px;
	border-bottom: 3px solid var(--bright-red);
	width: 100%;
}

.banner {
 z-index: 1;
]