body, html {
    height: 100%;
}
/* div {
    border-style: groove;
} */


form {
    text-align: center;
}

nav {
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
  }

  li {
      color: rgb(1, 164, 176);
      font-size: 20px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .card {
      width: 30%;
      height: 600px;
      float: left;
      /* display: inline-block; */

        margin: 15px;
        padding: 15px;
      
  }



.headerTitle {
    padding-top: 175px;
}

.button-wrapper {
    padding-bottom: 100px;
}

.search-wrapper {
    margin: 0 auto;
    text-align: center;
    margin-top: 75px;
   margin-bottom: 5px;

}

#plotly-div {
    width: 550px;
    height: auto;
}


#bg {
    background-image: url("bg.jpg");
    z-index: 0;

    /* Full height */
    min-height: 100%; 
    background-attachment: fixed;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* position: fixed; */
}

#bgTwo {
    background-image: url("bg2.jpg");
    z-index: 0;

    /* Full height */
    min-height: 100%; 
    background-attachment: fixed;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* position: fixed; */
}

#nav {
    height: 50px;
    
   background-color: rgba(0, 0, 0, 0);
    position: fixed;
    width: 100%;
    z-index: -1;

}
   
#title {
    color: rgb(206, 96, 171);
    text-align: center;
    margin-top: 130px;
    margin-bottom:30px;
    text-shadow: 3px 3px #000000;
    outline: 1px 1px #000000;
    font-family: 'Bungee Inline', cursive;
    font-size: 120px;

}

#subTitle {
    color: rgb(206, 96, 171);
    text-align: center;
    margin-bottom: 350px;
    text-shadow: 1px 1px #000000;
    outline: 1px 1px #000000;
    font-family: 'Bungee', cursive;
    font-size: 35px;
    font-style: italic;
    letter-spacing: 1px;
}

#aboutBox {
    background-color: rgba(255, 255, 255, 0.75);
    margin-top: 150px;
    padding-top: 20px;
    margin-bottom:150px;
    padding: 25px;
    
}

#aboutTitle {
    color: rgb(1, 164, 176);
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 2px 2px #000000;
    font-family: 'Lalezar', cursive;
    font-size: 75px;
}

#appTitle {
    text-align: center;
    padding-top: 50px;
}

#firstBox {
    border-style: groove;
    margin-top: 175px;
    margin-bottom: 250px;
}

#searchButton {
    text-align: center;
   
}

#search {
    width: 50%;
    border-style: ridge;
}

#secondBox {
    border-style: groove;
    margin-top: 500px;
    margin-bottom: 250px;
}

#categoriesTitle {
    text-align: center;
}

#categoriesSubtitle {
    text-align: center;
}

#thirdBox {
    border-style: groove;
    margin-top: 30px;
    margin-bottom: 250px;
    text-align: center;
}

#graph {
   width: 100%;
   height: auto;
}

#fourthBox {
    border-style: groove;
}

#fifth, #sixth, #seventh {
    border-style: groove;
    padding-left: 5px;
    text-align: center;
}

#lastBox {
    height: auto;
    margin-bottom: 30px;
}

#secondJump, #thirdJump, #lastJump {
    top: -123px;
    display: block;
    position: relative;
}

.progress, .progress3 {
    margin-top: 500px;
    margin-bottom: 300px;
    
}
#searchTerms {
    text-transform: capitalize;
    color: #2bbbad;
    font-size: 2.22rem;
}