/* poppins-200 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url("/lp/fonts/poppins-v9-latin-200.eot");
  /* IE9 Compat Modes */
  src: local("Poppins ExtraLight"), local("Poppins-ExtraLight"), url("/lp/fonts/poppins-v9-latin-200.eot?#iefix") format("embedded-opentype"), url("/lp/fonts/poppins-v9-latin-200.woff2") format("woff2"), url("/lp/fonts/poppins-v9-latin-200.woff") format("woff"), url("/lp/fonts/poppins-v9-latin-200.ttf") format("truetype"), url("/lp/fonts/poppins-v9-latin-200.svg#Poppins") format("svg");
  /* Legacy iOS */
}

/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url("/lp/fonts/poppins-v9-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("/lp/fonts/poppins-v9-latin-600.eot?#iefix") format("embedded-opentype"), url("/lp/fonts/poppins-v9-latin-600.woff2") format("woff2"), url("/lp/fonts/poppins-v9-latin-600.woff") format("woff"), url("/lp/fonts/poppins-v9-latin-600.ttf") format("truetype"), url("/lp/fonts/poppins-v9-latin-600.svg#Poppins") format("svg");
  /* Legacy iOS */
}

/* dark mode */
:root {
  --main-bg-color: #212121;
  --main-text-color: #ffffff;
  --main-sub-color: #929292;
  --main-link-active-color: #ef5552;
  --main-shadow-color: rgba(0, 0, 0, 0.36);
}

/* light mode */
@media (prefers-color-scheme: light) {
    :root {
        --main-bg-color: #e6e6e6;
        --main-text-color: #464646;
        --main-sub-color: #929292;
        --main-link-active-color: #ef5552;
        --main-shadow-color: rgb(0 0 0 / 17%);
    }
}

/*Note: Selection option does not seem to work in dark mode */
::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--main-link-active-color);
}
::selection {
  color: white;
  background: var(--main-link-active-color);
}

body {
  background: var(--main-bg-color);
  width: 100%;
  margin: 0;
  vertical-align: middle;
  font-size: 14pt;
  text-align: center;
  text-shadow: 0px 3px 7px var(--main-shadow-color);
  color: var(--main-text-color);
  font-family: Poppins, Arial, sans-serif;
}

#main-wrapper {
  width: 100%;
  margin: auto;
  text-align: center;
  position: absolute;
  left: 0;
  top: 20%;
}

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

#announce-text {
  font-size: 37pt;
  font-weight: 600;
  margin: 6rem 0;
}

#announce-text a:hover {
  color: var(--main-link-active-color);
}

#announce-text .minor-text {
  color: var(--main-sub-color);
  font-size: 80%;
  font-weight: 200;
  margin: 0 1.5rem;
}

#announce-text .inverted-link {
  color: var(--main-link-active-color);
  text-decoration: none;
}

#announce-text .inverted-link:hover {
  text-decoration: underline;
}

#link-toggle:hover {
  color: #ffab00;
}

#link-gitlab:hover {
  color: #fc6d26;
}

#link-twitter:hover {
  color: #1da1f2;
}

#link-separator {
    margin: 0 1rem;
    color: var(--main-sub-color);
    opacity: 35%;
}

.social-links {
  display: inline-flex;
}

.social-links ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-links ul li {
  margin: 0 0.5rem;
}

.social-links a {
  color: var(--main-sub-color);
}

.social-links a:hover {
  color: var(--main-text-color);
  transition: color 200ms;
}

@media only screen and (max-width: 600px) {
  #announce-text {
    font-size: 27pt;
  }
}

@media only screen and (max-width: 430px) {
  #announce-text {
    font-size: 20pt;
  }
}

@media only screen and (max-width: 300px) {
  #announce-text {
    font-size: 17pt;
  }
}
/*# sourceMappingURL=style.css.map */