body {
  font: 800 40px comic;
  color: white;

  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.3px black;
  text-align: center;

  background-color: #000;
  margin: 0;
}

.page-bg {
  min-height: calc(100vh - 100px);
  background-image: url("Images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

header {
  background-color: white;
  margin: 0;
  width: 100%;
  padding: 20px;
  overflow: hidden;
}

.nowplayingcard {
width: 40%;
margin: 0 auto;
margin-top: 3%;

.nowplayingcontainer-inner {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  display: inline-block;
  @include border-left-radius($globalBorderRadius);

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }

  img#trackart {
    max-width: 30%;
    float: left;
    left: 0;
    @include border-left-radius($globalBorderRadius);
  }

  .trackInfo {
    width: 70%;
    float: left;
    display: block;
  
    a {
      max-width: 90%;
      display: block;
      font-size: 30px;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
  
      overflow-x: auto;
      overflow-y: hidden;
  
      &:nth-child(odd) {
        color: white;
        font-weight: bold;
        line-height: 15px;
        letter-spacing: 0.2px;
        padding: 10% 0 0 5%;
  
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
          margin: -2% 3px 0 0;
        }
      }
  
      &:nth-child(even) {
        color: gray;
        font-size: $globalFontSize - 1px;
        letter-spacing: 0.1px;
        padding: 5% 0 0 5%;
  
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
          margin: -2% 3px 0 0;
        }
      }
    }
  }
  
}
}





a {
text-decoration: none;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
}


.content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

@font-face {
font-family: comic;
src: url(Comic\ Sans\ MS.ttf);
}


ul {
  list-style-type: none;
  margin: 0 auto 10px auto;
  padding: 0;
  width: 1000px;
}

li {
  margin-bottom: 6px;
  
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;

  background-image: url("Images/Button.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 25px;
}

li a:hover,
li a.active {
  background-image: url("Images/PButton.png");
  color: white;
}


#news-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.panel {
  background-image: url("Images/Panel.png");
  border-radius: 25px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  margin: 10px auto;
  padding: 2%;

  max-width: 1100px;
}

.news-card {
  text-decoration: none;
  color: inherit;
  background: #111;

  background-image: url("Images/Panel.png");
  border-radius: 25px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.news-card:hover {
  transform: scale(1.02);
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: fill;
  display: block;
}