* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body {
  min-height: 100vh;
  background-color: rgba(181, 178, 178, 0.438);
}

.card {
  background: rgba(102, 245, 238, 0.5) !important;
  border-radius: 0.70rem;
  box-shadow: 10px 5px 5px rgb(15, 15, 15);
}

.hero-body {
  background: linear-gradient(to left, rgba(91, 180, 231, 0.5), rgb(102, 245, 238, 0.5), rgb(53, 167, 123));

}

.button {

  border-radius: 0.7em;
  cursor: pointer;
  background: white;
}

.button:hover {
  background: rgba(205, 203, 203, 0.5);
}

.has-image-centered {
  margin-left: auto;
  margin-right: auto;
}

.titleWrapper {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 100s linear infinite;
}

@keyframes animate {
  to {
    background-position: -2500vh;
  }

}


#pageTitle {
  font-size: 125px;

}

#coin-name {
  font-size: 72px;
  ;
}

.input::-webkit-input-placeholder {
  color: rgb(41, 39, 39);
  font-weight: bold;
}

.ui-autocomplete {
  border: 1px solid slategray;
  max-width: 47%;
  background-color: rgba(102, 245, 238, 0.5);
  max-height: 120px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 20px;
}

.ui-autocomplete::-webkit-scrollbar {
  display: none;
}

.ui-helper-hidden-accessible {
  display: none;
}



#search-form {
  margin-top: 30px;
  margin-left: 25%;
  margin-right: 25%;
}


#search-btn {
  font-weight: bold;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
}

#new-coin{
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

#contact-us-container{
  padding-bottom: 50px;
}

#contact-us {
  font-size: 20px;
  font-weight: bold;
}

h1 {
  font-size: 32px;
  font-weight: bold;
}

#right-box-title {
  margin-top: 35px;
}

#left-box-title {
  margin-top: 35px;
}

#box-format {
  font-size: 20px;
}

#symbol {
  font-size: 20px;
}

#ranking {
  font-size: 20px;
}

/* #coin-resources{
white-space: pre-wrap;
} */

.red {
  font-weight: bolder;
  color: red;
}

.green {
  font-weight: bolder;
  color: green;
}

#disclaimer {
  font-size: 20px;
}

#modal-x-btn {
  position: absolute;
  top: 15px;
  right: 12px;
}

#leo-pic {
  max-height: 400px;
  max-width: 533px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.modal-background {
  padding: auto;
}

.modal-content {
  background-color: rgb(102, 245, 238) !important;
}



.footer {
  padding: 0px;
  margin-top: auto;
  position: fixed;
  bottom: 0;
}


#scroll-container {
  border: 3px solid black;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 20px;
  max-height: 40px;
}

#scroll-text {
  font-size: 24px;
  font-weight: bold;
  /* animation properties */
  /* -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%); */

  -moz-animation: my-animation 25s linear infinite;
  -webkit-animation: my-animation 25s linear infinite;
  animation: my-animation 25s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from {
    -moz-transform: translateX(45%);
  }

  to {
    -moz-transform: translateX(-100%);
  }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from {
    -webkit-transform: translateX(45%);
  }

  to {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(45%);
    -webkit-transform: translateX(45%);
    transform: translateX(45%);
  }

  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@media only screen and (max-width: 2100px) {
  .ui-autocomplete {
    max-width: 46.5%;
  }
}

@media only screen and (max-width: 1775px) {
  .ui-autocomplete {
    max-width: 46%;
  }
}

@media only screen and (max-width: 1550px) {
  .ui-autocomplete {
    max-width: 45.5%;
  }
}

@media only screen and (max-width: 1420px) {
  .ui-autocomplete {
    max-width: 45%;
  }
}

/* MAX WIDTH 1350 PX */

@media only screen and (max-width: 1350px) {
  #coin-name {
    font-size: 50px;
  }

}

@media only screen and (max-width: 1250px) {
  .ui-autocomplete {
    max-width: 44.5%;
  }
}

@media only screen and (max-width: 1100px) {
  .ui-autocomplete {
    max-width: 43.5%;
  }
}

/* MAX WIDTH 950 PX */

@media only screen and (max-width: 975px) {
  .ui-autocomplete {
    max-width: 42.5%;
  }
}

@media only screen and (max-width: 825px) {
  .ui-autocomplete {
    max-width: 42%;
  }
}


/* MAX WIDTH 768 PX */

@media only screen and (max-width: 768px) {
  #searched-coin {
    order: -1;
    display: block;
  }

  #columns-container {
    display: flex;
    flex-direction: column;
  }

  #data-card-column {
    display: block;
  }

  #info-card-column {
    display: block;
  }

  .ui-autocomplete {
    max-width: 41%;
  }

  #search-form{
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
  }

}

@media only screen and (max-width: 675px) {
  .ui-autocomplete {
    max-width: 40%;
  }

}


/* MAX WIDTH 600 PX */


@media only screen and (max-width: 600px) {
  #leo-pic {
    height: 200px;
    width: 266px;
  }

  #modal-x-btn {
    top: 20px;
    right: 30px;
  }

  .ui-autocomplete {
    max-width: 39%;
  }

}

@media only screen and (max-width: 550px) {
  .ui-autocomplete {
    max-width: 37%;
  }
}


/* MAX WIDTH 450 PX */


@media only screen and (max-width: 450px) {
  #leo-pic {
    height: 128px;
    width: 170px;
  }

  #pageTitle {
    font-size: 75px;
  }

  .ui-autocomplete {
    max-width: 35%;
  }

  
  #new-coin::placeholder {
    font-size: 16px;
  }

}