@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Balsamiq+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Balsamiq+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Balsamiq+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Balsamiq+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Balsamiq+Sans&display=swap");
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  padding: 15px;
  text-align: center;
  background-color: #0E273C;
  color: #E8d7F1;
  font-family: "Balsamiq Sans", cursive;
}

body > h1 {
  margin-top: 80px;
}

/* Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

 Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/
.form .search-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.form .input {
  padding: 10px;
  width: 350px;
}
@media only screen and (min-width: 450px) {
  .form input {
    width: 300px;
  }
}
.form form {
  padding: 20px;
}
.form label {
  font-family: "Bad Script", cursive;
  font-size: 24px;
}
.form .button {
  margin: 20px;
  height: 25px;
}
.form button {
  padding: 5px;
  font-family: "Balsamiq Sans", cursive;
}
.form button:hover {
  background-color: #A167a5;
  color: #E8d7F1;
}

.giphyBox {
  display: flex;
  align-items: center;
  background-color: #D3BCCC;
  margin: 5px;
  padding: 10px;
}

.giphyBox > img {
  border-radius: 20%;
}

.js-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.text_color {
  color: #E8d7F1;
}

.navbar-custom {
  color: #E8d7F1;
}

.bg-color {
  background-color: #A167a5;
}
.bg-color .navbar-brand {
  color: #4A306D;
  margin: 6px;
}
.bg-color .footer_link {
  margin: 2px;
}

.footer {
  margin-top: 40px;
}

nav .navbar-brand:hover {
  background-color: #0E273C;
  border: 2px white solid;
  color: #E8d7F1;
  padding: 4px;
  margin: 0px;
}
nav div > .footer_link:hover {
  background-color: #0E273C;
  color: #E8d7F1;
  padding: 2px;
  margin: 0px;
}
nav a {
  color: #4A306D;
}

.bigger {
  height: 75px;
}

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