:root{ --bg-header-before: rgba(36, 30, 32, .1); --bg-header-after: url("/images/banner.jpg"); --bg-body-color: #f0f0f0; --bg-section-color: #ffffff; --bg-nav-buttons: rgba(0, 0, 0, .2); --text-color: #515151; --link-color: #4d4d4d; --text-nav-color: #4d4d4d; --border-header: 3px solid var(--text-color); --header-padding-mobile: 10%; }
:root[data-theme="dark"]  { --bg-header-before: unset; --bg-header-after: unset; --bg-body-color: #00152b; --bg-section-color: #ffffff; --bg-nav-buttons: rgba(255, 255, 255, .2); --text-color: #515151; --link-color: #4d4d4d; --text-nav-color: #ffffff; --header-padding-mobile: 30px; --border-header: none;}

body { background: var(--bg-body-color); color: var(--text-color); font-family: 'MS-Regular'; padding: 0; margin: 0; overflow-y: scroll; overflow-x: hidden; -webkit-transition: all .3s; transition: all .3s; }
body[data-theme-blue] { background: var(--bg-blue); }
body header { color: #fff; box-sizing: border-box; margin: 0; padding: 5vh 0; position: relative; }
body header:before { background: var(--bg-header-before); }
body header:after { background: var(--bg-header-after); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; border-bottom: var(--border-header); filter: blur(0); z-index: -1; }
body header:after, body header:before { content: " "; position: absolute; bottom: -100px; top: 0px; left: 0; right: 0; width: 100%; }
body header div > h1 { text-align: center; font-family: 'MS-Black'; }
body header > div { position: absolute; top: 15px; right: 15px; color: var(--text-nav-color); padding: 5px; border-radius: 6px; }
body header > div input { float: right; margin-left: 5px; height: 16px; width: 16px; }
body section { background: var(--bg-section-color); text-align: justify; width: 85%; max-width: 800px; border-radius: 6px; margin: 0 auto 20px; font-size: 12pt; overflow: hidden; z-index: 2; position: relative; padding: 30px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); }
body section div { padding: 5px 10px; }
body section div h1 { font-family: 'MS-Black'; margin: 0 0 30px 0; }
body section div h1:before { content: " "; position: absolute; border-top: 3px solid var(--text-color); border-left: 3px solid var(--text-color); width: 15px; height: 25px; left: 20px; top: 20px; }
body section div p { font-family: 'MS-Medium'; line-height: 1.3; margin: 10px 0; }
body section div small { font-family: 'MS-Regular'; }
body section .last-edited { position: relative; float: right;}
body section .last-edited:after { content: " "; float: right; padding: 0px 8px; margin-top: -2px; border-right: 2px solid var(--text-color); height: 24px;}
body .underlined { border-bottom: 1px dotted var(--text-color); cursor: pointer; }
body a { color: var(--link-color); text-decoration: none; font-weight: bold;}
body footer { margin: auto; text-align: center; width: 85%; max-width: 800px; padding-bottom: 30px; }
body footer nav { display: flex; }
body footer nav a { color: var(--text-nav-color); flex: 1; }
body footer nav a:hover { background: var(--bg-nav-buttons); padding: 5px; border-radius: 5px; font-weight: bold; animation: shake .6s infinite; }
body footer .logo { padding-top: 20px; position: absolute; bottom: 15px; left: 15px; height: 5vh; filter: saturate(0.3); }
body footer .logo:hover { animation: shake .6s infinite; filter: saturate(1); }

@media screen and (max-width: 500px) { body header { padding: var(--header-padding-mobile) 0; }
  body section { width: 75%; }
  body h1 { font-size: 1.4em; padding: 0 !important; }
  body .logo, body .soc-text { display: none; } }

::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #e1e1e1; border: 0px none #ffffff; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: #ffffff; }
::-webkit-scrollbar-thumb:active { background: #000000; }
::-webkit-scrollbar-track { background: #666666; border: 0px none #ffffff; border-radius: 50px; }
::-webkit-scrollbar-track:hover { background: #666666; }
::-webkit-scrollbar-track:active { background: #333333; }
::-webkit-scrollbar-corner { background: transparent; }

@keyframes shake { 0% { transform: translate(2px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); } }