/* The Simple Design System is made with ❤️ by Glenn Sorrentino - https://glennsorrentino.com */
/* Please consider contributing! */

/* Add your custom styles in this file... */

@media (prefers-color-scheme: light) {
  header, .intro, nav ul {
    background-color: #7D4698 !important;
  }

  h2 {
    color: #92E7FF !important;
  }

  .primaryBtn {
    background-color: #92E7FF !important;
    color: #59316B !important;
  }

  .btn {
    border: 2px solid #92E7FF;
    color: #92E7FF;
    background: none;
  }

  iframe {
    background-color: white;
  }

}

@media (prefers-color-scheme: dark) {
  header, .intro, nav ul {
    background-color: #321C3D !important;
  }

  h2 {
    color: #92E7FF !important;
  }

  .btn {
    background-color: #8C5EA1;
    color: #FFFFFF !important;
  }

  .primaryBtn {
    background-color: #92E7FF;
    color: #59316B !important;
  }

  iframe {
    background-color: #59316B !important;
  }
}

body {
}

p, a, h1 {
  color: white !important;
}

h2 {
  font-family: "Serif";
  font-weight: inherit;
  font-size: calc(var(--font-size-1) * 1.0125);
  margin-bottom: var(--spacing-small);
}

.intro {
  margin-bottom: 0;
}

.intro .description {
  width: 66%;
}

.intro .group {
  align-items: center;
}

iframe {
  border-radius: .5rem;
  box-shadow: 0 1rem 3rem -.5rem rgba(0,0,0,0.25);
  margin: 0 auto 0 0;
}

@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 960px) {
  h2 {
    font-size: calc(var(--font-size-1) * .7);
  }
}

@media only screen and (max-width: 768px) {
  p, p.meta {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .intro .group {
    align-items: flex-start;
    margin-bottom: 0;
    margin-top: 0;
  }

  .intro p {
    margin-left: 0 !important;
  }

  h2 {
    font-size: calc(var(--font-size-1) * .8);
  }

  .intro .description {
    width: 100%;
  }

  iframe {
    margin: var(--spacing-large) auto 0 0;
  }

  nav ul {
    display: initial !important;
    top: 0;
    right: 0;
    position: relative;
    padding: 0;
    box-shadow: none;
  }

  nav .btn {
    margin: 0;
  }
}

@media only screen and (max-width: 640px) {
  h2 {
    font-size: calc(var(--font-size-1) * .7);
  }
}

@media only screen and (max-width: 420px) {
  .intro .group {
    margin-top: var(--spacing-xxlarge);
  }

  .intro {
    padding-bottom: var(--spacing-xxlarge);
  }

}

@media only screen and (max-width: 390px) {
  .intro .group {
    margin-top: calc(var(--spacing-xxlarge) * 3);
  }

  .intro {
    padding-bottom: calc(var(--spacing-xxlarge) * 1.5);
  }

}