@font-face {
  font-family: 'Montserrat';
  src: url('/font/Montserrat-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/font/Montserrat-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/font/Montserrat-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/font/Montserrat-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Masinci';
  src: url('/font/masinci.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --serif-font-stack: DejaVu Serif, Georgia, serif;
  --sans-font-stack: Montserrat, Helvetica, Arial, sans-serif;
  --mono-font-stack: Consolas, Monaco, monospace;
  --color-blue-1: #050f14;
  --color-blue-2: #0a1f29;
  --color-blue-3: #0f2e3d;
  --color-blue-4: #025a83;
  --color-blue-5: #2c86b1;
  --color-blue-6: #8bc6e2;
  --color-blue-7: #c5e2f1;
  --color-bg: #FFF;
  --color-text: #000;
  --color-code-bg: #EEE;
}

body {
  background-color: var(--color-bg);
  margin: 0px;
  font-family: var(--sans-font-stack);
  color: var(--color-text);
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em 2em 2em 2em;
  background-color: var(--color-bg);
}

p {line-height: 1.4em}

h1 {margin-top: 0;}

a {
  color: var(--color-blue-4);
  text-decoration: none;
}

a:hover {  
  color: var(--color-blue-5);
  text-decoration: underline;
}

sup {
  font-size: 0.83em;
  vertical-align: super;
  line-height: 0;
}

hr {
  border-style: solid;
  color: var(--color-text);
  border-width: 0 0 1px 0;
}

table {
  margin: 2em auto 2em auto;
  border-collapse: collapse;
  border: 1px solid var(--color-text);
}

th {
  font-weight: bold;
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-text);
  padding: 0.5em 1em;
}

td {
  border: 1px solid var(--color-text);
  padding: 0.4em 1em;
  overflow: auto;
}

li {
  margin-bottom: 0.2em; 
  margin-top: 0.2em;
}

dt {
  font-weight: bold;
  font-family: var(--sans-font-stack);
}

dd {
  margin-left: 1em;
}

dd + dt {
  margin-top: 1em;
}

.sans-serif {font-family: var(--sans-font-stack);}
.serif {font-family: var(--serif-font-stack);}

q {quotes: '„' '“';}

pre {
  background-color: var(--color-code-bg);
  color: var(--color-text);
  font-size: 0.9em;
  font-family: var(--mono-font-stack);
  overflow-x: auto;
  padding: 1em;
}

code, kbd {
  background-color: var(--color-code-bg);
  color: var(--color-text);
  font-size: 0.9em;
  font-family: var(--mono-font-stack);
}

header {
  font-family: var(--sans-font-stack);
  background-color: var(--color-blue-3);
  color: #FFF;
  padding: 0 calc((100% - 800px)/2 - 0.5em);
  padding-top: 2em;
}

header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: row;
}

header a {
  display: block;
  padding: 0.5em;
  margin: 0;
  color: #FFF;
}

header a:hover {
  color: #FFF;
  text-decoration: none;
  background-color: var(--color-blue-2);
}

footer {
  font-family: var(--sans-font-stack);
  text-align: center;
  font-size: 0.9em;
  margin: auto 0;
  padding: 2em 0;
}

figure {
  margin: 2em 0 2em 0;
}

figure img {
  display: block;
  max-width: 100%;
  margin: auto;
}

figcaption {
  display: block;
  max-width: 600px;
  text-align: center;
  font-style: italic;
  font-size: 0.9em;
  margin: 0.5em auto 1em auto;
}

figure>table {
  margin-bottom: 0;
}

var {
  font-style: italic;
}

main *:focus {
  outline: 1px dotted #777;
  background-color: #EEE;
}

*::selection {
  background-color: #FF9800;
  color: #FFF;
}

*:target {
  background-color: #FFF;
  animation: target_animation 1s linear;
  animation-timing-function: ease-in;
}

.note {
  margin: 1em auto 1em auto;
  padding: 0.5em;
  background-color: rgb(252, 224, 173);
  border: 1px solid #fcb05a;
}

.warring {
  margin: 1em auto 1em auto;
  padding: 0.5em;
  background-color: rgb(255, 193, 193);
  border: 1px solid #fc5a5a;
}

#mathml_note {
  display: none;
  max-width: 800px;
}

.ws {
  background-color: #F5F5F5;
  margin: 1.5em 0;
  padding: 0 0.5em 0.5em 0.5em;
  border-radius: 3px;
}

.ws h2 {
  background-color: #E9E9E9;
  padding: 0.3em 0.3em;
  position: relative;
  top: -0.2em;
  border-radius: 3px;
  margin: 0;
}

.button {
  display: block;
  background-color: var(--color-blue-3);
  padding: 1em 0.5em;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  color: #FFF;
  width: max-content;
}

.button:hover{
  background-color: var(--color-blue-4);
  text-decoration: none;
  color: #FFF;
}

.masinci {
  font-family: 'Masinci', Montserrat, Helvetica, Arial, sans-serif;
}

@keyframes target_animation {
  from {background-color: #FF9800;}
  to {background-color: #FFF;}
}

@media screen and (max-width: 900px) and (min-width: 701px) {
  main {
    padding: 1em;
  }

  header{
    padding-top: 1em;
  }
}

@media screen and (max-width: 700px) {
  main {
    padding: 1em 0.5em;
    width: calc(100vw - 1em);
    overflow-y: scroll;
  }

  header{
    padding-top: 0em;
  }

  p {
    text-align: left;
  }

  blockquote {
    margin-left: 0;
  }

  ul, ol {
    list-style-position: inside;
    padding-left:0;
  }

  li ul, li ol {
    padding-left: 1em;
  }

  dd {
    margin-left: 0em;
  }
}

@media print {
  main {
    padding: 0;
    width: auto;
    font-family: "Times New Roman", Times, serif;
  }

  header {display: none;}

  h2, h3, h4 {break-after: avoid;}
  table, li, img, blockquote, figure, pre {break-inside: avoid;}
  footer, figcaption {break-before: avoid;}

  a {text-decoration: underline;}

  pre {
    border: 1px solid #000;
    color: #333;
  }
}