styles.css

/*blues: #00c #33f #99f
hue:240, sat: 100, light: 40,60,80*/

* {
  text-align: center !important;
}
html {
  scroll-behavior: smooth;
}
body {
  /*top margin already covered by sticky heading*/
  margin-left: 25px;
  margin-right: 25px;
}
::-moz-selection {
  background: #99f;
  color: #fff;
}
::selection {
  background: #99f;
  color: #fff;
}
input::-moz-selection {
  background: #00c;
  color: #fff;
}
input::selection {
  background: #00c;
  color: #fff;
}
#langInput {
  width:250px;
  display: inline;
}
br, .close, .form-check-label, #snackbar {
	user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#logo {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  transition: all .25s ease-in-out;
}
#logo.animated {
  transform: rotate(15deg) scale(1.2);
}

/*.btn-default:hover {
  color: #00c;
}*/

/*.album-art {*/
  /*transition: all .1s ease-in-out !important;*/
/*}*/

.album-art:hover {
  transform: scale(1.1);
}
.close {
  background-color: #c33 !important;
  color: #fff !important;
  border-radius: 5px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc !important;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #ccc !important;
}

/*sharethis*/
.st-btn {
  background-color: #333 !important;
}

#topButton {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
}

button {
  margin: 5px;
}

input[type=checkbox] {
	margin-left: 20px !important;
	width: 20px;
	height: 20px;
}

/*override bootstrap blues*/
a, .text-info {
  color: #33f !important;
}
.bg-primary {
  background-color: #33f !important;
}
.btn-primary {
  background-color: #33f !important;
}

/* button hover icon transitions */
button i.fa-cog, button i.fa-info, button i.fa-moon, button i.fa-copy, #searchButton i.fa-search, i.fa-sync-alt, i.fa-arrows-alt {
  transition: all .15s ease-in-out;
}
button:hover i.fa-cog, button:hover i.fa-sync-alt {
  transform: rotate(60deg);
}
button:hover i.fa-info {
  transform: translateY(-2px);
}
button:active i.fa-moon {
  transform: scale(-1,1);
}
button:active i.fa-copy {
  transform: scale(1,-1);
}
#searchButton:active i.fa-search, button:hover i.fa-arrows-alt {
  transform: scale(1.25); 
}

.form-check-label, input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox] {
  opacity: 0 !important;
  width: 0px !important;
  position: absolute !important;
}
.fa-check-square, .fa-square {
  font-size: 24px;
}
/*.form-check-label:hover {
  color: #33f;
}*/

/*sticky header*/
h3 {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: rgba(255,255,255,.8);
  padding-top: 10px;
}

.btn-outline-dark {
  border: 1px solid #333;
  color: #333;
  background-color: #fff;
}
.btn-outline-dark:hover, .btn-outline-dark:active {
  color: #fff;
  background-color: #333;
}
.btn-dark, .btn-dark:hover, .btn-dark:active {
  color: #fff;
  background-color: #333;
}

input.bg-primary, .btn-primary {
  border: 1px solid #fff;
}
.modal-content {
  border: 0;
}

/* remove "Ads by Amazon" text */
.amzn-native-brand-text {
  display: none;
}


.amzn-native-product-subtitle-text, .amzn-native-product-title-text, .amzn-native-product {
  color: #333 !important;
}
.amzn-native-product {
  background-color: #fff !important;
}

/*snackbar*/
#snackbar {
    visibility: hidden;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    left: 50%;
    bottom: 25px;
    z-index: 1051; /*bs modal is 1050*/
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 25px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 25px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {bottom: 25px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 25px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}



/*----------------print----------------*/

@media print {
  .song-preview, #topButton, .modal, .sharethis-inline-share-buttons, .form-group.row, .no-print, .song-links, #ads, #snackbar {
    display: none !important;
  }
  h3 {
    position: inherit;
  }
  .modal-backdrop {
    z-index: -99 !important;
  }
}