/* For Sticky footer */
/* https://css-tricks.com/couple-takes-sticky-footer/ */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #222222;
  background: repeating-linear-gradient(
      45deg,
      #2b2b2b 0%,
      #2b2b2b 10%,
      #222222 0%,
      #222222 50%
    )
    0 / 15px 15px;
}

div.content {
  flex: 1 0 auto;
}

/* index title stylings */
p.welcome {
  font-family: "Yellowtail", cursive;
}
p.title {
  font-family: "Monoton", cursive;
}

/* nav stylings */
nav {
  font-weight: 600;
  line-height: 2.5rem;
  padding-top: 1.25rem;
  margin-bottom: 0rem;
  height: 75px;
  background-color: #ff1177;
}

/* nav bar adults only petfinder logo */
a.brand-logo {
  font-weight: 200;
  font-family: "Yellowtail", cursive;
}

/* underage nav */
div.underage {
  display: flex;
  justify-content: center;
}

/* search page nav */
div.search-nav {
  padding-left: 3rem;
}

body.underage,
body.search {
  font-family: "Quicksand", sans-serif;
}

p.title,
p.welcome {
  text-align: center;
  font-size: 7em;
  margin: 0;
}

p.welcome {
  font-size: 3rem;
  margin-top: 20px;
}

/* Neon Stylings / (https://codepen.io/FelixRilling/pen/qzfoc) */
a,
#name-text {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

p:nth-child(2) a,
p:nth-child(1) a,
#name-text {
  color: #fff;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
/* end neon styling*/

/* intro subtitle */
h5.subtitle {
  font-family: "Quicksand", sans-serif;
  color: whitesmoke;
  font-weight: 600;
  text-align: center;
}

/* intro card titles */
h5.title {
  padding-bottom: 2rem;
}

/* flexing */
div.container-age {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
}

/* intro card formatting */
div.cardcontent-age,
div.cardcontent-animal {
  font-family: "Quicksand", sans-serif;
  text-align: center;
  width: auto;
}

/* intro page/index.html animal card */
div.cardcontent-animal {
  order: 2;
}

/* intro page/index.html age card */
div.cardcontent-age {
  order: 1;
}

/* Under18.html styling*/
div.underage {
  text-align: center;
}

/* embedded video stylings /courtesy of/ https://embedresponsively.com/ */
div.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* under18.html link buttons */
.underage-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.btn-large {
  width: fit-content;
  height: auto !important;
  font-weight: 600;
  font-size: large;
  line-height: normal;
  padding: 1rem;
  margin-top: 2rem;
  background-color: #ff1177;
}

.btn {
  font-weight: 600;
  font-size: large;
  background-color: #ff1177;
}

/* index.html age and animal yes button style */
.age-yes,
.animal-yes {
  margin-right: 1.5rem;
}

/* yes or no buttons selected on index.html page */
button:focus { 
  background-color: #4DB6AC
}

/* card styling */
.card {
  border: 2px solid#ff1177;
  color: #ffffff;
  background-color: black;
}

/* to hide search container*/
#searchcontainer {
  color: #ffffff;
  display: block;
}

/* pet results card styling */
/* to hide result container */
#result {
  display: block;
}
/* name of pet */
#name-text {
  font-size: 30px;
  line-height: 40px;
  text-align: center;
}
/* pet image size */
#pet-image {
  max-width: 500px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* pet result title font displays */
.resultDisplay {
  line-height: 30px;
  font-weight: bold;
  font-size: 20px;
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* pet result response display */
#breed-text,
#house-trained-text,
#mood-text {
  line-height: 30px;
  font-size: 20px;
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* link to petfinder "Meet Me!" */
#petfinder-link {
  text-align: center;
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #ff1177;
  font-size: 30px;
} /* end pet results card styling */

footer.page-footer {
  flex-shrink: 0;
}

/* responsive stylings */
@media (max-width: 600px) {
  nav {
    height: 100px;
    text-align: center;
  }
  p.title {
    font-size: 2rem;
  }
  div.card-age,
  div.card-animal {
    margin-right: 0rem;
    width: auto;
  }
}

@media (max-width: 500px) {
  p.welcome {
    font-size: 2rem;
  }
  p.title {
    font-size: 3rem;
  }
  div.container-age {
    flex-wrap: wrap;
  }
}

/*glow for webkit*/
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
      0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
      0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
  }
}