body {
  background: #0F151E;
  min-width: 400px; }

.welcome {
  font-family: "Dancing Script", cursive; }
  @media screen and (max-width: 400px) {
    .welcome {
      font-size: 1.2rem; } }
  @media screen and (max-width: 800px) and (min-width: 400px) {
    .welcome {
      font-size: 1.4rem; } }
  @media screen and (max-width: 1100px) and (min-width: 800px) {
    .welcome {
      font-size: 1.75rem; } }
  @media screen and (min-width: 1100px) {
    .welcome {
      font-size: 2.25rem; } }

a {
  text-decoration: none;
  outline: 0; }

a:hover {
  text-decoration: none; }

h1, h2, p {
  color: #676D75; }

p > a {
  color: #05A0D3; }

p > a:hover {
  color: #05A0D3; }

main {
  width: 100%;
  margin: 0 auto; }

nav, .subheader {
  width: 80%;
  margin: 0 auto; }

.headerclasslanding {
  visibility: hidden; }

.navbar {
  padding: 0;
  margin: 0 auto;
  z-index: 999; }

.topnav {
  width: 100%;
  background-color: #0F151E;
  position: fixed;
  top: 0;
  z-index: 999; }

.navitem {
  font-size: 175%;
  transition: 500ms;
  color: #676D75;
  width: 100%;
  text-align: center;
  text-decoration-color: rgba(5, 160, 211, 0);
  z-index: 999; }

.navitem:hover {
  color: #05a0d3;
  transition: 500ms;
  text-decoration: overline underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(5, 160, 211, 0.5); }

.img-fluid {
  transition: 500ms; }
  @media screen and (max-width: 600px) {
    .img-fluid {
      max-width: 100%; } }
  @media screen and (min-width: 800px) {
    .img-fluid {
      max-width: 65%; } }
  @media screen and (min-width: 1100px) {
    .img-fluid {
      max-width: 40%; } }

.activefont {
  color: #025976; }

.headerclass {
  background-color: #0F151E;
  z-index: 4; }

.subheader {
  margin-top: 70px;
  margin-bottom: 15px; }
  @media screen and (max-width: 600px) {
    .subheader {
      margin-bottom: 100px; } }

@media screen and (max-width: 600px) {
  .makebig {
    width: 100%; } }

.mainpage {
  height: 100vh;
  background-size: cover;
  background-position-x: center;
  background-repeat: no-repeat;
  position: static; }

.container-fluid {
  padding: 0; }

.inlineimage {
  border-radius: 30px; }

.subheader p {
  font-size: 150%;
  text-align: justify; }

.card {
  border: solid 4px #025976;
  background-color: #0F151E;
  transition: 500ms; }

.card:hover {
  border: solid 4px #05a0d3;
  transition: 500ms; }

#fixfiller {
  width: 100%;
  height: 10px;
  border: 0;
  margin: 0;
  padding: 0;
  background-color: #0F151E;
  position: relative; }

.themecard-title {
  transition: 500ms;
  width: 100%;
  color: #025976;
  background-color: rgba(15, 20, 31, 0.8);
  margin: 0;
  padding: 10px; }

.themecard:hover .themecard-title {
  background-color: #0f141f;
  color: #05A0D3; }

@media screen and (max-width: 600px) {
  .filler {
    background-color: #0F151E;
    position: fixed;
    padding: 10px;
    top: 100vh;
    margin-top: -100px;
    width: 100%;
    height: 100px; } }

.cardimage {
  height: 250px;
  float: left; }
  @media screen and (max-width: 800px) {
    .cardimage {
      float: none;
      position: static;
      width: 60%;
      height: auto;
      margin: 0 20%; } }
  @media screen and (max-width: 600px) {
    .cardimage {
      float: none;
      width: 70%;
      padding-top: 5px;
      margin: 0 15%; } }
  @media screen and (max-width: 400px) {
    .cardimage {
      width: 80%;
      float: none;
      padding-top: 5px;
      margin: 0 10%; } }

@media screen and (max-width: 800px) {
  .cardtext {
    width: 100%; } }

.rounded {
  margin-right: 10px; }

.navelements {
  margin: 55px auto;
  background-color: #0F151E; }

.error-show {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  width: 40%;
  margin: 0 auto; }
  @media screen and (max-width: 600px) {
    .error-show {
      width: 100%; } }

.description {
  font-size: 16px; }
  @media screen and (max-width: 600px) {
    .description {
      font-size: 17px; } }
  @media screen and (max-width: 400px) {
    .description {
      font-size: 18px; } }

#setbackimage {
  overflow: hidden; }

@media screen and (min-width: 600px) {
  #share {
    transition: 500ms;
    width: 7%;
    position: fixed;
    float: left;
    top: 100px;
    opacity: 0.7; } }

@media screen and (max-width: 600px) {
  #share {
    position: fixed;
    padding: 10px;
    width: 100%;
    top: 100vh;
    margin-top: -55px;
    height: 100px;
    margin-left: 20%; } }

#share:hover {
  opacity: 1; }

#formspree_injection {
  width: 100%; }

#formspree_injection textarea {
  margin-left: 25%;
  width: 50%; }

#formspree_injection .topspree {
  padding: 0;
  width: 50%;
  margin: 0 auto; }

#formspree_injection input {
  width: 49.5%;
  align-content: space-between; }