* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  background-color: darkgray;
  font-family: 'Permanent Marker', cursive;

  /*To help with footer*/
  display: flex;
  flex-direction: column;

  overflow-x: hidden;
}

/*To help with footer*/
.content {
  flex: 1 0 auto;
}

.logo {
  color: #ffffe0;
  filter: drop-shadow(0 0 0.75rem black);
}

.navbar-brand {
  font-size: 5rem;
  filter: drop-shadow(0 0 0.75rem black);
}


.footer {
  bottom: 0;
  width: 100%;
  position: relative;
  background: transparent;

  /*To help with footer*/
  margin-top: 100px;
  flex-shrink: 0;
  border-top: 1px solid #4dd0e1;
  /* overflow: hidden; */
}
.copyright {
  color: #ffffe0;
}
/* homepage nav bar */
.navbar {
  background: url('../images/sharing.jpg') no-repeat center fixed;
  padding: 340px 140px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid #4dd0e1;
  width: 100%;
}
.nav {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 0.75rem black);
  padding-bottom: 10px;
}

.navbar a:hover {
  color: #bedcaa;
}

.nav > li > a:hover {
  background: transparent;
}

a {
  color: #ffffe0;
  text-decoration: none;
  filter: drop-shadow(0 0 0.75rem black);
}
.blerb {
  margin-left: 20px;
}

/* recipe nav bar */
.recipes {
  background: url('../images/cookbooks.jpg') no-repeat center fixed;
  padding: 340px 140px 0;
}
.submissionForm {
  margin-top: 40px;
  margin-bottom: 40px;
}

.carousel {
  border: 1px solid #4dd0e1;
}

.active-cyan-4 input {
  border: 1px solid #4dd0e1;
  box-shadow: 0 0 0 1px #4dd0e1;
  margin-bottom: 10px;
}

.newRecipe {
  margin-bottom: 40px;
}

.border {
  border-color: #4dd0e1 !important;
}

.submitResponse#submitSuccess {
  font-size: 26px;
}

/* media queries */
@media only screen and (max-width: 425px) {
  .navbar {
    padding: 0;
    font-size: 0.5rem;
  }
  .navbar-brand {
    font-size: 2.15rem;
  }
  .link {
    text-align: center !important;
  }
  .footer {
    overflow-x: hidden !important;
  }
}

@media only screen and (max-width: 768px) {
  .logo {
    font-size: 2rem;
  }
  .links {
    font-size: 1.5rem;
  }
  .navbar {
    text-align: center !important;
  }
  .link {
    margin-bottom: 10px;
  }
}