.pink {
	color: pink;
}

.blue {
	color: lightblue;
}

.darkerblue {
	color: #00d8ff;
}

.darkblue {
	color: #007bff;
}

.baby-img {
	max-width: 250px;
}

.display-none {
	display: none;
} /* This class is used to toggle alerts and other areas of the DOM based on clicks and other app.js functions */

.share-button {
	margin-top: 25px;
}

.gap {
	height: 30px;
} /* Cheesy artificial way to create spacing. Maybe I'll go back and add the proper bootstrap classes later. */

.bg-pink {
	background-color: pink;
} /* bg-pink and bg-blue are toggled using data-bindings based on the genderVal property of each guess. */

.bg-blue {
	background-color: lightblue; 
}

.collapsed1 {
	height: 350px;
}

.guesses-ul-container {
	height: 100%;
  overflow: hidden;
}

.guesses-ul {
  max-height: 100%;
  overflow: auto;
}

.li-p {
	margin: 0;
	padding: 0;
} /* This class offsets bootstraps default treatment of <li>s, which left too much spacing. */

.fa {
	font-size: 30px !important;
	width: 30px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	border-radius: 10%;
	margin: 0 10px;
}

.fa:hover {
	opacity: 0.8;
	text-decoration: none;
}

.fa-twitter {
	color: #00aced;
}

.fa-github {
	color: black;
}

.fa-linkedin {
	color: #007bb6;
}

.fa-facebook {
	color: #3b5998;
}

.fa-instagram {
	color: #bc2a8d;
}

#insignia {
	max-width: 100px;
}

@media screen and (min-width: 768px) {
	.gap-noshow {
		display: none;
	}
} /* I'm sure this wouldn't have been necessary if I had used bootstrap classes... */

:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.bs-example{
    margin: 20px;        
}

body {
  padding-top: 20px!important;
  overflow-x: hidden!important;
}

html {
  scroll-behavior: smooth;
}

.custom-input {
  padding-top: 6px;
}

@media only screen and (max-width : 576px)
{
  .master > .row {
    overflow-x: auto;
  }
}