@font-face {
  font-family: "SC";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(https://lovdin.com/fonts/saira-condensed-extralight.woff2) format("woff2"),
    url(https://lovdin.com/fonts/saira-condensed-extralight.woff) format("woff");
}

@font-face {
  font-family: "SC";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(https://lovdin.com/fonts/saira-condensed-semibold.woff2) format("woff2"),
    url(https://lovdin.com/fonts/saira-condensed-semibold.woff) format("woff");
}

@font-face {
  font-family: "SCP";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://lovdin.com/fonts/source-code-pro-regular.woff2) format("woff2"),
    url(https://lovdin.com/fonts/source-code-pro-regular.woff) format("woff");
}

html {
  height: 100%;
  line-height: 1.6;
  font-family: "SC", "Saira Condensed", "Open Sans", "PingFang SC", "Helvetica Neue",
    "Helvetica", "Microsoft YaHei", "Source Han Sans", "Noto Sans CJK SC",
    "Noto Sans SC", "Droid Sans", "WenQuanYi Micro Hei", "Arial", sans-serif;
  font-weight: 300;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #343A45;
  color: #F1F1F1;
}

code {
  font-family: "SCP", "Source Code Pro", "Consolas", "Ubuntu Mono", "Monaco", "Menlo",
    "Droid Sans Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
  font-size: 14px;
  font-weight: 400;
}

.root-container {
  min-height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.main-container {
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.header-container,
.footer-container {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  padding: 15px;
  z-index: 100;
}

.footer-container {
  -ms-flex-pack: center;
      justify-content: center;
}

.copyright {
  font-size: 12px;
  color: rgba(193, 197, 198, 0.3);
  text-align: center;
}

.copyright > .love {
  display: inline-block;
  font-size: 0;
  margin: 0 1px;
}

.copyright > .love::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iIzVCNjE2OSIgZD0iTTEyOCAyNTUuNDNjLTIuMzIxIDAtNC4yODYtMS45NDctNS44OTMtMy41NTVMMzguNTM2IDE3MS4yNWMtLjg5My0uNzE0LTIuMTIxLTEuODc1LTMuNjgzLTMuNDgtMS41NjMtMS42MDctNC4wNDEtNC41MzMtNy40MzMtOC43NzNhMTE4LjI5MyAxMTguMjkzIDAgMCAxLTkuMTA3LTEzLjA1N2MtMi42NzgtNC40NjUtNS4wNjctOS44NjctNy4xNjYtMTYuMjA3QzkuMDQ4IDEyMy4zOTQgOCAxMTcuMjMxIDggMTExLjI1YzAtMTkuNjQ0IDUuNjY5LTM1IDE3LjAwOS00Ni4wNzJDMzYuMzQ4IDU0LjEwNiA1Mi4wMTggNDguNTcgNzIuMDE3IDQ4LjU3YzUuNTM2IDAgMTEuMTg0Ljk2MSAxNi45NDIgMi44ODEgNS43NTkgMS45MiAxMS4xMTcgNC41MDkgMTYuMDcyIDcuNzY4IDQuOTU1IDMuMjU4IDkuMjE5IDYuMzE3IDEyLjc5MSA5LjE3NEExMjMuNDE3IDEyMy40MTcgMCAwIDEgMTI4IDc3LjVhMTIzLjI0MyAxMjMuMjQzIDAgMCAxIDEwLjE4LTkuMTA3YzMuNTcxLTIuODU2IDcuODM0LTUuOTE2IDEyLjc4OS05LjE3NCA0Ljk1NS0zLjI1OSAxMC4zMTItNS44NDggMTYuMDcxLTcuNzY5IDUuNzU5LTEuOTE5IDExLjQwNy0yLjg4IDE2Ljk0Mi0yLjg4IDIwIDAgMzUuNjcgNS41MzYgNDcuMDA5IDE2LjYwN1MyNDggOTEuNjA2IDI0OCAxMTEuMjVjMCAxOS43MzItMTAuMjI1IDM5LjgyLTMwLjY3IDYwLjI2OGwtODMuNDM4IDgwLjM1NmMtMS42MDcgMS42MDgtMy41NzIgMy41NTYtNS44OTIgMy41NTZ6Ii8+PC9zdmc+);
}

.copyright > a {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 420px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
}

@media not print {
  .only-print {
    display: none !important;
  }
}
.ux-container {
  display: block;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}

.ux-hint {
  margin: 0;
  padding: 8px;
  font-size: 14px;
  font-weight: 300;
}

#noscript-hint {
  background-color: #FFAB40;
  color: #343A45;
  border-bottom: 1px dashed #343A45;
}

#outdated-hint {
  background-color: #FFAB40;
  color: #343A45;
}

#browser-download {
  background-color: #F25648;
  color: #F1F1F1;
  border-bottom: 1px dashed #343A45;
  font-size: 14px;
  font-weight: 100;
}

#outdated-browser-chrome, #outdated-browser-firefox {
  display: inline-block;
  margin: 0 20px;
  padding: 8px;
}

.browsers-sprite {
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(../static/135ad3adb399963f.png);
}

.chrome-icon {
  width: 64px;
  height: 64px;
  background-position: -2px -2px;
}

.chrome-icon:active, .chrome-icon:focus, .chrome-icon:hover {
  background-position: -68px -2px;
}

.firefox-icon {
  width: 64px;
  height: 64px;
  background-position: -266px -2px;
}

.firefox-icon:active, .firefox-icon:focus, .firefox-icon:hover {
  background-position: -332px -2px;
}

.edge-icon {
  width: 64px;
  height: 64px;
  background-position: -134px -2px;
}

.edge-icon:active, .edge-icon:focus, .edge-icon:hover {
  background-position: -200px -2px;
}
#stars {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: url(../static/9c059a6163d6b7d6.png) repeat-x;
}

#stage .mountains {
  width: 100%;
  height: 32%;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
}

#stage .mountain {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

#mountain-far {
  height: 120%;
  z-index: 1;
  background: url(../static/033bd47b45b07d9f.png) repeat-x;
  background-size: auto 100%;
}

#mountain-medium {
  height: 100%;
  z-index: 2;
  background: url(../static/1431888f0f2b2d81.png) repeat-x;
  background-size: auto 100%;
}

#mountain-near {
  height: 92%;
  z-index: 3;
  background: url(../static/ef8f90ec981af802.png) repeat-x;
  background-size: auto 100%;
}

#space {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.header-container {
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.footer-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

#about-link {
  margin: 10px;
  color: #090B18;
  font-size: 17px;
  font-weight: 200;
  text-decoration: none;
  background-color: #BBBCC4;
  border: 3px #F1F1F1 solid;
  border-radius: 200px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4) inset;
}
#about-link:active, #about-link:focus, #about-link:hover {
  background-color: #C6C7D0;
}

#about-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 200px;
}

#about-text {
  display: none;
}

@media (max-width: 576px) {
  .header-container {
    padding: 0;
  }

  #about-link {
    margin: 72px 0 0 0;
    padding: 2px 6px 6px 4px;
    border-right: 0 none;
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.4) inset;
  }

  #about-icon {
    display: inline-block;
    vertical-align: -6px;
    width: 30px;
    height: 30px;
  }

  #about-text {
    display: inline-block;
    margin-left: -2px;
  }
}