/* global */
:root {
   font-family:         monospace;

   --fgm:               #bdae93;
   --bgm:               #1d2021;
   --bgs:               #282828;
   --bgr:               #32302f;
}

* {
   border-radius:       0px !important;
}

/* background */
html {
   background-color:    var(--bgm);
   padding:             0;
   margin:              0;
   display:             flex;
   justify-content:     center;
   font-size:           16px;
}

/* page */
body {
   background-color:    var(--bgs);
   color:               var(--fgm);
   margin:              0;
   padding-inline:      2em;
   padding-block:       1em;
   height:              fit-content;
   min-height:          100vh;
   max-width:           50em;
   flex-grow:           1;
   font-size:           18px;
}

/* headers */
h1 {
   color:               #fb4934;
} h2 {
   color:               #fabd2f;
} h3 {
   color:               #b8bb26;
} h4 {
   color:               #8ec07c
} h5 {
   color:               #83a598;
} h1, h2, 
  h3, h4, 
  h5 {
   font-weight:         bold;
}

/* text styles */
b, i, u {
   color:               #d79921;
}

/* links */
a {
   color:               #458588;
} a:hover {
   color:               var(--bgs);
   background-color:    #458588;
   text-decoration:     none;
}

/* preformatted */
pre,code {
   color:               #8ec07c;
   background-color:    var(--bgr);
   width:               min-content;
}

/* misc */
.c {
   color:               #458588;
   transition:          filter 0.2s;
   cursor:              help;
} .c:hover {
   filter:              blur(2px)
}

form {
   margin:              1em;
   padding:             1em;
}

input[type="text"],
textarea,
input[type="number"],
input[type="submit"] {
   background-color:    var(--bgr);
   border:              none;
   outline:             none;
   color:               #8ec07c !important;
   font-size:           1em;
   font-family:         monospace;
   width:               min-content !important;
}

textarea:active,
textarea:focus,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="text"]:active,
input[type="number"]:active,
input[type="text"]:focus,
input[type="number"]:focus {
   background-color:    #83c07c;
   color:               var(--bgs) !important;
   border:              none;
   outline:             none;
   font-size:           1em;
   font-family:         monospace;
}

input {
   margin:              0.2em;
   border-radius:       0px !important;
}

input[type="submit"],
input[type="submit"]:active,
input[type="submit"]:focus {
   border:              3px solid #83c07c
}