@font-face {
  font-family: 'ModernDOS9x16';
  src: url(https://www.jpr.is/shared/font/ModernDOS9x16.woff) format('woff'),
    url(https://www.jpr.is/shared/font/ModernDOS9x16.woff2) format('woff2'),
    url(https://www.jpr.is/shared/font/ModernDOS9x16.ttf) format("truetype");
}

/* color list (rgb) to keep it consistent
blue: 0, 0, 170
red: 175, 0, 0
white: 255, 255, 255
yellow: 255, 255, 80
lighter grey: 180, 180, 180
light grey: 175, 168, 175
grey: 120, 120, 120
dark grey: 
purple: 175, 0, 175
lime green: 80, 255, 80
*/

/* elements */

html {
  cursor: url("https://www.jpr.is/shared/design/dos_cursor_arrow.cur"), default;
}

body {
  background-color: rgba(0, 0, 170, 1.0);
  color: #fff;
  font-size: 1.2em;
  font-family: 'ModernDOS9x16';
}

a:not(nav a) {
  text-decoration: none;
  color: rgba(0, 0, 170, 1.0);
  background-color: rgba(175, 168, 175, 1.0);
  padding: 0.15em;
  text-transform: uppercase;
}

a:not(nav a):hover {
  text-decoration: underline dotted;
  background-color: rgba(0, 0, 170, 1.0);
  color: rgba(175, 168, 175, 1.0);
  border: 1px dotted #8db600;
}

a:not(nav a):before {
  padding: 0.15em;
  content: "[";
}

a:not(nav a):after {
  padding: 0.15em;
  content: "]";
}

.notice-alert a {
  text-decoration: none;
  color: rgba(175, 0, 0, 1.0);
  background-color: rgba(225, 225, 225, 1.0);
  padding: 0.15em;
  text-transform: capitalize;
}

.notice-alert a:hover {
  text-decoration: underline dotted;
  background-color: rgba(175, 0, 0, 1.0);
  color: rgba(225, 225, 225, 1.0);
  border: 1px dotted #fff;
}

.notice-alert a:before {
  padding: 0.15em;
  content: "[";
}

.notice-alert a:after {
  padding: 0.15em;
  content: "]";
}

nav {
  white-space: nowrap;
  background-color: rgba(175, 168, 175, 1.0);
  position: fixed;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

nav a {
  text-decoration: none;
  color: rgba(0, 0, 170, 1.0);
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: none;
  padding: 0%;
  margin: 0%;
}

nav li {
  list-style-type: none;
  padding: 0.25em;
}

nav li:first-letter {
  color: rgba(175, 0, 0, 1.0);
  text-transform: uppercase;
}

nav li:hover,
a:hover {
  background-color: rgb(112, 112, 112);
  color: rgba(255, 255, 255, 1.0);
}

nav li:hover:first-letter {
  color: rgba(175, 0, 0, 1.0);
  text-transform: uppercase;
}

main {
  margin: 50px auto;
  width: 90%;
  max-width: 1500px;
  flex-grow: 1;
}

section {
  width: 100%;
  margin: auto;
  border: 1px solid #fff;
  padding: 0.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  padding: 0.25em 0.5em;
  background: rgba(0, 170, 170, 1.0);
  color: rgba(33, 33, 33, 1.0);
  margin: 1em auto;
  box-shadow: 10px 10px rgb(58, 58, 58);
}

h1 {
  text-align: center;
  text-transform: capitalize;
  font-size: 1.5em;
  width: 100%;
}

h2 {
  text-align: center;
  text-transform: capitalize;
  font-size: 1.25em;
  max-width: 50%;
}

h3 {
  margin: 1rem 0%;
  width: 100%;
}

h4 {
  margin: 0.5rem;
  text-decoration: none;
  border: 1px #fff solid;
  padding: 0.5rem;
}

h5 {
  color: inherit;
  border-bottom: 2px dashed;
  padding: 0.5rem;
  margin: auto;
  box-shadow: none;
  background-color: inherit;
  font-size: 1.5rem;
  max-width: fit-content;
}

h6 {
  margin: 1rem auto 1rem;
  text-align: left;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 1.15em;
  border-bottom: 2px dashed;
  box-shadow: none;
  padding: 0%;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea {
  padding: 2px;
  border-style: inset;
  border-color: rgba(180, 180, 180, 1.0);
  border-width: 3px;
  font-size: 1rem;
  margin: 0.5em;
  max-width: 75%;
  min-width: 50%;
  color: #000;
  background: rgba(175, 168, 175, 1.0);
  font: inherit;
}

button {
  background: transparent;
  color: inherit;
  text-transform: capitalize;
  font: inherit;
  padding: 0.5em;
  border: none;
}

button:before {
  content: "< ";
}

button:after {
  content: " >";
}

button:hover {
  filter: invert(50%);
}

blockquote {
  font-size: 1.25em;
  text-align: center;
}

figure {
  background: rgba(120, 120, 120, 1.0);
  margin: 0% auto;
  padding: 1em;
  min-width: 50%;
  max-width: 75%;
}

figure>img {
  margin: 0% auto;
}

figcaption {
  text-align: right;
  text-decoration: underline dotted;
  font-style: italic;
  padding: 0% 10%;
}

fieldset {
  border: 3px double rgba(255, 255, 255, 1.0);
}

ul.about {
  text-transform: uppercase;
  list-style: none;
}

ul.about li {
  text-transform: none;
  padding: 0.5em;
}

/* id's */

#message-box-bottom {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* classes */

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.site-brand {
  padding: 0.25em;
  margin: 0% 1em;
}

.site-brand:before {
  content: "[";
}

.site-brand:after {
  content: "]";
}

.message {
  border: 1px solid #fff;
  padding: 1em;
  margin-bottom: 1em;
}

.show-message {
  padding: 0.5em;
  border: 3px rgba(180, 180, 180, 1.0);
  border-style: outset;
  background: rgb(112, 112, 112);
}

.notice {
  max-width: fit-content;
  margin: 0.5em auto;
  background: rgba(180, 180, 180, 1.0);
  padding: 0.25em;
}

.notice>div {
  padding: 0.15em 1em;
  margin: auto;
  text-align: center;
  min-width: 30%;
}

.notice-alert {
  border: 5px solid rgba(175, 0, 0, 1.0);
}

.notice-success {
  border: 5px solid rgba(80, 255, 80, 1.0);
}

.lead {
  font-size: 1.5em;
  text-decoration: underline;
}

.project-tile {
  background: rgba(120, 120, 120, 1.0);
  margin: 1em auto;
  padding: 0.5em;  
  width: 100%;
  border-width: 3px;
  border-style: inset;
  box-shadow: 15px 15px rgba(33, 33, 33, 1.0)
}

.highlight-text {
  color: rgba(255, 255, 80, 1.0);
}

/* pseudo classes and selectors */

::selection {
  background: rgba(175, 0, 175, 1.0);
  color: rgba(80, 255, 80, 1.0);
}

input[type="text"] {
border: none;
background: transparent;
font: inherit;
user-select: none;
}

input[type="text"]:focus {
outline:none;
}

.border-tb {
  border-width: 1px 0px 1px 0px;

}

.border-white {
  border-color: #fff;
}

.border-dashed {
  border-style: dashed;
}

.list-nostyle li {
  list-style: none;
  margin: auto;
  padding: 0.5rem;
}

.textbox-wrapper {
background: rgba(200, 200, 200, 1.0);
padding: 0.25rem;
}

.textbox-wrapper:before {
content: "[";
}

.textbox-wrapper:after {
content: "]";
}