* {
  color: #FDF4DC;
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
}


body {
  padding: 0;
  margin: 0;
  background-color: #000000;
}

main {
  display: grid;
  grid-template-columns: 1fr 5fr;
}

em {
  font-style: italic;
  color: #bfbfbf;
}

.left_bar {
  height: 100%;
  position: fixed;
  width: 16.6666%;
  bottom: 0%;
  overflow-y: hidden;
  z-index: 2;
}

.left_bar canvas {
  width: 100%;
  height: 100%;
}

.info {
  position: absolute;
  width: 100%;
  bottom: 45%;
  text-align: center;
  font-size: 28px;
}

.info h2 {
  font-size: 24px;
  font-family: "Philosopher", sans-serif;
  opacity: inherit;
}

.info p {
  font-size: 17px;
  opacity: inherit;
}

.side-image {
  animation: side-image-border 5s 0s linear infinite alternate;
  width: 22.5%;
  left: 50%;
  margin: auto;
  padding: 22.5px;
  border-radius: 50%;
  background-color: #00000033;
  backdrop-filter: blur(2px);
  opacity: inherit;
}

@keyframes side-image-border {
  from {border: 1px solid rgba(255, 255, 255, 0);}
  to {border: 1px solid rgba(255, 255, 255, 0.375);}
}

.navigation {
  position: fixed;
  display: absolute;
  padding: 0;
  margin: 0;
  background-color: #070707;
  width: 100%;
  height: 55px;
  z-index: 1;
}

nav ul {
  list-style-type: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: 20px;
  margin-left: 6%;
  margin-right: 6%;
}

nav a {
  color: #FDF4DC;
  text-decoration: none;
  padding: 15px;
  display: block;
  border-bottom: 0px solid #09090900;
  transition: background-color 0.1s, border-bottom 0.1s;
}

nav a:hover {
    background-color: #212121;
    border-bottom: 1px solid #ff7700;
}

nav li {
  float: left;
}

nav .quote {
  float: right;
  font-size: 12px;
  line-height: 27.5px;
}

nav .quote p {
  animation: quotecolor 5s 0s linear infinite alternate;
  cursor: default;
}

@keyframes quotecolor {
  from {color: #a9a9a9;}
  to {color: #ff7700;}
}

.credited-name {
  --from-color: #ff8800;
  --to-color: #ff6600;

  animation: creditcolor 3s 0s linear infinite alternate;
  font-style: italic;
}

@keyframes creditcolor {
  from {color: var(--from-color);}
  to {color: var(--to-color);}
}

table {
  width: 100%;
  text-align: center;
  border-spacing: 0;
}

table thead tr {
  background-color: #0a0a0a;
  font-weight: bold;
}

table thead tr th {
  padding: 10px;
  margin: 0;
}

table tbody tr td {
  padding: 4px;
  border-top: 1px solid #0f0f0f;
}

.aboutme-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.aboutme {
  position: absolute;
  top: 70vh;
  transform: translateY(-50vh);
  width: 50%;
  padding-bottom: 20vh;
}

.aboutme a {
  font-size: 20px;
}

.aboutme div {
    overflow-y: hidden;
}

.aboutme h1 {
  font-size: 24px;
  font-family: "Philosopher", sans-serif;
  text-align: center;
}

.aboutme p {
  font-size: 18px;
}

.aboutme .contact-info {
  display: flex;
  justify-content: center;
  width: 97%;
  padding: 0;
}

.aboutme .contact-info div {
  padding: 0;
  display: inline-block;
}

.aboutme .contact-info div img {
  width: 18px;
  vertical-align: middle;
  margin-bottom: 2px;
  filter: invert(93%) sepia(6%) saturate(1245%) hue-rotate(327deg) brightness(107%) contrast(98%);
}

.aboutme .contact-info .sep {
  margin-left: 20px;
  margin-right: 20px;
}

.certificates {
  margin-top: 4%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  height: auto;
  overflow-y: hidden;
}

.certificates div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.certificates img{
  height: auto;
  width: 100%;
}

.posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-top: 1%;
  padding-left: 5%;
  padding-right: 5%;
}

.post {
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  background-color: #090909;
  z-index: 2;
}

.post img {
  background-size: cover;
  background-position: center;
  width: 100%;
}

.post-details {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}

.post-details h1 {
  font-size: 17px;
}

.post-details p {
  margin-bottom: 50px;
}


.post-details .header-info {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  box-sizing: border-box;
  width: calc(100% - 22.5px);
  padding-bottom: 10px;
  position: absolute;
  bottom: 0;
}

.post-details .header-info .header-info-right {
  margin-left: auto;
}

.post-details p {
  font-size: 12px;
}

.markdown {
  min-width: 40%;
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 10%;
}

.markdown p {
  font-size: 18px;
  padding-bottom: 8px;
}

.markdown :not(pre) > code {
  background-color: #010101;
  /*font-family: "Source Code Pro", monospace;*/
  font-family: Hack, monospace;
  font-size: 14px;
  padding: 1px;
  padding-left: 6px;
  padding-right: 6px;
  border: 1px #4f4f4f solid;
  border-radius: 4px;
}

.markdown h2 {
  margin-top: 5%;
}

.markdown img:not(.header-img) {
  padding-left: 2.5%;
  width: 50%;
}

.markdown blockquote {
  left: 10px;
  margin-left: 2%;
  padding-left: 2%;
  padding-right: 1%;
  border-left: 4px solid #ff7700;
  background-color: #060606;
  animation: blockquotetab 3s 0s ease-in-out infinite alternate;
}

.markdown blockquote p {
  padding: 5px;
  font-size: 16px;
}

.markdown strong {
  font-weight: bolder;
  color: #edbd93;
}

@keyframes blockquotetab {
from {border-left: 2px solid #ff770088;}
to {border-left: 2px solid #ff770055;}
}

.markdown ul {
  margin: 0;
  list-style: none;
}

.markdown ul li::before {
  content:'‣';
  color: #ff7700;
  padding-right: 8px;
}

.markdown ol {
  list-stupe: none;
}

.markdown ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #ff7700;
  padding-right: 8px;
}

.markdown ol {
  counter-reset: item;
}

.markdown a {
  text-decoration: none;
  color: #bbceed;
}

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

.markdown a code {
  text-decoration: none;
  color: #bbceed;
}

.markdown a code:hover {
  text-decoration: underline;
}

.header-info img {
  filter: invert(93%) sepia(6%) saturate(1245%) hue-rotate(327deg) brightness(107%) contrast(98%);
  width: 20px;
}

.header-info p {
  font-size: 15px;
}

.header-info img,
.header-info p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  opacity: inherit;
}

.links {
  cursor: pointer;
}

hr {
  width: 95%;
  margin-top: 3%;
  margin-bottom: 3%;
  color: #4a4a4a;
}

.click-img {
  border-radius: 5px;
  cursor: pointer;
}

.click-img:hover {opacity: 0.9;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  cursor: pointer;
}

/* Modal Content (image) */
.modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 60%;
}

.page-flip {
  width: 100%;
  margin-bottom: 5%;
  display: flex;
  justify-content: center;
}

.page-flip button {
  border: 1px #848484 solid;
  border-radius: 5px;
  background-color: #00000000;
  color: #c4c4c4;
  cursor: pointer;
  font-size: 15px;
  width: 30%;
  padding-top: 20px;
  padding-bottom: 23px;
  margin: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  transition: 0.1s;
}
top: clamp(0px, 50%, calc(100vh - 100%));

.page-flip button:hover {
  background-color: #ffffff09;
}

.topaligner {
  margin-top: 55px;
}

@media screen and (min-width: 1350px) {
  .navigation {
    width: 83.3334%;
    margin-left: 16.6666%;
  }
}

@media screen and (max-width: 1350px) {
  main {
    display: inline;
    grid-template-rows: 1fr;
  }

  .roadmap {
    min-width: 70%;
    max-width: 70%;
  }

  .left_bar {
    display: none;
  }

  .navigation {
    margin-left: 0;
  }

  .posts {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .markdown {
    min-width: 70%;
    max-width: 70%;
  }


}

@media screen and (max-width: 1100px) {
  
  .posts {
    grid-template-columns: 1fr 1fr;
  }

  .aboutme {
    width: 75%;
  }

  .markdown {
    min-width: 70%;
    max-width: 70%;
  }

}

@media screen and (max-width: 700px) {
  .topaligner {
    margin-top: 30px;
  }

  .certificates img{
    height: auto;
    width: 70%;
  }

  .scriptlist {
    min-width: 80%;
    max-width: 80%;
  }

  .posts {
    grid-template-columns: 1fr;
    margin-top: 7.5%;
  }

  nav .quote {
    display: none;
  }

  .roadmap {
    min-width: 90%;
    max-width: 90%;
  }

  .markdown {
    padding-top: 10%;
    min-width: 90%;
    max-width: 90%;
  }

  .aboutme {
    width: 90%;
  }

  pre:has(code) {
    max-width: 90%;
    font-size: 12px;
  }

  .markdown img:not(.header-img) {
    width: 80%;
  }

  .modal-content {
    width: 100%;
  }

  .contact-info div a {
    font-size: 15px;
  }
}

@media screen and (max-width: 700px) {
}















/* WORK */




.box {
  position: relative;
  padding: 1px;
  margin: 5%;
  background: #101010;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box:not(.no-hover)::after {
  content: '';
  position: absolute;
  width: 10000px;
  height: 10000px;
  background-image: conic-gradient(transparent, transparent, transparent, #ff7700);
  animation: animate 2s linear infinite;
  animation-delay: -1s;
  opacity: 0;
  transition: 0.2s;
}

.box:not(.no-hover)::before {
  content: '';
  position: absolute;
  width: 10000px;
  height: 10000px;
  background-image: conic-gradient(transparent, transparent, transparent, #ff7700);
  animation: animate 2s linear infinite;
  opacity: 0;
  transition: 0.2s;
}

.box:not(.no-hover):hover::before {
  opacity: 1;
}

.box:not(.no-hover):hover::after {
  opacity: 1;
}

@keyframes animate
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}

.box span
{
  position: absolute;
  background: #111111;
  z-index: 1;
}


h4 {
  font-size: 18px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 16px;
}


.sun-tzu {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  background-color: #060606;
  overflow-y: hidden;
}

.sun-tzu img{
  width: 20%;
  height: 100%;
  object-fit: cover;
}

.sun-tzu div {
  display: grid;
  padding: 5px;
  grid-gap: 0px;
  text-align: center;
  padding-left: 3%;
  padding-right: 3%;
}

.sun-tzu p {
  font-style: italic;
  color: #bfbfbf;
  font-size: 16px;
}


.inline-tool {
  width: 75%;
  background-color: #0a0a0a;
  border: 1px #ff770055 solid;
  border-radius: 8px;
  padding: 3%;
  text-align: center;
}

.inline-tool input {
  background-color: #000000;
  border: 1px #1a1a1a solid;
  border-radius: 8px;
  padding: 2%;
  width: 75%;
  outline: none;
}

.inline-tool span {
  /*font-family: "Source Code Pro", monospace;*/
  font-family: "Hack", monospace;
}

.inline-tool button {
  padding: 1.75%;
  margin-left: 10px;
  background-color: #2a2a2a;
  cursor: pointer;
  border: none
}

.inline-tool #color-picker-container, #color-picker-container * {
  border-radius: 5px !important;
}
.inline-tool .color-picker-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}
.inline-tool #color-picker-swatch {
  width: 30px;
  height: 150px;
  border-radius: 5px;
  background-color: #ff0000;
  border: 1px solid rgba(0,0,0,0.1);
}
.inline-tool #color-picker-swatch-text {
  user-select: none;
}

#wew-to-reg .wew-to-reg-input {
  display: flex;
  justify-content: center;
  align-items: center;
}

#wew-to-reg .wew-to-reg-input * {
  margin-left: 15px;
  margin-right: 15px;
  font-size: 14px;
}

#wew-to-reg .wew-to-reg-input input {
  width: 60%;
}

#wew-to-reg textarea {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  color: #FDF4DC;
  background-color: #000;
  border: none;
  outline: none;
  box-shadow: none;
  resize: none;
  font-size: 10px;
}

.scriptlist {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 10%;
  border: 1px #686868 solid;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

.scriptlist .entry {
  display: flex;
  width: 100%;
  border: 1px #414141 solid;
  padding: 10px;
  margin: 5px 0;
  box-sizing: border-box;
}

.scriptlist .entry img {
	vertical-align: middle;
  filter: invert(93%) sepia(6%) saturate(1245%) hue-rotate(327deg) brightness(107%) contrast(98%);
	width: 20px;
	height: 20px;
}

.scriptlist .entry span {
	margin-left: 20px;
}

.scriptlist .entry:hover {
	background-color: #ffffff20;
	cursor: pointer;
}

.scriptlist #curr-dir {
  /*font-family: "Source Code Pro", monospace;*/
  font-family: "Hack", monospace;
  font-size: 12px;
  cursor: default;
}

.not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60vh;
}

.not-found h1 {
  cursor: default;
  user-select: none;
  margin: 0;
  color: #ffffff0f;
  font-size: 200px;
  font-weight: 700;
  letter-spacing: 30px;
}

.roadmap {
  display: flex;
  flex-direction: row;

  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
}

.roadmap .line {
  margin-top: 30px;
  margin-bottom: 5px;
  transform: translateX(20px);
  width: 1px;
  background: linear-gradient(
    to bottom,
    #ffffff55 0,
    #ffffff55 calc(100% - 120px),
    transparent 100%
  );
}

.roadmap-entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  flex: 1;
}

.roadmap-entry {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.roadmap-entry .point {
  width: 11px;
  height: 11px;
  margin: 15px;
  margin-top: 30px;
  margin-right: 20px;
  transform: rotate(45deg);
  background-color: #fff;
}

.roadmap-entry .in-progress {
  animation: point-in-progress 4.15s linear infinite;
}

@keyframes point-in-progress {
  from {background-color: #ff7700;}
  to {background-color: #ffffff;}
}

.roadmap-content {
  width: 100%;
  background-color: #090909;
  padding: 25px;
  margin: 0;
  border: 1px #2a2a2a solid;
}

.roadmap-content h3 {
  margin: 0;
}

.roadmap-content p {
  margin: 0;
  margin-top: 15px;
}

.roadmap-content span {
  color: #a0a0a0;
  padding-top: 20px;
  padding-bottom: 20px;
}
/*
 * Based on Plugin: Syntax Highlighter CB
 * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
 * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
 * Version: 1.0.0
 * Author: c.bavota
 * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
/* http://cbavota.bitbucket.org/syntax-highlighter/  */

/* =====   ===== */
code[class*="language-"],
pre[class*="language-"] {
  color: #fcf7e8;
	text-shadow: 0 1px 1px #000;
	font-family: "Source Code Pro", monospace;
	direction: ltr;
	text-align: left;
	word-spacing: normal;
	white-space: pre;
	word-wrap: normal;
	line-height: 1.4;
	background: none;
	border: 0;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"] code {
	float: left;
	padding: 0 15px 0 0;
	font-family: "Source Code Pro", monospace;
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
	background: #010101;
	font-family: "Source Code Pro", monospace;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 12px;
	margin: 1em 0;
	overflow: auto;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
  border: 1px #4f4f4f solid;
  font-family: "Source Code Pro", monospace;
  width: calc(100% - 26px);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: 5px 10px;
	line-height: 1;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
  font-family: "Source Code Pro", monospace;
}

.token {
	font-family: "Source Code Pro", monospace;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #797979;
}

.token.selector,
.token.operator,
.token.punctuation {
	color: #fff;
}

.token.namespace {
	opacity: .7;
}

.token.tag,
.token.boolean {
	color: #ffd893;
}

.token.atrule,
.token.attr-value,
.token.hex,
.token.string {
	color: #B0C975;
}

.token.property,
.token.entity,
.token.url,
.token.attr-name,
.token.keyword {
	color: #c27628;
}

.token.regex {
	color: #9B71C6;
}

.token.entity {
	cursor: help;
}

.token.function,
.token.constant {
	color: #e5a638;
}

.token.variable {
	color: #fdfba8;
}

.token.number {
	color: #8799B0;
}

.token.important,
.token.deliminator {
	color: #E45734;
}

/* Line highlight plugin */
.line-highlight.line-highlight {
	background: rgba(255, 255, 255, .2);
}

.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
	top: .3em;
	background-color: rgba(255, 255, 255, .3);
	color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

/* for line numbers */
/* span instead of span:before for a two-toned border */
.line-numbers .line-numbers-rows > span {
	border-right: 3px #d9d336 solid;
}