:root {
  --bluella: #12CFF3;
}

body {
  /* font-family: 'ZCOOL KuaiLe'; */
  /* font-family: 'IM Fell Great Primer SC', serif; */
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

p span {
  color: var(--color-bluella);
}

/* [data-theme="dark"] {
  --color-bg: #000000; 
}*/

.b-canvas {
  font-family: 'Monoton';
  font-display: block;
  margin-left: 5px;
}

.main {
  font-family: 'ZCOOL KuaiLe';
  padding: 20px 0;
  background: rgba(0, 0, 0, 1);
  background-image: url("https://f000.backblazeb2.com/file/bucket-content/images/drawings/skinny-withering-cropped.png");
  background-origin: padding-box;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: top right;
  /* background-position: %; */
  /* font-family: 'IM Fell Great Primer SC', serif; */
  /* padding: 40px 0; */
}

nav.navbar-toggler {
  color: cadetblue;
}

a.nav-link {
  color: #12CFF3;
  align-items: right;
}

a.nav-link:hover {
  text-decoration-line: underline;
  color: thistle;
  text-decoration-color: cadetblue;
}

a.dropdown-item#pending {
  color: grey;
}

@keyframes colorainbow {
  0% {
    color: #12CFF3;
  }

  50% {
    color: #3CD814;
  }

  100% {
    color: #12CFF3;
  }
}

h1 {
  margin-left: 15px;
  color: #12CFF3;
  animation-name: colorainbow;
  animation-delay: 0.7ms;
  animation-duration: 100s;
  animation-iteration-count: infinite;
}

@keyframes borderlights {
  0% {
    border-color: #3CD814;
  }

  50% {
    border-color: #12CFF3;
  }

  100% {
    border-color: #3CD814;
  }
}

.container-fluid {
  border: 3px dotted;
  border-radius: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  animation-name: borderlights;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  /* background-color:rgba(235, 99, 189, 0.3); */
  /* background-color: var(--color-bluella) */
}


h1.brand:before {
  content: "";
  font-size: 1.2rem;
  ;
  margin-left: 15px;
  color: #12CFF3;
}

@keyframes colorainbow2 {
  0% {
    color: #dc143c;
  }

  50% {
    color: #12cff3;
  }

  100% {
    color: #3CD814
  }
}

h2 a.brand {
  animation-name: colorainbow2;
  animation-delay: 0.7ms;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

h4 {
  color: crimson;
  font-size: 17px;
  text-transform: lowercase;
  margin-top: 16px;
  font-weight: 600;
}

.row#cardgrid {
  display: flex;
}

.col-md-3 {
  margin-bottom: 40px;
}

.album-poster {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  min-width: 200px;
  min-height: 200px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(235, 99, 189, 0.3);
  transition: all ease .4s;
}

.album-poster:hover {
  box-shadow: none;
  transform: scale(0.89) translateY(5px);
}

img {
  justify-content: center;
  max-width: 250px;
  max-height: 250px;
  min-width: 200px;
  min-height: 200px;
  border-radius: 7px;
  transform: translateZ(20px);
}


h3 {
  font-size: 24px;
  margin-bottom: 24px;
  border-bottom: .4px;
  padding-bottom: 15px;
  color: #12CFF3;
}

h3.construction {
  color: #12CFF3;
}

h3#the-hits {
  color: antiquewhite;
}

/* 
@keyframes wobniaroloc {
  0% {color: antiquewhite; }
  100% { color: #12CFF3; }
} */

p.helpingdave {
  font-family: Inter-Regular;
  font-size: 20px;
  color: antiquewhite;

}


p.song-title {
  color: #12CFF3;
  /* margin-top: 1rem;
  text-align: right;
  padding-right: 10px;
  /* margin-left: 10px; */
  /* max-width: 80%; */
}

*/ p.construction {
  animation: none;
  font-size: 18px;
  color: rgb(214, 186, 186);
}

p.construction a {
  font-size: larger;
  color: limegreen;
  text-decoration-color: crimson;
}

p.construction a:hover {
  color: thistle;
}


/**  MEDIA QUERIES **/

@media screen and (max-width: 992px) {
  .main {
    background-origin: padding-box;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: top right;
    padding: 15px 0;
  }

  .col-md-3 {
    grid-template-columns: auto auto auto auto;
  }

  p.song-title {
    text-align: left;
  }

  #plain-text {
    width: 200px;
  }

  canvas {
    width: 200px;
  }

}

@media screen and (min-width: 0) {
  .album-cover {
    grid-template-columns: auto;
  }
}

@media screen and (min-width: 400px) {
  .album-cover {
    grid-template-columns: auto;
  }
}

@media screen and (max-width: 770px) {
  #plain-text {
    font-size-adjust: -20%;
  }

  .row {
    margin: 30px;
  }

  .col-md-3 {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  h1#page-title {
    margin-left: 10px;
  }

  img {
    max-height: 200px;
    max-width: 200px;
  }

  h4 {
    flex-wrap: wrap;
  }
}


@media screen and (min-width: 992px) {
  /* .div.col-md-3 {
    background-color: hotpink; */
}

@media screen and (min-width: 1200px) {
  /* .div.col-md-3 {
    background-color: lime; */
}

@media screen and (min-width: 1400px) {
  /* .div.col-md-3 {
    background-color: teal; */
}