@import "bulma/css/bulma.min.css";

html {
  height: 100%;
}

body {
  background-color: #0c121c;
  min-height: 100%;
  font-size: large;
}

.footer {
  background-color: #1b222f;
  color: #eee;
  font-size: medium;
}

hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
}

footer .content {
  margin-left: 10px;
}

hr.grey {
  border: 0;
  height: 1px;
  background-color: #373737;
}

p:empty:before {
  content: "\200b";
  /* unicode zero width space character */
}

.subtitle strong {
  color: #eee
}

a {
  color: #eee;
  border-bottom: 1px solid #e7e7e7;
}

a:hover {
  color: #eee;
  border-bottom: 1px solid #1db954;
}

.subtitle {
  color: #eee;
}

a.button.is-primary:hover {
  background-color: #1db954;
}


.album-photo img {
  height: 160px;
  width: 160px;
  margin: 10px;
  background-color: transparent;
  box-shadow: 5px 5px #1db954;
}

.hero .hero-body,
.buttons .is-primary {
  background-color: #000;
}

.hero .song-body {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.hero .song-title,
.hero .song-subtitle {
  margin-left: 25px;
  margin-top: 30px;
  margin-right: 100px;
}

.hero .song-subtitle {
  margin-bottom: 30px;
}

.hero .title {
  font-size: 1.5em;
}

.hero .subtitle {
  font-size: 1em;
}

.hero .song-title {
  font-size: 1.7em;
}

.hero .song-subtitle {
  font-size: 1.2em;
}

.song-subinfo {
  font-size: x-smaller;
  color: grey;
}

.song-meta {
  width: 80%;
  color: grey;
  font-size: 1em !important;
}

.card {
  color: #eee;
  background-color: #1b222f;
}

.tabs li.is-active a {
  border-bottom-color: #1db954 !important;
  color: #1db954 !important;
}

.card .tabs ul li a {
  color: #eee;
}

.card .tabs ul li a:hover {
  border-bottom: 1px solid #1db954;
}

::-moz-selection {
  background: #1db954;
  text-shadow: none;
  color: #fff;
}

::selection {
  background: #1db954;
  text-shadow: none;
  color: #fff;
}

@media screen and (max-width: 550px) {
  .album-photo img {
    height: 120px;
    width: 120px;
  }

  .hero .song-title {
    font-size: 1.6em;
  }

  .hero .song-subtitle {
    font-size: 1.1em;
  }
}

@media screen and (max-width: 850px) {
  .user-buttons{
    display: grid;
    justify-content: space-around;
  }

  .album-photo img {
    height: 120px;
    width: 120px;
  }

  .hero .song-title {
    font-size: 1.6em;
  }

  .hero .song-subtitle {
    font-size: 1.1em;
  }
}

@media screen and (min-width: 850px) and (max-height: 1300px) {
  .container {
    width: 80%;
  }

  .album-photo img {
    height: 200px;
    width: 200px;
  }

  .hero .song-title {
    font-size: 1.9em;
  }

  .hero .song-subtitle {
    font-size: 1.4em;
  }
}

@media screen and (min-width: 1300px) {
  .container {
    width: 60%;
  }

  .album-photo img {
    height: 260px;
    width: 260px;
  }

  .hero .song-title {
    font-size: 2.2em;
  }

  .hero .song-subtitle {
    font-size: 1.7em;
  }
}

.user-search{
  display: grid;
  justify-content: end !important;
}

.is-spotify {
  background-color: #1db954 !important;
}

.input {
  color: #1db954;
}

.lirik-loading {
  display: block;
  float: left;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 1;
  background-color: transparent;
  transform: scale(0.4);
  position: fixed;
  z-index: 1;
  bottom: 0px;
  right: 10px;
}

.lirik-loading .lirik-loading-bar {
  height: 40px;
  width: 5px;
  border-radius: 5px;
  display: block;
  background-color: #1db954;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: center bottom;
  animation: loading-bar 1.2s ease-in-out infinite;
}

.lirik-loading .lirik-loading-bar.bar1 {
  transform: translateX(-50%) rotate(30deg);
  animation-delay: -0.1s;
}

.lirik-loading .lirik-loading-bar.bar2 {
  transform: translateX(-50%) rotate(60deg);
  animation-delay: -0.2s;
}

.lirik-loading .lirik-loading-bar.bar3 {
  transform: translateX(-50%) rotate(90deg);
  animation-delay: -0.3s;
}

.lirik-loading .lirik-loading-bar.bar4 {
  transform: translateX(-50%) rotate(120deg);
  animation-delay: -0.4s;
}

.lirik-loading .lirik-loading-bar.bar5 {
  transform: translateX(-50%) rotate(150deg);
  animation-delay: -0.5s;
}

.lirik-loading .lirik-loading-bar.bar6 {
  transform: translateX(-50%) rotate(180deg);
  animation-delay: -0.6s;
}

.lirik-loading .lirik-loading-bar.bar7 {
  transform: translateX(-50%) rotate(210deg);
  animation-delay: -0.7s;
}

.lirik-loading .lirik-loading-bar.bar8 {
  transform: translateX(-50%) rotate(240deg);
  animation-delay: -0.8s;
}

.lirik-loading .lirik-loading-bar.bar9 {
  transform: translateX(-50%) rotate(270deg);
  animation-delay: -0.9s;
}

.lirik-loading .lirik-loading-bar.bar10 {
  transform: translateX(-50%) rotate(300deg);
  animation-delay: -1s;
}

.lirik-loading .lirik-loading-bar.bar11 {
  transform: translateX(-50%) rotate(330deg);
  animation-delay: -1.1s;
}

.lirik-loading .lirik-loading-bar.bar12 {
  transform: translateX(-50%) rotate(360deg);
  animation-delay: -1.2s;
}

.lirik-loading:after {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}

@keyframes loading-bar {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}