body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}


.searchButton {
  background-color: #ddd;
  color: black;
  padding: 10px 20px;
  border: 1px solid;
  border-color: #ccc;
  background-color: #f8f8f8;
  border-left: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  font-size: 1;
}

.vidProgress{
  border-radius: 0px;
  background-color: #ccc;
  height: 0.5rem;
  margin-top: 4px;
  width: auto;
}

progress::-moz-progress-bar {
  background: red;
}

progress::-webkit-progress-value {
  background: red;
}

progress::-webkit-progress-bar {
  background: #ccc;
}

.searchBar {
  text-align: left;
  color: black;
  border-right: none;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 50vw;
  border: 1px solid;
  border-color: #ccc;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  font-size: 1rem;
}

.navButton {
  background-color: #ddd;
  font-size: 1.25rem;
  color: black;
  padding: 10px 20px;
  border: 1px solid;
  border-color: #ccc;
  background-color: #f8f8f8;
  text-align: center;
  border-radius: 40px;
}

.navButton:hover{
  border-color:#00B7FF
}

input[type=search]:focus{
  outline: 0px;    /* oranges! yey */
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.card:hover{
  background:#ccc
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}