/* I guess this will be bootstrap? */
main {
  width: 99%;
}


/* on hover card glows and turns more white */
.card:hover {
  box-shadow: 0 0 11px rgba(33, 33, 33, 0.2) !important;
  opacity: 1 !important;
}

svg {
  animation: move 5s ease-in-out infinite;
}

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

.swoosh {
  overflow: hidden;
  border-right: 0.15em solid lightslategray;
  white-space: nowrap;
 
  font-family: 'Courier New', Courier, monospace;
  animation: typing 1.5s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: lightslategray;
  }
}


#add-game-form {
  display: none;
}

.show {
  display: block;
}

li {
  list-style-type: none;
  text-align: left;
}

a {
  text-decoration: none;
}



.radio-star:checked~label,
.radio-star:not(:checked)~label:hover~label,
.fa-star:hover~input:not(checked)~label~label {
  color: #fd4;
}


.rating-container {
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
}
.radio-star[type="radio"] {
  display:none;
}

@media only screen and (max-width: 750px) {
  #blueConsole {
    display: none;
  }
}


@media only screen and (max-width: 600px) {
  #headerNav {
    font-size: 1.5rem !important;
  }
}

@media only screen and (max-width: 380px) {
  #headerNav {
    font-size: 1rem !important;
  }
}