/*
* site.scss
*
*/
/* _shared.scss */
/* _typography.scss */
/* _reset.scss */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

html {
  font-family: monospace;
  color: white;
}

body {
  background: #1A1515;
  font-size: 1.35em;
}
@media screen and (min-width: 480px) {
  body {
    font-size: 1.2em;
  }
}

.spacer {
  height: 75px;
}

/* _layout.scss */
header {
  background-color: #333333;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr;
}
header a {
  color: white;
  text-decoration: none;
}
header a:hover {
  color: white;
}
header h1 {
  margin: auto 10px;
  font-size: 1.5em;
}
header .header__div {
  height: 25px;
}

@media screen and (min-width: 768px) {
  header {
    grid-template-columns: 2fr 1fr;
  }
}
a {
  color: white;
  text-decoration: none;
}
a:hover {
  color: yellow;
}

nav {
  display: flex;
  margin: 5px 0;
}

ul {
  margin: 0;
  padding: 5px;
  overflow: hidden;
}

li {
  margin: 5px 15px 0 5px;
  float: left;
}

@media screen and (min-width: 768px) {
  nav {
    justify-content: flex-end;
  }

  li {
    margin-left: 20px;
  }
}
.center {
  margin: auto;
  width: 50%;
}

.clear_float {
  clear: both;
}

.avatar {
  height: 100px;
  width: 100px;
  text-align: center;
  vertical-align: center;
}

.img__flex {
  width: 0;
}

.avatar__img {
  height: 25px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.nav__div {
  width: 100%;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  background-color: #333333;
  height: 150px;
  text-align: center;
  padding: 10px;
}
footer h1 {
  margin-top: 5px;
}
footer h3 {
  font-size: 1rem;
  font-weight: unset;
  margin-bottom: 10px;
}
footer img {
  height: 125px;
  position: relative;
  left: -30px;
  bottom: -35px;
}
footer a {
  color: white;
  text-decoration: none;
}
footer .footer_social_card {
  display: grid;
  grid-column: 2;
  margin: auto;
}
footer .footer_social_card .fa-brands {
  font-size: 1.5rem;
  font-weight: unset;
}
footer .footer_support_card {
  margin: auto;
  padding-bottom: 15px;
}

#content__h1_title {
  text-align: center;
}
#content__h1_title h1 {
  padding: 10px;
}

#section__content {
  min-height: 300px;
}

#section__hero {
  background: rgba(0, 0, 0, 0.75);
  padding: 15px 5px;
}

#section__odd {
  background: #1a1515;
  padding: 15px 5px;
}

#section__even {
  background: rgba(0, 0, 0, 0.35);
  padding: 15px 5px;
}

.content {
  max-width: 1024px;
  margin: auto;
}
.content .card__div {
  margin: auto;
  width: 90%;
  padding: 25px 0;
  text-align: center;
}
.content .card__div p {
  text-align: left;
}
.content .card__div h2 {
  padding-bottom: 10px;
}
.content .card__div_support {
  max-width: 500px;
  padding: 35px 15px;
  margin-top: 15px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .content .card__div_support {
    text-align: unset;
    display: grid;
    justify-content: center;
  }
}
@media screen and (min-width: 768px) {
  .content .card__div_support {
    width: 375px;
    margin: 15px auto;
  }
}
.content .card__div_support h2 {
  padding: 10px;
}
.content .card__div_support p {
  text-align: left;
}
.content .card__div_support img {
  height: 125px;
  border-radius: 25%;
  filter: drop-shadow(2px 4px 6px black);
}
@media screen and (min-width: 768px) {
  .content .card__div_support img {
    height: 250px;
  }
}

.hero {
  background: rgba(0, 0, 0, 0.75);
  padding: 15px 5px;
}
.hero img {
  height: 125px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .hero img {
    height: unset;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    padding-bottom: unset;
  }
}
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
  padding-top: 5px;
}
.hero h1 {
  font-size: 1.5rem;
}
.hero h2 {
  font-size: 1.1rem;
}
.hero h3 {
  font-size: 0.95rem;
}
.hero h4 {
  font-size: 0.85rem;
}
.hero p {
  padding: 10px 15px 15px;
}
.hero .hero__container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .hero .hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    padding: 35px 15px;
  }
}
@media screen and (min-width: 840px) {
  .hero .hero__container {
    width: 800px;
  }
}
.hero .hero__container .hero__content {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .hero .hero__container .hero__content {
    width: 550px;
    margin: auto;
  }
}
.hero .app__hero_container {
  display: grid;
  grid-template-columns: 1fr;
  margin: auto;
}
.hero .app__hero_container img {
  height: 250px;
  border-radius: 15px;
}
@media screen and (min-width: 768px) {
  .hero .app__hero_container {
    width: 800px;
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
.hero .app__hero_content {
  width: 100%;
  text-align: center;
}
.hero .bio-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .hero .bio-container {
    grid-template-columns: 1fr 1fr;
    margin: auto;
    padding: 35px 15px;
  }
}
@media screen and (min-width: 840px) {
  .hero .bio-container {
    width: 800px;
  }
}
.hero .bio-container .bio {
  width: 100%;
  text-align: center;
}
.hero .bio-container .bio p {
  text-align: left;
}
@media screen and (min-width: 768px) {
  .hero .bio-container .bio {
    width: 550px;
    margin: auto;
  }
}

.subscribe {
  padding: 35px 15px;
  margin-top: 15px;
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .subscribe {
    text-align: unset;
    display: grid;
    grid-column: auto;
    justify-content: center;
  }
}
.subscribe h2 {
  padding-bottom: 10px;
}

.row {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .row {
    gap: 15px;
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  width: 100%;
}

label {
  display: block;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
}

input {
  margin: 5px 0 15px 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  input {
    width: 250px;
  }
}

textarea {
  margin: 5px 0 15px 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  textarea {
    width: 515px;
  }
}

select {
  margin: 5px 0 15px 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  select {
    width: 515px;
  }
}

.hidden {
  visibility: hidden;
  height: 0;
}

button {
  width: 100%;
  padding: 15px;
  font-size: 1.25rem;
  background: #0077c0;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  button {
    width: unset;
    padding: 10px 20px;
  }
}

/* Privacy Policy */
#policy__container {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 0.95em;
}
@media screen and (max-width: 768px) {
  #policy__container {
    padding-top: unset;
    padding-bottom: unset;
    padding: 15px;
  }
}
#policy__container h1, #policy__container h2, #policy__container h3, #policy__container h4, #policy__container h5, #policy__container h6 {
  padding-bottom: 5px;
}
#policy__container h2 {
  padding-top: 5px;
}
#policy__container p {
  padding-bottom: 5px;
}
#policy__container .inset {
  padding-left: 20px;
}
#policy__container ul {
  padding: unset;
  padding-bottom: 5px;
  padding-left: 15px;
}
#policy__container li {
  float: unset;
}

/* slide-menu.scss */
/* version: 0.1.0 */
/* Slide Menu */
.slide_menu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.2s ease;
  padding-top: 10px;
}

.slide_menu h2 {
  padding: 0 0 0 32px;
  font-size: 18px;
  font-weight: bold;
  color: #9c9c9c;
}

.slide_menu a, .dropdown_parent_container {
  text-decoration: none;
  font-size: 18px;
  color: #9c9c9c;
  display: block;
  border: none;
  background: none;
  transition: 0.3s;
}

.slide_menu a:hover, .dropdown_button:hover {
  color: #f1f1f1;
}

.slide_menu .close_button {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 36px;
  margin-left: 50px;
  transition: 0.2s ease;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: #8f9a8f;
  color: white;
  border: none;
}

.dropdown_parent {
  color: white;
}

/*
 * Dropdown container (hidden by default).
 * Optional: add a lighter background color
 * and some left padding to change the design
 * of the dropdown content
 */
.dropdown_child_container {
  display: none;
  color: white;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

@media screen and (max-width: 450px) {
  .slide_menu {
    padding-top: 15px;
  }

  .slide_menu a {
    font-size: 15px;
  }
}
.backdrop {
  display: none;
  position: fixed;
  transition: opacity 0.2s linear;
  top: 0;
  bottom: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 0, 0, 0.5);
}

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