@font-face {
    font-family: 'gophertextmedium';
    src: url('fonts/gophertextmedium.otf');
  }

  @font-face {
    font-family: 'GopherMono-Regular';
    src: url('fonts/GopherMono-Regular.ttf');
  }

  body{
    height: 100vh;
    max-height: 100vh;
  }

  body, main {
    /* background: linear-gradient(232deg, #df9054, #e6776d, #b96074, #78566e);
    background-size: 800% 800%;

    -webkit-animation: CoverGradient 9s ease infinite;
    -moz-animation: CoverGradient 9s ease infinite;
    animation: CoverGradient 9s ease infinite; */
    font-family: 'GopherMono-Regular';
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* height:100vw; */
  }

  .trackTitle{

    background: linear-gradient(232deg, #78566e, #b96074,#78566e,#b96074 );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;

  }

  label.main, label.spotify{
    color:#876060;
  }

  .main.track0, .spotify.track0{
    color: #6d5d56;
  }

  .trackTitle.track0{
    background: linear-gradient(232deg, #635052, #8e7469,#6d5d56,#654f4c );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }

  .main.track1, .spotify.track1{
    color: #92827d;
  }

  .trackTitle.track1{
    background: linear-gradient(232deg, #5d574d, #92827d,#6a675c,#978c84 );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }

  .main.track2, .spotify.track2{
    color: #425246;
  }

  .trackTitle.track2{
    background: linear-gradient(232deg, #425246, #83b285,#425246,#49754f );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }

  .main.track3, .spotify.track3{
    color: #f0c48e;
  }
  .trackTitle.track3{
    background: linear-gradient(232deg, #b6815a, #f1c38f,#99664e,#f4d49d );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }

  .main.track4, .spotify.track4{
    color: #b14a5b;
  }
  .trackTitle.track4{
    background: linear-gradient(232deg, #b14a5b, #c75882,#dd7180,#b5495c );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }

  .main.track5, .spotify.track5{
    color: #923d67;
  }
  .trackTitle.track5{
    background: linear-gradient(232deg, #ae436e, #bb517b,#923d67,#cd5f70 );
    background-size: 200% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: CoverGradient 10s linear infinite;
  }


  .deluxe .song .trackTitle{

    background: linear-gradient(270deg, #f9f295, #e0aa3e, #faf398, #b88a44);
    background-size: 200% auto;

        color: #000;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        animation: CoverGradient 10s linear infinite;

  }

  

  main {
    background: transparent;
    /* background: linear-gradient(232deg, #191919,#191919,#191919,#191919,#191919,#191919,#f9f295, #e0aa3e, #faf398, #b88a44,#191919,#191919,#191919, #191919,#191919,#191919);
    background-size: 800% 800%;

    -webkit-animation: CoverGradient 10s ease infinite;
    -moz-animation: CoverGradient 10s ease infinite;
    animation: CoverGradient 10s ease infinite; */
    padding: 24px;
    margin: 0;
    height:100vh;
  }

  @-webkit-keyframes CoverGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@-moz-keyframes CoverGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@keyframes CoverGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}

@-webkit-keyframes DeluxeGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@-moz-keyframes DeluxeGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@keyframes DeluxeGradient {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}