@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
.highlight .err { color: #e3d2d2; background-color: #a61717; }
.highlight .c { color: #9c9996; }
.highlight .cm { color: #9c9996; }
.highlight .cp { color: #9c9996; }
.highlight .c1 { color: #9c9996; }
.highlight .cs { color: #9c9996; font-style: italic; }
.highlight .gd { color: #e25050; }
.highlight .gd .x { color: #e25050; }
.highlight .ge { font-style: italic; }
.highlight .gh { color: #999999; }
.highlight .gi { color: #3f993f; }
.highlight .gi .x { color: #3f993f; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gr { color: #aa0000; }
.highlight .gs { font-weight: bold; }
.highlight .gt { color: #aa0000; }
.highlight .gu { color: #aaaaaa; }
.highlight .k { color: #cf222e; }
.highlight .kc { color: #cf222e; }
.highlight .kd { color: #cf222e; }
.highlight .kp { color: #cf222e; }
.highlight .kr { color: #cf222e; }
.highlight .kt { color: #445588; }
.highlight .n { color: #111111; }
.highlight .na { color: #097e39; }
.highlight .nb { color: #cf222e; }
.highlight .bp { color: #999999; }
.highlight .nc { color: #097e39; }
.highlight .ne { color: #990000; }
.highlight .nf { color: #2c7d74; }
.highlight .ni { color: #097e39; }
.highlight .nn { color: #097e39; }
.highlight .no { color: #a61154; }
.highlight .nt { color: #b81e63; }
.highlight .nv { color: #752a75; }
.highlight .vc { color: #752a75; }
.highlight .vg { color: #752a75; }
.highlight .vi { color: #752a75; }
.highlight .o { color: #0842a0; }
.highlight .ow { color: #0842a0; }
.highlight .m { color: #005a99; }
.highlight .mf { color: #005a99; }
.highlight .mh { color: #005a99; }
.highlight .mi { color: #005a99; }
.highlight .il { color: #005a99; }
.highlight .mo { color: #005a99; }
.highlight .s { color: #914d08; }
.highlight .s1 { color: #914d08; }
.highlight .s2 { color: #914d08; }
.highlight .sb { color: #914d08; }
.highlight .sc { color: #914d08; }
.highlight .sd { color: #914d08; }
.highlight .se { color: #914d08; }
.highlight .sh { color: #914d08; }
.highlight .si { color: #914d08; }
.highlight .sr { color: #009926; }
.highlight .ss { color: #0842a0; }
.highlight .sx { color: #914d08; }
.highlight .w { color: #bbbbbb; }
.highlight .lineno, .highlight .gl { color: #9c9996; }
.highlight .hll { background-color: #ffffcc; }

html { font-size: 16px; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; color: #414141; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; overflow-wrap: break-word; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, div.highlight, figure.highlight { margin-bottom: 15px; }

hr { margin-top: 30px; margin-bottom: 30px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { color: #111111; font-weight: 500; }

/** Links */
a { color: #1e69d8; text-decoration: none; }
a:visited { color: #154895; }
a:hover { color: #414141; text-decoration: underline #818181; text-underline-offset: 3px; }
.social-media-list a:hover { text-decoration: none; }
.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #818181; border-left: 4px solid #e7e7e7; padding-left: 15px; font-size: 1.05rem; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
blockquote i, blockquote em { font-style: normal; }

/** Code formatting */
pre, code { font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; background-color: #f6f8fa; }
@media screen and (max-width: 800px) { pre, code { font-family: monospace; } }

pre { padding: 8px 12px; font-size: 15px; line-height: 1.4; color: #111111; overflow-x: auto; }
pre > code { display: inline-block; width: 100%; }

div.highlight, figure.highlight { border: 1px solid #e7e7e7; border-radius: 3px; }
div.highlight pre, figure.highlight pre { margin: 0; }
div.highlight table, div.highlight tbody, div.highlight th, div.highlight tr, div.highlight td, figure.highlight table, figure.highlight tbody, figure.highlight th, figure.highlight tr, figure.highlight td { margin: 0; padding: 0; border: 0; }
div.highlight .lineno, div.highlight .gl, figure.highlight .lineno, figure.highlight .gl { text-align: right; }

figure.highlight table { margin: -8px -12px -14px; }
figure.highlight td.gutter { border-right: 1px solid #e7e7e7; }
figure.highlight td.code { width: 100%; }

code.highlighter-rouge { padding: 1px 5px; font-size: 14px; border: 1px solid #e7e7e7; border-radius: 3px; }

/** Wrapper */
.wrapper { max-width: 1000px; margin: 0 auto; padding: 0 30px; }
@media screen and (max-width: 1000px) { .wrapper { padding-right: 18px; padding-left: 18px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.orange { color: #f66a0a; }

.grey { color: #828282; }

.svg-icon { width: 1.25em; height: 1.25em; display: inline-block; fill: currentColor; vertical-align: text-bottom; overflow: visible; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e7e7e7; }
table tr:nth-child(even) { background-color: #f6f6f6; }
table th, table td { padding: 10px 15px; }
table th { background-color: #efefef; border: 1px solid #dfdfdf; }
table td { border: 1px solid #e7e7e7; }
@media screen and (max-width: 1000px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } }

/** Site header */
.site-header { position: relative; width: 100%; min-height: 55.95px; line-height: 54px; background-color: #fdfdfd; border-top: 5px solid #414141; border-bottom: 1px solid #e7e7e7; }

.site-title { font-size: 1.625rem; font-weight: 300; letter-spacing: -1px; margin-bottom: 0; float: left; }
@media screen and (max-width: 800px) { .site-title { padding-right: 45px; } }
.site-title, .site-title:visited { color: #414141; }

.site-nav { float: right; border: none; background-color: inherit; }
.site-nav label[for="nav-trigger"], .site-nav #nav-trigger { display: none; }
.site-nav .nav-item { color: #414141; }
.site-nav .nav-item:not(:last-child) { margin-right: 15px; }
@media screen and (max-width: 1000px) { .site-nav { position: absolute; top: 9px; right: 18px; background-color: #fdfdfd; border: 1px solid #e7e7e7; border-radius: 5px; text-align: right; }
  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; cursor: pointer; }
  .site-nav .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 18px; text-align: center; }
  .site-nav .menu-icon::before { font-family: "Font Awesome 7 Free"; font-weight: 900; }
  .site-nav .menu-icon > svg path { fill: #414141; }
  .site-nav #nav-trigger ~ label[for=nav-trigger] .menu-icon::before { content: "\f0c9"; font-size: 1.25em; }
  .site-nav #nav-trigger ~ .nav-items { clear: both; display: none; }
  .site-nav #nav-trigger:checked ~ label[for=nav-trigger] .menu-icon::before { content: "\f00d"; font-size: 1.5em; }
  .site-nav #nav-trigger:checked ~ .nav-items { display: block; padding-bottom: 5px; }
  .site-nav #nav-trigger:checked ~ .nav-items .nav-item { margin-left: 20px; padding: 5px 10px; }
  .site-nav .nav-item { display: block; margin-right: 15px; padding: 5px 0; color: #414141; line-height: 1.5; } }

/** Site footer */
.site-footer { border-top: 1px solid #e7e7e7; padding: 30px 0; }

.footer-heading { font-size: 1.125rem; margin-bottom: 15px; }

.feed-subscribe .svg-icon { padding: 5px 5px 2px 0; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper, .social-links { font-size: 0.9375rem; color: #656565; }

.footer-col { margin-bottom: 15px; }

.footer-col-1, .footer-col-2 { width: calc(50% - (30px / 2)); }

.footer-col-3 { width: calc(100% - (30px / 2)); }

@media screen and (min-width: 1200px) { .footer-col-1 { width: calc(35% - (30px / 2)); }
  .footer-col-2 { width: calc(20% - (30px / 2)); }
  .footer-col-3 { width: calc(45% - (30px / 2)); } }
@media screen and (min-width: 1000px) { .footer-col-wrapper { display: flex; }
  .footer-col { width: calc(100% - (30px / 2)); padding: 0 15px; }
  .footer-col:first-child { padding-right: 15px; padding-left: 0; }
  .footer-col:last-child { padding-right: 0; padding-left: 15px; } }
/** Page content */
.page-content { padding: 30px 0; flex: 1 0 auto; }

.page-heading { font-size: 2rem; }

.post-list-heading { font-size: 1.75rem; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #656565; }

.post-link { display: block; font-size: 1.5rem; }

/** Posts */
.post-header { margin-bottom: 30px; padding-bottom: 18px; text-align: center; border-bottom: 1px solid #e7e7e7; }

.post-meta .bullet-divider { padding-inline: 15px; }
.post-meta .meta-label { font-weight: 600; }
.post-meta .force-inline { display: inline; }
.post-meta .force-inline::before { content: "•"; padding-inline: 5px; }
.post-meta .post-authors { margin-top: 3px; }

.post-title, .post-content h1 { margin-bottom: 10px; font-size: 2.625rem; font-weight: 400; letter-spacing: -1px; line-height: 1.15; }
@media screen and (min-width: 1200px) { .post-title, .post-content h1 { font-size: 2.625rem; } }

.post-content { margin-bottom: 30px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-top: 30px; }
.post-content h2 { font-size: 1.75rem; }
@media screen and (min-width: 1200px) { .post-content h2 { font-size: 2rem; } }
.post-content h3 { font-size: 1.375rem; }
@media screen and (min-width: 1200px) { .post-content h3 { font-size: 1.625rem; } }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1.0625rem; }

.comments-disabled-message { text-align: center; font-weight: 300; }

.social-media-list { display: table; margin: 0 auto; }
.social-media-list li { float: left; min-width: 45px; min-height: 45px; text-align: center; margin: 5px 10px 5px 0; }
.social-media-list li:last-of-type { margin-right: 0; }
.social-media-list li a { display: block; padding: 10px 12px; border: 1px solid #e7e7e7; }
.social-media-list li a:hover { border-color: #dadada; }

/** Pagination navbar */
.pagination { display: table; margin: 0 auto; list-style-type: none; }
.pagination li { float: left; margin: 0 3px; min-width: 45px; min-height: 45px; text-align: center; }
.pagination li a { display: block; text-decoration: none; border: 1px solid #e7e7e7; }
.pagination li a:hover { border-color: #dadada; }
.pagination li a, .pagination li div { min-width: 41px; padding: 10px 12px; text-align: center; box-sizing: border-box; }
.pagination li div { border: 1px solid transparent; }
.pagination li div.pager-edge { color: #e7e7e7; border: 1px dashed; }
.pagination li div.current-page { font-weight: bold; }

/** Task-lists */
.task-list { margin-left: 0; padding-left: 18px; }

.task-list-item { list-style-type: none; }
.task-list-item-checkbox { position: relative; margin-right: 9px; margin-left: -15px; appearance: none; border: 8px solid #e7e7e7; vertical-align: text-top; z-index: -1; }
.task-list-item-checkbox::after { position: absolute; top: -8px; left: -3px; width: 4px; height: 10px; content: ""; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-list-item-checkbox:checked::after { border-color: #414141; }

/** Grid helpers */
@media screen and (min-width: 1200px) { .one-half { width: calc(50% - (30px / 2)); } }
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

* { box-sizing: border-box; }

body { background-color: #454545; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23454545'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23232323'/%3E%3Cstop offset='1' stop-color='%23454545'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform=''%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-129.6 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.87' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; display: flex; min-height: 100vh; flex-direction: column; overflow-wrap: break-word; font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; color: #e0e0e0; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }

h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, div.highlight, figure.highlight { margin-bottom: 15px; }

.wrapper { max-width: calc(1000px - (30px)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
@media screen and (min-width: 1000px) { .wrapper { max-width: calc(1000px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }

.wrapper:after { content: ""; display: table; clear: both; }

pre, code { font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; font-size: 0.9375em; border-radius: 3px; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; padding: 20px; background: #0f0f0f; border-radius: 20px; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

hr { margin-top: 30px; margin-bottom: 30px; }

main { display: block; }

img { max-width: 100%; vertical-align: middle; }

p img:first-child:last-child { border-radius: 10px; margin: 20px 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); }

figure > img { display: block; }

figcaption { font-size: 14px; }

ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #fff; }

a { color: #86bb48; text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote { border-left: 10px solid #86bb48; padding-left: 15px; font-size: 1.125rem; letter-spacing: -1px; margin: 30px 0; padding: 15px; border-radius: 10px; background-color: rgba(134, 187, 72, 0.1); }
blockquote > :last-child { margin-bottom: 0; }

table { margin-bottom: 30px; width: 100%; text-align: left; border-collapse: collapse; border-radius: 10px; overflow: hidden; }
table tr:nth-child(even) { background-color: #3c3c3c; }
table th, table td { padding: 10px 15px; }
table th { background-color: #454545; }
@media screen and (max-width: 1000px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title, .post-content h1 { font-size: 2.625rem; letter-spacing: -1px; line-height: 1.15; }
@media screen and (min-width: 1000px) { .post-title, .post-content h1 { font-size: 2.625rem; } }

.post-content h1, .post-content h2, .post-content h3 { margin-top: 30px; }
.post-content h4, .post-content h5, .post-content h6 { margin-top: 30px; }
.post-content h2 { font-size: 1.75rem; }
@media screen and (min-width: 1000px) { .post-content h2 { font-size: 2rem; } }
.post-content h3 { font-size: 1.375rem; }
@media screen and (min-width: 1000px) { .post-content h3 { font-size: 1.625rem; } }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1.0625rem; }

article, .comments, .box { padding: 30px; background: #272726; border-radius: 20px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); margin: 25px 0; }
@media screen and (max-width: 600px) { article, .comments, .box { padding: 0; background: transparent; box-shadow: none; } }

@media screen and (min-width: 600px) { .comments { padding: 15px 30px; } }

.page-content { margin-top: 80px; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; display: flex; align-items: center; background-color: #0f0f0f; border-bottom: 2px solid #86bb48; padding-left: 20px; font-weight: 600; }

.site-title { font-size: 1.625rem; letter-spacing: -1px !important; margin-bottom: 0  !important; float: left !important; align-items: left !important; position: fixed; right: 72.5%; }
.site-title:hover { text-decoration: none !important; }
@media screen and (max-width: 600px) { .site-title { padding-right: 45px !important; } }

.site-icon { position: absolute; left: 50%; top: 100%; margin-top: -47px; width: 70px; height: 70px; padding: 14px; background: #272726; border-radius: 50%; }
@media screen and (max-width: 600px) { .site-icon { width: 50px; height: 50px; margin-top: -25px; } }

.site-nav { position: absolute; top: 9px; right: 15px; border-radius: 5px; text-align: right; }
.site-nav .nav-trigger { display: none; }
.site-nav .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
.site-nav .menu-icon > svg path { fill: #86bb48; }
.site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
.site-nav input ~ .trigger { clear: both; display: none; }
.site-nav input:checked ~ .trigger { display: block; background: #0f0f0f; border-radius: 20px; padding: 10px; }
.site-nav .page-link { display: block; padding: 5px 10px; }
.site-nav .page-link:not(:last-child) { margin-right: 0; }
.site-nav .page-link:hover { text-decoration: none; }
@media screen and (min-width: 1000px) { .site-nav { flex: 1; position: static; float: right; border: none; background-color: inherit; height: 100%; }
  .site-nav label[for="nav-trigger"] { display: none; }
  .site-nav .menu-icon { display: none; }
  .site-nav input ~ .trigger { display: block; height: 100%; }
  .site-nav .page-link { display: inline-flex; align-items: center; height: 100%; }
  .site-nav .page-link.active { background-color: #86bb48; color: #0f0f0f; } }

.home-box { padding: 0; overflow: hidden; }
.home-box .post-link { color: inherit; display: block; padding: 30px; transition: .3s background-color; }
.home-box .post-link:not(:last-child) { border-bottom: 1px solid #0f0f0f; }
.home-box .post-link:hover { text-decoration: none; background-color: #0f0f0f; }
.home-box .post-link h3 { margin: 0; }

.site-footer .footer { display: flex; padding: 15px; padding-bottom: 40px; }

.footer-title { flex: 1; }

.footer-social-links svg { width: 20px; height: 20px; fill: #86bb48; }
.footer-social-links a:not(:first-child) { margin-left: 6px; }

.highlight .c { color: #586e75; font-style: italic; }
.highlight .err { color: #dc322f; }
.highlight .k { color: #93a1a1; font-weight: bold; }
.highlight .o { color: #93a1a1; font-weight: bold; }
.highlight .cm { color: #586e75; font-style: italic; }
.highlight .cp { color: #586e75; font-weight: bold; }
.highlight .c1 { color: #586e75; font-style: italic; }
.highlight .cs { color: #586e75; font-weight: bold; font-style: italic; }
.highlight .gd { color: #dc322f; }
.highlight .gd .x { color: #dc322f; }
.highlight .ge { color: #839496; font-style: italic; }
.highlight .gr { color: #dc322f; }
.highlight .gh { color: #586e75; }
.highlight .gi { color: #859900; }
.highlight .gi .x { color: #859900; }
.highlight .go { color: #839496; }
.highlight .gp { color: #839496; }
.highlight .gs { color: #93a1a1; font-weight: bold; }
.highlight .gu { color: #586e75; }
.highlight .gt { color: #dc322f; }
.highlight .kc { color: #93a1a1; font-weight: bold; }
.highlight .kd { color: #93a1a1; font-weight: bold; }
.highlight .kp { color: #93a1a1; font-weight: bold; }
.highlight .kr { color: #93a1a1; font-weight: bold; }
.highlight .kt { color: #6c71c4; font-weight: bold; }
.highlight .m { color: #2aa198; }
.highlight .s { color: #d33682; }
.highlight .na { color: #2aa198; }
.highlight .nb { color: #268bd2; }
.highlight .nc { color: #6c71c4; font-weight: bold; }
.highlight .no { color: #2aa198; }
.highlight .ni { color: #6c71c4; }
.highlight .ne { color: #6c71c4; font-weight: bold; }
.highlight .nf { color: #268bd2; font-weight: bold; }
.highlight .nn { color: #839496; }
.highlight .nt { color: #268bd2; }
.highlight .nv { color: #2aa198; }
.highlight .ow { color: #93a1a1; font-weight: bold; }
.highlight .w { color: #586e75; }
.highlight .mf { color: #2aa198; }
.highlight .mh { color: #2aa198; }
.highlight .mi { color: #2aa198; }
.highlight .mo { color: #2aa198; }
.highlight .sb { color: #d33682; }
.highlight .sc { color: #d33682; }
.highlight .sd { color: #d33682; }
.highlight .s2 { color: #d33682; }
.highlight .se { color: #d33682; }
.highlight .sh { color: #d33682; }
.highlight .si { color: #d33682; }
.highlight .sx { color: #d33682; }
.highlight .sr { color: #859900; }
.highlight .s1 { color: #d33682; }
.highlight .ss { color: #d33682; }
.highlight .bp { color: #586e75; }
.highlight .vc { color: #2aa198; }
.highlight .vg { color: #2aa198; }
.highlight .vi { color: #2aa198; }
.highlight .il { color: #2aa198; }

html, body, input, textarea, select, button { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; }

a { color: #4bbaff !important; }

a:hover { color: rgba(255, 255, 255, 0.87) !important; }

.site-title, .site-title:visited, .site-nav, .page-link { color: rgba(255, 255, 255, 0.87) !important; }

.site-nav { background-color: #121212; border-color: #333333; }

* { scrollbar-color: #121212 #333333; }

pre, code { border-color: #333333; background-color: #1e1e1e; color: white; }

.page-description { color: rgba(255, 255, 255, 0.69); }

.post-meta { color: rgba(255, 255, 255, 0.38); }

.post-content p, .post-content li { color: rgba(255, 255, 255, 0.69); }

.btn { background-color: #1e1e1e !important; color: rgba(255, 255, 255, 0.87) !important; border-color: #333333 !important; }

.btn:hover { background-color: #121212 !important; }

table th { background-color: #1e1e1e; border-color: #333333; color: rgba(255, 255, 255, 0.87); }

table td { background-color: #121212; border-color: #333333; color: rgba(255, 255, 255, 0.69); }

.flash { color: #121212 !important; filter: brightness(80%); }

canvas { filter: invert(100%); }

.post-list > li > div { box-shadow: none !important; background-color: #1e1e1e; border: none !important; }

li .post-meta-description { color: rgba(255, 255, 255, 0.69) !important; }

.search-result-preview { color: lightgray !important; }

.search-result-highlight { color: yellow !important; font-weight: bold !important; }

.search-results-list-item .search-result-title { color: cornflowerblue !important; }

.language-python + .language-plaintext { border-left: 1px solid grey; margin-left: 1rem !important; }

[class^="language-"]:not(.language-plaintext) pre, [class^="language-"]:not(.language-plaintext) code { background-color: #272726 !important; color: aliceblue; }

.language-python + .language-plaintext code { background-color: none !important; }

.language-python + .language-plaintext pre { background-color: #323443 !important; }

.input_area pre, .input_area div { margin-bottom: 1.0rem !important; margin-top: 1.5rem !important; padding-bottom: 1rem !important; padding-top: 1rem !important; background: #323443 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Menlo, Monaco, Consolas, "Lucida Console", Roboto, Ubuntu, monospace; border-radius: 5px; font-size: 105%; }

.output_area pre, .output_area div { margin-bottom: 1rem !important; margin-top: 1rem !important; padding-bottom: 1rem !important; padding-top: 1rem !important; }

.input_area pre { border-left: 1px solid lightcoral; }

.output_area pre { border-left: 1px solid grey; margin-left: 1rem !important; font-size: 16px; }

.code_cell table { width: auto; }

/* Dracula Theme v1.2.5  https://github.com/zenorocha/dracula-theme  Copyright 2016, All rights reserved  Code licensed under the MIT license  */
.highlight { background: #272726 !important; color: aliceblue !important; }
.highlight pre, .highlight code { background: #272726; color: aliceblue; font-size: 110%; }
.highlight .hll, .highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { color: #e7997a; }
.highlight .go { color: white; }
.highlight .err, .highlight .g, .highlight .l, .highlight .n, .highlight .x, .highlight .ge, .highlight .gr, .highlight .gh, .highlight .gi, .highlight .gp, .highlight .gs, .highlight .gu, .highlight .gt, .highlight .ld, .highlight .no, .highlight .nd, .highlight .pi, .highlight .ni, .highlight .ne, .highlight .nn, .highlight .nx, .highlight .py, .highlight .w, .highlight .bp { color: aliceblue; background-color: #272726 !important; }
.highlight .p { font-weight: bold; color: #66d9ef; }
.highlight .ge { text-decoration: underline; }
.highlight .bp { font-style: italic; }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf, .highlight .cs { color: #6272a4; }
.highlight .c1 { color: gray; }
.highlight .kd, .highlight .kt, .highlight .nb, .highlight .nl, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #8be9fd; }
.highlight .kd, .highlight .nb, .highlight .nl, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { font-style: italic; }
.highlight .fm, .highlight .na, .highlight .nc, .highlight .nf { color: #ace591; }
.highlight .k, .highlight .o, .highlight .cp, .highlight .kc, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .nt, .highlight .ow { color: #ff79c6; }
.highlight .kc { color: #ace591; }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il { color: #bd93f9; }
.highlight .gd { color: #ff5555; }

p code { font-size: 19px; }

:root { --default-canvas-filter: invert(0%); }

html, body, input, textarea, select, button { color: rgba(255, 255, 255, 0.87) !important; background-color: #121212 !important; }

a { color: #4bbaff !important; }

a:hover { color: rgba(255, 255, 255, 0.87) !important; }

.site-title, .site-title:visited, .site-nav, .page-link { color: rgba(255, 255, 255, 0.87) !important; }

.site-nav { background-color: #121212; border-color: #333333; }

* { scrollbar-color: #121212 #333333; }

pre, code { border-color: #333333; background-color: #1e1e1e; }

.page-description { color: rgba(255, 255, 255, 0.69); }

.post-meta { color: rgba(255, 255, 255, 0.38); }

.post-content p, .post-content li { color: rgba(255, 255, 255, 0.69); }

.btn { background-color: #1e1e1e !important; color: rgba(255, 255, 255, 0.87) !important; border-color: #333333 !important; }

.btn:hover { background-color: #121212 !important; }

table th { background-color: #1e1e1e; border-color: #333333; color: rgba(255, 255, 255, 0.87); }

table td { background-color: #121212; border-color: #333333; color: rgba(255, 255, 255, 0.69); }

.flash { color: #121212 !important; filter: brightness(80%); }

canvas { filter: var(--default-canvas-filter); }

.post-list > li > div { box-shadow: none !important; background-color: #1e1e1e; border: none !important; }

li .post-meta-description { color: rgba(255, 255, 255, 0.69) !important; }

.search-result-preview { color: lightgray !important; }

.search-result-highlight { color: yellow !important; font-weight: bold !important; }

.search-results-list-item .search-result-title { color: cornflowerblue !important; }

.profile-container { display: flex; justify-content: center; align-items: center; }
.profile-container .card { width: 100%; max-width: 800px; background-color: #2c3e50; border: 1px solid #34495e; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; color: #ffffff; /* Hide the default file input */ /* Style the custom file icon */ }
.profile-container .card label { display: block; font-weight: bold; margin-bottom: 5px; }
.profile-container .card input[type="text"], .profile-container .card input[type="file"], .profile-container .card select { width: calc(100% - 12px); padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
.profile-container .card .icon-container { display: flex; align-items: center; }
.profile-container .card .icon-container select { flex-grow: 1; margin-right: 15px; /* Space between dropdown and icon */ }
.profile-container .card #profilePicture { display: none; }
.profile-container .card .file-icon { font-size: 24px; color: white; /* Light grey color */ cursor: pointer; /* Indicate that it is clickable */ }
.profile-container .card .file-icon:hover { color: #ffffff; /* Change icon color on hover */ }
.profile-container .card table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.profile-container .card table th, .profile-container .card table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.profile-container .card .image-container { text-align: center; margin-top: 20px; }
.profile-container .card .image-container img { max-width: 100%; height: auto; border-radius: 50%; border: 2px solid #34495e; }

.signup-card button:disabled { background-color: #d3d3d3; /* Light gray background for disabled state */ cursor: not-allowed; /* Change cursor to indicate disabled state */ color: #a9a9a9; /* Change text color to match the disabled look */ border: 1px solid #ccc; /* Lighter border for disabled state */ transition: none; /* Remove transition effect when disabled */ }

/* define class for redefined button */
.calc-button, .calculator-number, .calculator-operation { width: auto; height: auto; border-radius: 10px; background-color: lightseagreen; border: 3px solid black; font-size: 1.5em; display: flex; justify-content: center; align-items: center; grid-column: span 1; grid-row: span 1; transition: all 0.5s; }
.calc-button:hover, .calculator-number:hover, .calculator-operation:hover { background-color: darkslateblue; }

/* class to create the calculator's container; uses CSS grid display to partition off buttons */
.calculator-container { width: 90vw; /* this width and height is specified for mobile devices by default */ height: 80vh; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); /* fr is a special unit; learn more here: https://css-tricks.com/introduction-fr-css-unit/ */ grid-template-rows: 0.5fr repeat(4, 1fr); gap: 10px 10px; }

@media (min-width: 600px) { .calculator-container { width: 40vw; height: 80vh; } }
/* styling for the calculator number button */
/* styling for the calculator operation button */
/* styling for the calculator clear button */
.calculator-clear { width: auto; height: auto; border-radius: 10px; background-color: orange; border: 3px solid black; font-size: 1.5em; display: flex; justify-content: center; align-items: center; grid-column: span 1; grid-row: span 1; transition: all 0.5s; }
.calculator-clear:hover { background-color: darkorange; }

/* styling for the calculator equals button */
.calculator-equals { width: auto; height: auto; border-radius: 10px; background-color: red; border: 3px solid black; font-size: 1.5em; display: flex; justify-content: center; align-items: center; grid-column: span 1; grid-row: span 1; transition: all 0.5s; }
.calculator-equals:hover { background-color: darkred; }

.dropbtn { padding: 16px; font-size: 16px; border: none; cursor: pointer; }

.dropdown { position: relative; display: inline-block; z-index: 1; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown .dropdown-content { display: none; position: fixed; background-color: black; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); }
.dropdown .dropdown-content a { padding: 12px 16px; text-decoration: none; display: block; }
.dropdown .dropdown-content a:hover { background-color: darkblue; }

#score { position: relative; z-index: 2; padding: 5px; color: darkred !important; }

#gameBegin, #gameOver, #settings, #leaderboard { position: relative; z-index: 2; }

#addRow, #backToGame { position: relative; z-index: 2; display: inline-block; margin-right: 2rem; }

.submenu { color: #FFFFFF !important; background-color: #000000 !important; border: 1px solid #6272a4; border: none; position: fixed; z-index: 3; top: 3.73rem; width: fit-content; }
.submenu .submenu-item { display: inline-block; margin-right: 2rem; }

.sidebar { color: #FFFFFF !important; background-color: #000000 !important; border: 1px solid #6272a4; border: none; position: fixed; z-index: 3; top: 0; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */ width: 0px; padding-left: 0px; padding-right: 0px; overflow-y: scroll; height: 75%; }

.leaderboardDropDown { color: #FFFFFF !important; background-color: #000000 !important; border: 1px solid #6272a4; border: none; position: fixed; z-index: 3; top: 0; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5-second transition effect to slide in the sidebar */ width: 0px; padding-left: 0px; padding-right: 0px; height: 75%; scroll-behavior: auto; }

#leaderboardTitle { text-align: center; color: #3d3af2; text-decoration: wavy; font-weight: 900; font-size: 70px; font-family: "Press Start 2P", system-ui; background-color: #b01a2e; }

.table.scores, th, tr, td { text-align: center; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; }

.table.scores th { background-color: #e0b2b2; }
.table.scores tr td { border: 1px solid #742929; }
.table.scores tr td:nth-child(odd) { background-color: #e85252; }
.table.scores tr td:nth-child(even) { background-color: #be6464; }

.table.levels tr { cursor: pointer; }
.table.levels tr td { border: 1px solid #6272a4; }
.table.levels tr:hover { background-color: #6272a4; }
.table.levels tr:hover td { background-color: inherit; }

.input.userID { color: #FFFFFF !important; background-color: #000000 !important; border: 1px solid #6272a4; height: 30px; border-radius: 5px; padding: 5px; width: 100px; }

.input.gameSpeed, .input.gravity { color: #FFFFFF !important; background-color: #000000 !important; border: 1px solid #6272a4; height: 30px; border-radius: 5px; padding: 5px; width: 40px; text-align: right; }

#toggleCanvasEffect, #background, #platform { animation: fadein 3s; }

#startGame, #marioSays { animation: flash 0.5s infinite; }

@keyframes flash { 50% { opacity: 0; } }
@keyframes fadeout { from { opacity: 1; }
  to { opacity: 0; } }
@keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }
.bottom-matter { position: relative; }

#cut-story { visibility: hidden; min-width: 250px; background-color: #ff5d0c; color: white; font-family: "Press Start 2P", system-ui; border-radius: 4px; position: fixed; text-align: center; justify-content: center; border: 4px solid; left: 50%; transform: translate(-50%, 0%); width: 50%; padding: 10px; bottom: 0px; }

/*creating class with javascript*/
#cut-story.show { visibility: visible; -webkit-animation: fadein 3s; animation: fadein 3s; }

#cut-story.hide { visibility: visible; -webkit-animation: fadeout 0.5s 3s; animation: fadeout 0.5s 3s; }

body { background: #FFB6C1; }

#container { width: 95%; height: 100vh; display: flex; text-align: center; }

.fun_facts { min-width: 250px; background-color: #0cebff; color: #096b4e; font-family: "Press Start 2P", system-ui; border-radius: 20px; position: absolute; text-align: center; border: 4px solid; left: 50%; transform: translate(-50%, -20%); width: 90%; padding: 10px; bottom: 0px; }

.fun_facts h3, .fun_facts p { font-size: 1rem; }

#toggle-response-btn { margin-top: auto; padding: 10px; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; background-color: green !important; }
#toggle-response-btn:hover { background-color: darkgreen !important; }

#msger-send-btn { margin-top: auto; padding: 10px; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; background-color: blue !important; }
#msger-send-btn:hover { background-color: darkblue !important; }

.msg-info, .msg-text { color: black; }

:root { --body-bg: linear-gradient(135deg, white 0%, gray 100%); --msger-bg: white; --border: 2px solid #ddd; --left-msg-bg: #ececec; --right-msg-bg: #579ffb; }

.msger { display: flex; flex-flow: column wrap; justify-content: space-between; width: fill; margin: auto auto; height: calc(867px); border: var(--border); border-radius: 5px; background: var(--msger-bg); box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2); }

.msger-header { display: flex; justify-content: space-between; padding: 10px; border-bottom: var(--border); background: #eee; color: gray; }

.msger-chat { flex: 1; overflow-y: auto; padding: 10px; }

.msger-chat::-webkit-scrollbar { width: 6px; }

.msger-chat::-webkit-scrollbar-track { background: #ddd; }

.msger-chat::-webkit-scrollbar-thumb { background: #bdbdbd; }

.msg { display: flex; align-items: flex-end; margin-bottom: auto; }

.msg:last-of-type { margin: auto; }

.msg-img { width: 64px; height: 64px; margin-right: 0.2rem; background: #ddd; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; }

.msg-bubble { max-width: 450px; padding: 15px; border-radius: 15px; background: var(--left-msg-bg); }

.msg-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: gap; }

.msg-info-name { margin-right: 2rem; font-weight: bold; }

.msg-info-time { font-size: 0.85em; }

.left-msg .msg-bubble { border-bottom-left-radius: 0; }

.right-msg { flex-direction: row-reverse; }

.right-msg .msg-bubble { background: var(--right-msg-bg); color: #fff; border-bottom-right-radius: 0; }

.right-msg .msg-img { margin: 0 0 0 1rem; }

.msger-inputarea { display: flex; padding: 10px; border-top: var(--border); background: #eee; }

.msger-inputarea * { padding: 10px; border: none; border-radius: 3px; font-size: 1em; }

.msger-input { flex: 1; background: #ddd; }

.msger-send-btn { margin-left: 0.2rem; background: #00c441; color: #fff; font-weight: bold; cursor: pointer; transition: background 0.23s; }

.msger-send-btn:hover { background: #066320; }

.msger-chat { background-color: #fcfcfe; background-image: url("https://w.wallhaven.cc/full/vm/wallhaven-vmydxl.jpg"); }

@keyframes rainbow { 0% { background-color: red; }
  14% { background-color: orange; }
  28% { background-color: yellow; }
  42% { background-color: green; }
  57% { background-color: blue; }
  71% { background-color: indigo; }
  85% { background-color: violet; }
  100% { background-color: red; } }
.rainbow { width: 100px; height: 100px; animation: rainbow 5s linear infinite; margin: auto; }

@keyframes spinMove { 0% { transform: rotate(0deg) translateX(0); }
  10% { transform: rotate(36deg) translateX(-200px); }
  20% { transform: rotate(72deg) translateX(200px); }
  30% { transform: rotate(108deg) translateX(400px); }
  40% { transform: rotate(144deg) translateX(200px); }
  50% { transform: rotate(180deg) translateX(0); }
  60% { transform: rotate(216deg) translateX(-200px); }
  70% { transform: rotate(252deg) translateX(200px); }
  80% { transform: rotate(288deg) translateX(400px); }
  90% { transform: rotate(324deg) translateX(200px); }
  100% { transform: rotate(360deg) translateX(0); } }
.spinMove { width: 100px; height: 100px; margin: auto; background-color: blue; animation: spinMove 10s linear infinite; }