/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@font-face {
 font-family: Neuton-Bold;
 font-display: swap;
 src: url(../fonts/Neuton-Bold.ttf);
}

@media screen and (max-width: 600px) {
 .content-box {flex-wrap:wrap;}
 .headerText .release-title {font-size:max(44px, 6vw);}
 .headerText h3 {font-size:max(16px, 3vw);}
 .headerText {height:28vh;background-attachment:scroll;}
 picture {width:100%;height:auto;}
 h2 {text-align:center;font-size:7.5vw;}
 .credits, .runtime {font-size:max(10px, 3vw);}
 p {text-align:center;font-size:max(10px, 3vw);}
 .listen-bar {justify-content:center;}
 td {font-size:max(10px, 3vw);}
}

@media screen and (min-width: 601px) {
 .content-box {flex-wrap:nowrap;}
 .headerText .release-title {font-size:max(44px, 6vw);}
 .headerText h3 {font-size:max(16px, 1.75vw);}
 .headerText {height:35vh;}
 picture {height:100%;max-width:37.5%;}
 h2 {text-align:left;font-size:max(28px, 1.75vw);}
 p, .credits, .runtime {font-size:max(14px, 0.75vw)}
 td {font-size: max(14px, 0.75vw);}
}

:root {
 --whte: #FFFFFF;
 --blck: #0D0D0D;
 --lightMain: #D5D5D5;
 --darkMain: #2F2F2F;
 --accent: #DBAA24;
}

html {
 background-color: black;
}

*, *:before, *:after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 clear: both;
 overflow: visible;
 font-family: Neuton-Bold;
}

picture {
 aspect-ratio: 1/1;
}

picture img {
 width: 100%;
 height: auto;
 border: none;
}

.headerText {
 padding: 1rem;
 gap: 0.5rem;
 margin-top: 59px;
 color: var(--lightMain);
 display: flex;
 flex-wrap: wrap;
 align-content: center;
 justify-content: center;
 text-align: center;
 width: 100%;
 background-image: linear-gradient(to bottom, var(--blck), var(--darkMain));
 background-position: center center;
}

h2 {
 width:100%;
 color: var(--lightMain);
}

.content-box {
 display: flex;
 padding: 1rem;
 background-color: var(--darkMain);
}

.release-title {
 width: 100%;
}

.headerText h3, .release-type, .release-date {
 width: 100%;
 font-weight: normal;
 color: var(--whte);
}

.tracklist {
 width: 100%;
}

.text-half {
 gap: 1rem;
 display: flex;
 flex-wrap: wrap;
 align-content: flex-start;
}

.listen-bar {
 display: flex;
 margin-top: 1rem;
 list-style-type: none;
 gap: 1rem;
}

.listen-bar li a img {
 height: max(30px, 3.4722vh);
 width: max(30px, 1.9531vw);
}

.tracklist ul {
 list-style-type: none;
}

td {
 color: var(--whte);
 font-family: Verdana;
}

table {
 border-collapse: separate;
 border-spacing: 0 1rem;
 margin-top: -2rem;
}

p, .runtime, .credits {
 font-family: Verdana;
}