* {
  box-sizing: border-box;
}

.previousSearches{
  display: block;
  margin-bottom: 5px;
  background-color: #9ED5F0;
}

/* this class is used to display the moving .gif file as the background for the page */
body {
  background-image: url(../images/background-image-main.gif);
  background-size: cover;
  height: 100vh;
  padding:0;
  margin:0;
  z-index: -2;
}

select {
  margin-top: 6px;
}

.pager a  {
  font-size: 20px;
  color: white;
}

/* this class will be used later to display the still image that reflects the time ofthe searched city */
/* .still-background {
  background-size: cover;
  height: 100vh;
  padding:0;
  margin:0;
  z-index: -1;
} */

/* these classes and IDs are responsible for the header animation when the page loads */
.animation h1 {
  color: white;
  text-transform: uppercase;
  display: block;
}

#text1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 10px;
  color: #F1EB8A;
  border-left: 14px solid white;
  border-right: 14px solid white;
  border-radius: 20px;
  margin-bottom: 20px;
  background: white;
  position: relative;
  animation: text 3s 1;
}

#text2 {
  font-size: 35px;
  color: #9ED5F0;
}

@keyframes text {
  0%{
    color: white;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}
/* END section that is responsible for the header animation when the page loads */

#search-button {
  margin-left: 20px;
  border-radius: 4px;
}

#modal-content {
  color:lightslategrey;
  text-shadow: none;
}

/* these three classes are used for the fonts and font shadowing seen throughout the page */
h1 {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

h2 {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

h3 {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

h4 {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:#9ED5F0;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

h5 {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:#F1EB8A;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

p {
  font-family:Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  font-size: 18px;
  text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}
/* END font shadowing section*/

/* These classes are used to position and size the images of: rain clouds, smog, and overcast clouds */
#rain-cloud-left {
  position: absolute;
  opacity: 75%;
  left: 140px;
  top: 20px;
  z-index: -1;
  max-width: 60%;
  max-height: 60%;
}

#rain-cloud-right {
  position: absolute;
  opacity: 75%;
  right: 140px;
  top: 20px;
  z-index: -1;
  max-width: 60%;
  max-height: 60%;
}

#smog-left {
  position: absolute;
  opacity: 60%;
  left: 80px;
  top: 20px;
  z-index: -1;
  max-width: 50%;
  max-height: 50%;
}

#smog-right {
  position: absolute;
  opacity: 60%;
  right: 80px;
  top: 20px;
  z-index: -1;
  max-width: 50%;
  max-height: 50%;
}

#overcast-cloud-left {
  position: absolute;
  opacity: 60%;
  left: 80px;
  top: 0px;
  z-index: -1;
  max-width: 45%;
  max-height: 35%;
}

#overcast-cloud-right {
  position: absolute;
  opacity: 60%;
  right: 80px;
  top: 0px;
  z-index: -1;
  max-width: 45%;
  max-height: 35%;
}
/* END section for images of: rain clouds, smog, and overcast clouds */

/* This was just used to make the spacing of the zip code input look neater */
.zip-padding {
  padding-left: 25px;
  padding-right: 10px;
}

.zip-input {
  margin: auto;
  width:auto;
}
/* END zip code styling section */

/* this ID is responsible for spacing for the Weather or Not Div */
#spacing-from-top {
  padding-top: 25px;
}

/*   */

.list-group {
  border-radius: 20px;
  background-image: url(../images/galaxy-background.gif);
}

.venue {
  color: #F1EB8A;
}



#audio {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: 100%;

}

#lo-fi {
    bottom:0;
    position: absolute;
    text-align: center;
}

#recent-search {
  float: right;
  height: 100px;
  color:#F1EB8A;
}

.panel-footer {
  border-color: white;
}

.list-group-item {
  background-image: url(../images/galaxy-background.gif);
  z-index: 0;
}