/* fonts and text */

@charset "UTF-8";

@font-face {
  font-family: "IBM Plex Mono";
  src: url(../assets/fonts/IBMPlexMono-Regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url(../assets/fonts/IBMPlexMono-Bold.ttf);
  font-weight: 700;
}

@font-face {
  font-family: "Untitled Serif";
  src: url(../assets/fonts/UntitledSerif-Regular.woff);
  font-weight: 400;
}

@font-face {
  font-family: "Untitled Serif";
  src: url(../assets/fonts/UntitledSerif-RegularItalic.woff);
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Untitled Serif";
  src: url(../assets/fonts/UntitledSerif-Bold.woff);
  font-weight: 700;
}

@font-face {
  font-family: "Untitled Serif";
  src: url(../assets/fonts/UntitledSerif-BoldItalic.woff);
  font-weight: 700;
  font-style: italic;
}

/* general styling */

* {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  text-decoration:none;
  font-weight:inherit;
  font-style:inherit;
  color:inherit;
  font-size:100%;
  font-family:inherit;
  vertical-align:baseline;
  border-collapse:separate;
  border-spacing:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 30px 60px 30px 60px;
	text-align: left;
	vertical-align: top;
  background-color:#ffffff;
}

.container {
  position: relative;
}

#namespace {
  padding-left: 20px;
}

sup {
  font-size: 70%;
  vertical-align: super;
}

hr {
  border-top: 1px dashed;
  padding-bottom: 12px; 
}

/* nav */

nav {
  margin-left: 0;
  margin-right: auto;
  padding: 0;
  width: 100%;
	display: block;
  position: relative;
	text-align: center;
  left: 0px;
}

.navbutton {
  float: left;
  padding: 20px 20px 20px 0px;
}

.navbutton a {
  padding: 0px 3px 3px 3px;
  font-size: 16px;
  font-family: "IBM Plex Mono";
  font-weight: 400;
  color: #000011;
  text-decoration: none;
}

.navbutton a:hover {
  background-color: #97b0f9;
}

/* content */

.content {
  margin: 0;
  padding: 0 0 32px 0;
  width: 100%;
  max-width: 800px;
  clear: both;
}

.content h1 {
  margin: 32px 0px 32px 0px;
  font-size: 38px;
  font-family: "IBM Plex Mono";
  font-weight: 700;
  color: #000000;
  /* text-transform: uppercase;
  letter-spacing: 16px; */
  clear: both;
}

.content h2 {
  margin: 32px 0px 32px 0px;
  font-size: 30px;
  font-family: "IBM Plex Mono";
  font-weight: 700;
  color: #000000;
  /* text-transform: uppercase;
  letter-spacing: 10px; */
  clear: both;
}

.content h3 {
  margin: 0px 0px 16px 0px;
  font-size: 28px;
  font-family: "Untitled Serif";
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
}

.content img {
  margin: 32px 0px 32px 0px;
  display: block;
  height: auto;
  width: 100%;
  max-width: 800px;
}

.content p {
  margin: 0px 0px 16px 0px;
  font-size: 20px;
  font-family: "Untitled Serif";
  font-weight: 400;
  color: #000011;
  line-height: 1.5;
}

.content p i {
  font-style: italic;
}

.content ul i {
  font-style: italic;
}

.content ul b {
  font-weight: 700;
}

.content ul {
    list-style-type: "→";
    text-indent: -2em;
}

.content li {
  margin: 0px 0px 16px 0px;
  padding-left: 2.5em;
  font-size: 20px;
  font-family: "Untitled Serif";
  font-weight: 400;
  color: #000011;
  line-height: 1.5;
}

.content a {
  color: #5f87ff;
  text-decoration: none;
}

.content a:hover {
  text-decoration: underline;
}

.content blockquote {
  border-left: 0.5rem solid black; 
  padding-left: 1rem; 
}

/* profile styling */

.content .profile img {
  margin: 0px 32px 32px 0px;
  float: left;
  height: auto;
  width: 100%;
  max-width: 110px;
  vertical-align: center;
}

.content .profile p {
  vertical-align: center;
}

/* footer */

footer {
  margin: 0;
  padding: 0;
  height: 16px;
  width: 100%;
  max-width: 800px;
  /* position: absolute; */
  bottom: 0;
  clear: both;
  text-align: left;
}

footer p {
  font-size: 14px;
  font-family: "IBM Plex Mono", monospace;
  color: #111111;
}

footer a {
  color: #5f87ff;
  text-decoration: none;
}

footer a:hover {
  color: #eeeeee;
  background-color: #5f87ff;
}

/* small screens */

@media (max-width: 900px) {
  .navbutton a {font-size: 14px;}
  body {padding: 30px 30px 30px 30px;}
  .content h1 {font-size: 30px;}
  .content h2 {font-size: 26px;}
  .content h3 {font-size: 22px;}
  .content p {font-size: 18px;}
  .content li {font-size: 18px;}
}