/* barlow-100 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/barlow-v11-latin-100.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-100.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-100.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-100italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/barlow-v11-latin-100italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-100italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-100italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-200 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/barlow-v11-latin-200.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-200.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-200.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-200italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/barlow-v11-latin-200italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-200italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-200italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-300 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/barlow-v11-latin-300.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-300.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-300italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/barlow-v11-latin-300italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-300italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v11-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-regular.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/barlow-v11-latin-italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-v11-latin-500.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-500.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-500italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/barlow-v11-latin-500italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-500italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-600 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v11-latin-600.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-600.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-600italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/barlow-v11-latin-600italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-600italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-700 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v11-latin-700.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-700.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-700italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/barlow-v11-latin-700italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-700italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-800 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/barlow-v11-latin-800.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-800.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-800italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/barlow-v11-latin-800italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-800italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-900 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/barlow-v11-latin-900.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-900.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-900.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
/* barlow-900italic - latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/barlow-v11-latin-900italic.eot');
  /* IE9 Compat Modes */
  src: local(''), url('../fonts/barlow-v11-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/barlow-v11-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/barlow-v11-latin-900italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/barlow-v11-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/barlow-v11-latin-900italic.svg#Barlow') format('svg');
  /* Legacy iOS */
  font-display: swap;
}
:root {
  /* COLORS */
  --red: #ff5582;
  --pink: #f2b3cf;
  --fairpink: #eed3e1;
  --yellow: #fff3a3;
  --linen: #fcecec;
  --paleblue: #bdd2ff;
  --purple: #d2b3ff;
  --palegreen: #a1ffa1;
  --dusk: #474e5e;
  --ash: #232630;
  --cornflower-blue: #a1c4fd;
  --light-cornflower-blue: #adccff;
  --duskblue: #a2acc3;
  --darkbrown: #34343d;
  --pureblack: #080808;
  --royalblue: #879bff;
  /* BOLD */
  --boldpink: 310, 100%, 70%;
  --boldpurple: #7322e6;
  --boldred: #ff5555;
  --boldyellow: #ffff00;
  --boldorange: #ffb86c;
  --boldgreen: #85ffa4;
  --boldblue: #99e7ff;
  --boldlightpink: 310, 100%, 84%;
  /* PASTEL */
  --pastelyellow: #fcf4c9;
  --pastelcoral: #ffe896;
  --pastelpink: #fbcdf2;
  --pastelpurple: #e8befa;
  --pastelperiwinkle: #abbfff;
  --pastelgreen: #bbf3c0;
  --theme-lighter: #d2ebe7;
  --theme-light: #b3d6df;
  --theme-normal: #92bccc;
  --theme-dark: #b37730;
  --theme-darker: #aa6442;
  --theme-highlight: #dd832f;
  --theme-light-gray: #f5f5f5;
  --theme-dark-gray: #414141;
  --dark-text: #414141;
  --light-text: #ededed;
  --background-light: #fff;
  --background-light-faint: #fbfbfb;
  --background-dark: #1c1c1c;
  --background-dark-faint: #242424;
}
@media (prefers-color-scheme: light) {
  :root {
    --text-for-light-background: var(--dark-text);
    --text-for-dark-background: var(--light-text);
    --text-color: var(--text-for-light-background);
    --background: var(--background-light);
    --background-faint: var(--background-light-faint);
    --link-color: var(--theme-normal);
    --link-color-hover: var(--theme-light);
    --tag-color: var(--theme-highlight);
    --tag-color-hover: var(--theme-light);
    --tag-text-color: var(--text-color);
    --date-color-hover: var(--theme-lighter);
    --code: var(--theme-light-gray);
    --code-text: var(--dark-text);
    --project-background: #fbfbfb;
    --project-background-hover: rgba(152, 243, 252, 0.05);
    --project-border-color: rgba(25, 27, 31, 0.05);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-for-light-background: var(--dark-text);
    --text-for-dark-background: var(--light-text);
    --text-color: var(--text-for-dark-background);
    --background: var(--background-dark);
    --background-faint: var(--background-dark-faint);
    --link-color: var(--theme-normal);
    --link-color-hover: var(--theme-light);
    --tag-color: var(--theme-highlight);
    --tag-color-hover: var(--theme-light);
    --tag-text-color: var(--theme-dark-gray);
    --date-color-hover: var(--theme-light);
    --code: var(--theme-dark-gray);
    --code-text: var(--light-text);
    --project-background: rgba(255, 255, 255, 0.03);
    --project-background-hover: rgba(43, 191, 201, 0.05);
    --project-border-color: rgba(145, 162, 194, 0.05);
  }
}
::selection {
  background: var(--theme-lighter);
  /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: var(--theme-lighter);
  /* Gecko Browsers */
}
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: Barlow, sans-serif;
  font-size: 1rem;
  text-rendering: optimizeLegibility;
  line-height: 1.75;
  font-style: normal;
  font-weight: normal;
  color: var(--text-color);
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
  background-color: var(--background);
}
nav {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  background-color: var(--background-faint);
  z-index: 10;
}
nav div {
  padding: 5px 10px 5px 10px;
  width: auto;
}
nav div a {
  text-decoration: none;
  color: var(--text-color);
}
nav div a:hover,
nav div a:focus {
  font-weight: bold;
}
nav div.home {
  font-size: 1.3rem;
  float: left;
  font-weight: bold;
}
nav div.contact {
  margin-top: 4px;
  margin-right: 15px;
  float: right;
  font-size: 1rem;
}
nav div.contact a {
  margin-left: 30px;
}
div.header {
  width: 100%;
  background-color: var(--background-faint);
  background-size: cover;
}
div.header div.title {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 40px;
}
div.header div.title h1 {
  color: var(--text-color);
  margin-bottom: 0px;
}
div.header div.title h2 {
  color: var(--text-color);
  font-size: 1rem;
}
div.header span {
  font-style: italic;
  color: var(--text-color);
}
div.header span a {
  color: var(--link-color);
}
div.header span a:hover,
div.header span a:focus {
  color: var(--link-color-hover);
}
div.container {
  box-sizing: border-box;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}
div.container div.meta {
  margin-bottom: 30px;
}
div.container div.meta div.labels {
  /*margin-bottom: 20px;*/
  line-height: 2rem;
}
div.container div.meta div.labels > span {
  font-weight: 300;
  font-size: 0.9rem;
  display: none;
}
div.container div.meta div.labels ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
div.container div.meta div.labels ul li {
  display: inline;
  margin-right: 6px;
  background-color: var(--tag-color);
  border-radius: 4px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 2px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
div.container div.meta div.labels ul li:hover {
  background-color: var(--tag-color-hover);
  transform: scale(2);
}
div.container div.meta div.labels ul li a {
  color: var(--tag-text-color);
  line-height: 1.1rem;
  text-decoration: none;
  font-size: 0.9rem;
}
div.container div.meta div.labels ul li.date {
  border: 1px solid var(--tag-color);
  background-color: var(--background);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
div.container div.meta div.labels ul li.date a {
  color: var(--text-color);
}
div.container div.meta div.labels ul li.date:hover {
  background-color: var(--date-color-hover);
}
div.container div.meta div.archive {
  line-height: 2rem;
  /*margin-bottom: 20px;*/
}
div.container div.meta div.archive > span {
  font-weight: 300;
  font-size: 0.9rem;
}
div.container div.meta div.archive > span a {
  text-decoration: none;
}
div.container div.meta div.archive ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
div.container div.meta div.archive ul li {
  display: inline;
  margin-left: 6px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid var(--tag-color);
  padding-right: 6px;
  padding-left: 6px;
}
div.container div.meta div.archive ul li a {
  color: var(--tag-color);
  text-decoration: none;
  font-size: 0.9rem;
}
div.container div.article div.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
div.container div.article div.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.container div.article img {
  vertical-align: middle;
  border-style: none;
}
div.container div.article sup {
  display: none;
}
div.container div.article .img-fluid {
  max-width: 100%;
  height: auto;
}
div.container div.article ul > li {
  line-height: 1.5;
  margin-bottom: 10px;
  /*list-style: none;*/
  /*&::before {
					content: "\25B6";
					color: @label-color;
					display: inline-block;
					font-weight: normal;
					width: 1.3rem;
					margin-left: -1.3rem;
				}*/
}
div.container div.article ul > li:last-child {
  margin-bottom: 0;
}
div.container div.article a {
  color: var(--link-color);
}
div.container div.article a:focus,
div.container div.article a:hover {
  color: var(--link-color-hover);
}
div.container div.article h1,
div.container div.article h2 {
  /*transition: all .2s;*/
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--background-faint);
}
div.container div.article span.caption {
  font-size: 0.8rem;
  font-style: italic;
  display: block;
  margin: 0;
  padding: 10px;
  text-align: center;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #6c757d !important;
}
div.container div.article p {
  font-size: 1rem;
  line-height: 1.6;
}
div.container div.article p.posted {
  font-weight: 300;
  font-size: 0.9rem;
  margin-top: 0;
  /*color: #6c757d;*/
}
div.container div.article p.posted a {
  text-decoration: none;
}
div.container div.article blockquote {
  /*border-left: 5px solid lighten(@label-color, 30%);*/
  /*margin: 1.5em 130px;*/
  padding: 0.5em 30px;
  color: var(--text-color);
  line-height: 1.4;
  /*&:after {
					content: '\201D';
				}*/
}
div.container div.article blockquote:before {
  content: "\201C";
  font-size: 1rem;
  /*font-family: 'Sanchez';*/
}
div.container div.article blockquote footer {
  padding-top: 20px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-color);
  /*float: right;*/
}
div.container div.article blockquote footer:before {
  content: "\2015\00a0";
}
div.container div.article pre {
  border: 1px solid var(--theme-color-dark);
  border-radius: 3px;
  border-left: 5px solid var(--theme-normal);
  background-color: var(--code);
  color: var(--code-text);
  padding: 0.5em;
  padding-left: 20px;
  line-height: 1.5;
  font: 16px/1.54 "courier new", courier, monospace;
  overflow-x: auto;
  word-break: break-word;
  word-wrap: break-word;
}
div.container div.article code {
  background-color: var(--code);
  font-weight: bold;
  border-radius: 2px;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--code-text);
}
div.container.posts div.article {
  margin-top: 15px;
  margin-bottom: 50px;
  transition: all 0.15s ease-in-out;
}
div.container.posts div.article:hover {
  transform: scale(1.005);
}
div.container.posts div.article h1,
div.container.posts div.article h2,
div.container.posts div.article h3,
div.container.posts div.article h4,
div.container.posts div.article h5,
div.container.posts div.article h6 {
  border-bottom: none;
  margin-bottom: 0;
}
div.container.posts div.article a {
  text-decoration: none;
}
div.container.posts div.article hr {
  border: 0;
  border-top: 2px solid var(--background-faint);
}
.contact-form {
  width: 90%;
  margin-bottom: 50px;
}
.contact-form .form-control {
  display: block;
  margin-bottom: 15px;
  padding-left: 10px;
  width: 100%;
  line-height: 2rem;
  border-radius: 10px;
  border: 1px solid var(--text-color);
  font-size: 1rem;
}
.contact-form .form-control[type="email"] {
  margin-bottom: 40px;
}
.contact-form .form-btn {
  line-height: 2rem;
  border-radius: 10px;
  border: 1px solid var(--text-color);
  background-color: var(--text-color);
  font-size: 1rem;
}
.footer {
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--background-faint);
}
.footer p,
.footer a {
  display: inline-block;
  padding-right: 3rem;
}
.footer a {
  color: var(--text-color);
}
.footer a:focus,
.footer a:hover {
  color: #0085a1;
}
.project-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.project-container .project {
  box-shadow: 0 3px 6px 0 rgba(25, 27, 31, 0.05);
  border-color: var(--project-border-color);
  border-style: solid;
  border-width: 1px;
  display: flex;
  align-items: stretch;
  text-align: center;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  border-radius: 20px;
  background-color: var(--project-background);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.project-container .project:hover {
  background-color: var(--project-background-hover);
}
.project-container .project:hover a img {
  opacity: 1;
  transform: scale(1.05) translateY(-4px) rotate(-2deg);
}
.project-container .project a {
  padding: 15px;
  padding-left: 30px;
  padding-right: 30px;
  text-decoration: none;
  color: var(--text-color);
}
.project-container .project a p {
  font-size: 18px;
}
.project-container .project a h2 {
  font-weight: 700;
  font-size: 22px;
  color: var(--text-color);
  line-height: 0.3em;
}
.project-container .project a img {
  margin-top: 30px;
  max-width: 25%;
  height: auto;
  margin-bottom: 6px;
  box-shadow: 0 3px 6px 0 rgba(25, 27, 31, 0.05);
  border-radius: 20%;
  aspect-ratio: 1;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.project-container .telekom:hover {
  background-color: rgba(101, 26, 138, 0.077);
}
.project-container .watchlib:hover {
  background-color: rgba(60, 133, 60, 0.077);
}
.project-container .link:hover {
  background-color: rgba(193, 154, 120, 0.077);
}
@media (max-width: 575px) {
  div.container,
  div.title {
    max-width: 540px;
    width: 90%;
  }
  .project-container {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 576px) {
  div.container,
  div.title {
    max-width: 540px;
    width: 90%;
  }
}
@media (min-width: 768px) {
  div.container,
  div.title {
    max-width: 720px;
    width: 90%;
  }
  div.article {
    text-align: justify;
  }
}
@media (min-width: 992px) {
  div.container,
  div.title {
    max-width: 960px;
    width: 60%;
  }
  div.article {
    text-align: justify;
  }
}