/*------------------------------------------------------------------


[Namespaces]

l-          Layout
o-			Object
c-			Component
u-			Utility
is-, has-	State or Condition
js-			JavaScript Hook
_			Hack


[Table of contents]

1.  Elements
2.  Animations
3.  Layouts -- Structural namespace.  Things like flex
4.  Objects -- 'Atomic' objects.  Context-independent.  Cannot be structural.
5.  Components -- Larger building blocks.  Context-aware.  (analogy: A mesh, not polygon)
6.  Utilities
7.  Hacks
-------------------------------------------------------------------*/
html {
  display: block;
  background-color: #030316;
  color: #c2d9ff; }

/* Objects */
*, *:before, *:after {
  box-sizing: inherit; }

body {
  margin: 0;
  background: #030316;
  font-weight: 300;
  font-family: IBM Plex Sans, Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  height: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300; }

h1 {
  font-size: 3em;
  font-family: "Roboto Mono", Verdana; }

h2 {
  font-size: 2.25em;
  font-family: "Roboto Mono", Verdana;
  font-weight: 500; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.25em;
  font-weight: 600; }

img, video {
  display: block;
  width: 100%;
  height: auto;
  border: 0; }

p {
  margin: 1em 0; }

ul {
  list-style: circle; }

.a {
  color: #DC3558;
  text-decoration: none; }

.a:hover, .a:focus {
  color: #e79cb5; }

button {
  cursor: pointer; }

iframe {
  border: 0; }

::selection {
  background: #AAA;
  color: #fff; }

.material-icons {
  vertical-align: middle; }

/* Components */
.c-navbar {
  font-size: 1.15em;
  box-shadow: 0em 0.5em 1em #101010a1;
  background: #061556; }

.c-navbar__item {
  position: relative;
  flex-basis: auto;
  padding: .5em;
  margin: .5em; }

.c-section {
  background: #030316; }

.c-section_alt {
  background: #061556; }

.c-home-icon {
  height: auto;
  max-height: 2em;
  max-width: 2em;
  border-radius: 1em; }

.c-content {
  padding-bottom: 3rem; }

.c-content-bubble {
  padding: 1em;
  margin: 1em 0.5em;
  border-radius: 2em;
  border-width: 1px;
  border-color: #4a7efb;
  background: #030316; }

.c-hover-highlight:hover {
  background: #071969; }

.border-bubble {
  border-radius: 2em;
  border-width: 1px;
  border-color: #354468; }

.u-hidden {
  visibility: hidden; }

.u-transluscent {
  opacity: 80%; }

.h-half-screen {
  height: 50vh; }

.clickable {
  cursor: pointer; }

.soft-corner {
  border-radius: 1em; }

.bg-material {
  background: #061556; }

.bg-surface {
  background: #030316; }

.bg-grad-highlight {
  background: linear-gradient(45deg, #061556, #2745dd); }

.bg-grad-logo {
  background: linear-gradient(20deg, #061556, #DC3558); }

.bg-card-grad {
  background: linear-gradient(90deg, #061556, #040925); }

.font-secondary {
  color: #7c8ce9; }

.border-color {
  border-color: #383d56; }

.filter-svg-color {
  filter: invert(0.5) grayscale(100%) sepia(100%) hue-rotate(190deg) brightness(1.1) saturate(1.25); }

@media only screen and (max-width: 440px) {
  .c-main__name--sm {
    display: none; }

  .c-main__name--xs {
    display: block; } }
@media only screen and (min-width: 441px) {
  .c-main__name--sm {
    display: block; }

  .c-main__name--xs {
    display: none; } }

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