html {
  font-family: "Butler Roman", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  html {
    color: #f1f1f1;
  }
}
html h1 {
  font-family: "Sofia Normal", sans-serif;
  font-size: 56px;
  line-height: 68px;
  text-align: center;
  margin: 0 0 40px 0;
  color: #a40606;
}
@media (prefers-color-scheme: dark) {
  html h1 {
    color: #a40606;
  }
}
html h2 {
  font-family: "Sofia Normal", sans-serif;
  font-size: 44px;
  line-height: 58px;
  color: #2c5f3e;
}
@media (prefers-color-scheme: dark) {
  html h2 {
    color: #f1a3b9;
  }
}
html h3, html h4, html h5, html h6 {
  font-family: "Sofia Normal", sans-serif;
  font-size: 32px;
  line-height: 46px;
  color: #dfb117;
}
@media (prefers-color-scheme: dark) {
  html h3, html h4, html h5, html h6 {
    color: #dfb117;
  }
}
html h2, html h3, html h4, html h5, html h6, html p, html ul, html ol, html div, html table, html span, html blockquote {
  margin: 0 0 20px 0;
}
html strong, html bold {
  font-family: "Butler Bold", sans-serif;
}
html a {
  color: #002c5d;
  text-decoration: underline;
  transition-duration: 0.2s;
}
@media (prefers-color-scheme: dark) {
  html a {
    color: #f1f1f1;
  }
}
html a:hover {
  color: #dfb117 !important;
}
@media (prefers-color-scheme: dark) {
  html a:hover {
    color: #dfb117 !important;
  }
}
html h1 a {
  color: #a40606;
}
@media (prefers-color-scheme: dark) {
  html h1 a {
    color: #a40606;
  }
}
html p:has(+ ul) {
  margin: 0 !important;
}
html ::selection {
  color: #002c5d;
  text-decoration: none;
  -webkit-text-fill-color: #f1f1f1;
  background-color: #6ea3d7;
}
@media (prefers-color-scheme: dark) {
  html ::selection {
    color: #002c5d;
    -webkit-text-fill-color: #f1f1f1;
    background-color: #6ea3d7;
  }
}
html #navigation {
  font-family: "Butler Bold", sans-serif;
}
html #navigation .selected {
  color: #dfb117 !important;
}
@media (prefers-color-scheme: dark) {
  html #navigation .selected {
    color: #dfb117 !important;
  }
}
html blockquote {
  text-align: center;
}
html blockquote p {
  margin: 0;
  font-family: "Sofia Normal", sans-serif;
  line-height: 50px;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
}
html button {
  font-family: "Sofia Normal", sans-serif;
  font-size: 34px;
  line-height: 48px;
}
html #footer #social-media-links {
  font-family: "Butler Bold", sans-serif;
}

#body #content {
  max-width: 1200px;
  margin: 0 auto;
}
#body #content picture,
#body #content img {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 20px auto;
}

@font-face {
  font-family: "Sofia Normal";
  src: url("../fonts/sofia/sofia.woff2") format("woff2"), url("../fonts/sofia/sofia.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Butler Roman";
  src: url("../fonts/butler/butler-roman.woff2") format("woff2"), url("../fonts/butler/butler-roman.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Butler Bold";
  src: url("../fonts/butler/butler-bold.woff2") format("woff2"), url("../fonts/butler/butler-bold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
}
html {
  background: #f1f1f1;
}
@media (prefers-color-scheme: dark) {
  html {
    background: #002c5d;
  }
}
html body {
  display: flex;
  flex-flow: column;
  min-height: 98vh;
  margin: 0;
  padding: 0;
}
html body #body {
  padding: 0 20px 20px 20px;
}
@media only screen and (min-width: 640px) {
  html body #body {
    padding: 0 40px 20px 40px;
  }
}
html body hr {
  border: none;
  height: 2px;
  background: #002c5d;
}
@media (prefers-color-scheme: dark) {
  html body hr {
    background: #f1f1f1;
  }
}
html body hr {
  margin: 0 0 40px 0;
}

button {
  padding: 10px 40px;
  display: block;
  margin: 0 auto 40px auto;
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.5s;
}

.ms-red {
  color: #a40606;
  background: #f1a3b9;
  border: solid 5px #a40606;
}

.ms-red:hover {
  color: #f1f1f1;
  background: #a40606;
}

.ms-green {
  color: #2c5f3e;
  background: #6ea3d7;
  border: solid 5px #2c5f3e;
}

.ms-green:hover {
  color: #f1f1f1;
  background: #2c5f3e;
}

.scroll-indicator {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  margin: 0;
}

.progress-container {
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
}

.progress-bar {
  height: 5px;
  width: 0%;
  padding: 0;
  margin: 0;
  background: #a40606;
}
@media (prefers-color-scheme: dark) {
  .progress-bar {
    background: #dfb117;
  }
}

#footer {
  text-align: center;
  margin-top: auto;
}
#footer p {
  margin: 0;
  padding: 0;
}
#footer #social-media-links {
  display: flex;
  line-height: 60px;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
#footer #social-media-links a {
  text-decoration: none;
}
#footer #social-media-links a .social-media-link {
  height: 60px;
  display: flex;
  flex-direction: row;
}
#footer #social-media-links a .social-media-link img {
  vertical-align: middle;
  width: 60px;
  height: 60px;
  display: table-cell;
  margin: 0 10px 0 0;
  mask-size: 60px;
  mask-repeat: no-repeat;
}
#footer #social-media-links a .social-media-link p {
  margin: 0 40px 0 0;
  display: table-cell;
}
#footer #social-media-links a #facebook img {
  mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
  background-color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  #footer #social-media-links a #facebook img {
    background-color: #f1a3b9;
  }
}
#footer #social-media-links a #facebook p {
  color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  #footer #social-media-links a #facebook p {
    color: #f1a3b9;
  }
}
#footer #social-media-links a #instagram img {
  mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
  background-color: #2c5f3e;
}
#footer #social-media-links a #instagram p {
  color: #2c5f3e;
}
#footer #social-media-links a #mastodon img {
  mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
  background-color: #dfb117;
}
#footer #social-media-links a #mastodon p {
  color: #dfb117;
}
#footer #social-media-links a #peertube img {
  mask: url(../images/links/peertube.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/peertube.svg) no-repeat 50% 50%;
  background-color: #2c5f3e;
}
#footer #social-media-links a #peertube p {
  color: #2c5f3e;
}
#footer #social-media-links a #telegram img {
  mask: url(../images/links/telegram.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/telegram.svg) no-repeat 50% 50%;
  background-color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  #footer #social-media-links a #telegram img {
    background-color: #f1a3b9;
  }
}
#footer #social-media-links a #telegram p {
  color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  #footer #social-media-links a #telegram p {
    color: #f1a3b9;
  }
}
#footer #social-media-links a #youtube img {
  mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
  background-color: #a40606;
}
#footer #social-media-links a #youtube p {
  color: #a40606;
}

#header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 20px 20px 20px 20px;
}
@media only screen and (min-width: 640px) {
  #header {
    padding: 20px 40px 20px 40px;
  }
}
#header ul {
  list-style: none;
  margin: 0;
  padding: 0 0 20px 0;
}

.arch-link:before {
  mask: url(../images/links/arch.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/arch.svg) no-repeat 50% 50%;
}

.azuracast-link:before {
  mask: url(../images/links/azuracast.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/azuracast.svg) no-repeat 50% 50%;
}

.back-arrow-link:before {
  mask: url(../images/links/back-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/back-arrow.svg) no-repeat 50% 50%;
}

.down-arrow-link:before {
  mask: url(../images/links/down-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/down-arrow.svg) no-repeat 50% 50%;
}

.facebook-link:before {
  mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
}

.forward-arrow-link:before {
  mask: url(../images/links/forward-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/forward-arrow.svg) no-repeat 50% 50%;
}

.google-maps-link:before {
  mask: url(../images/links/google-maps.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/google-maps.svg) no-repeat 50% 50%;
}

.grav-link:before {
  mask: url(../images/links/grav.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/grav.svg) no-repeat 50% 50%;
}

.inkscape-link:before {
  mask: url(../images/links/inkscape.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/inkscape.svg) no-repeat 50% 50%;
}

.instagram-link:before {
  mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
}

.line-link:before {
  mask: url(../images/links/line.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/line.svg) no-repeat 50% 50%;
}

.manjaro-link:before {
  mask: url(../images/links/manjaro.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/manjaro.svg) no-repeat 50% 50%;
}

.mastodon-link:before {
  mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
}

.odoo-link:before {
  mask: url(../images/links/odoo.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/odoo.svg) no-repeat 50% 50%;
}

.tiktok-link:before {
  mask: url(../images/links/tiktok.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/tiktok.svg) no-repeat 50% 50%;
}

.up-arrow-link:before {
  mask: url(../images/links/up-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/up-arrow.svg) no-repeat 50% 50%;
}

.whatsapp-link:before {
  mask: url(../images/links/whatsapp.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/whatsapp.svg) no-repeat 50% 50%;
}

.youtube-link:before {
  mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
}

.arch-link:before, .azuracast-link:before, .back-arrow-link:before, .down-arrow-link:before, .facebook-link:before, .forward-arrow-link:before, .google-maps-link:before, .grav-link:before, .inkscape-link:before, .instagram-link:before, .line-link:before, .manjaro-link:before, .mastodon-link:before, .odoo-link:before, .tiktok-link:before, .up-arrow-link:before, .whatsapp-link:before, .youtube-link:before {
  width: 15px;
  height: 15px;
  display: inline-block;
  content: "";
  mask-size: cover;
  margin-right: 5px;
  background-color: #002c5d;
}
@media (prefers-color-scheme: dark) {
  .arch-link:before, .azuracast-link:before, .back-arrow-link:before, .down-arrow-link:before, .facebook-link:before, .forward-arrow-link:before, .google-maps-link:before, .grav-link:before, .inkscape-link:before, .instagram-link:before, .line-link:before, .manjaro-link:before, .mastodon-link:before, .odoo-link:before, .tiktok-link:before, .up-arrow-link:before, .whatsapp-link:before, .youtube-link:before {
    background-color: #f1f1f1;
  }
}

#navigation ul li {
  padding: 0 20px 0 0;
}

/*# sourceMappingURL=app.css.map */