* {
             box-sizing: border-box;
            }

            body {
              font-family: Arial;
              margin: 0;
            }

            /* Header */
            header {
                width: 100%;
                min-height:clamp(90px, 20vw, 250px);
            
                background: url(media/dnr_banner_transparent.png)
                            center center / contain
                            no-repeat;
            
                color: white;
            }
            
            /* Top navigation bar */
            .navbar ul{
              list-style:none;
              margin:0;
              padding:0;
              background:#333;
              display:flex;
              flex-wrap:wrap;
              align-items:center;
            }

            /* Navigation bar links */
            .navbar ul li a {
              display: block;
              color: white;
              padding: 14px 20px;
              text-decoration: none;
            }

            /* Change color on hover */
            .navbar ul li a:hover {
              background-color: #ddd;
              color: black;
            }

            /* Navbar contact info */
            .navbar ul li:last-child {
              margin-left:auto;
            }

            @media (max-width:648px) {

                .navbar ul {
                    flex-direction:column;
                    align-items:stretch;
                }
            
                .navbar ul li:last-child {
                    margin-left:0;
                }
            
                .navbar ul li a {
                    text-align:center;
                }
            }

            /* Column container */
            .container {  
              display: flex;
              flex-wrap: wrap;
            }

            /* Sidebar/left column */
            .side {
              flex: 1 1 300px;
              min-width: 280px;
              background-color: #aaa;
              padding: 20px;
            }

            /* Main column */
            .main {
              flex: 3 1 600px;
              min-width: 0;
              background-color: white;
              /*background-image: url(media/studio_background.jpg);*/
              padding: 20px;
            }

            /* Track list */
            .tracks {
              /*width: 40%;
              padding: 10px;
              position: relative;*/
              float: right;
            }

            .tracks h3 {
              text-shadow: 2px 2px 5px whitesmoke;
            }

            /* Fake image, just for this example */
            .fakeimg {
              background-color: #aaa;
              width: 100%;
              padding: 20px;
            }

            /*.profile-pic{
              border-radius: 50%;
            }*/

            .dividerbar {
              display: block;
              background-color: #aaaaaa8e;
              width: 100%;
              padding: 4px;
              text-align: center;
            }

            .dividerbar h3 {
              text-shadow: 2px 2px 5px whitesmoke;
            }

            .discography {
                display:flex;
                flex-wrap:wrap;
                gap:20px;
                justify-content:center;
            }
            
            .discography-item {
                flex:1 1 180px;
                max-width:220px;
                margin:0;
            }
            
            .discography-item img,
            .discography-item button {
                width:100%;
                height:auto;
            }
            
            .discography-item:hover {
              border: 1px solid #777;
            }
            
            /* Footer */
            footer {
              padding: 5px;
              text-align: center;
              background: #333;
            }

            /* Responsive layout - when the screen is less than 648px wide, make the two columns stack on top of each other instead of next to each other */
            @media screen and (max-width: 648px) {
              .container, .navbar {   
                flex-direction: column;
              }
            }

            /* Audio player */
            body{
                font-family:Arial,Helvetica,sans-serif;
                margin:0;
                background:#f5f5f5;
            }
            
            .player-wrapper{
                width:100%;
                /*max-width:600px;*/
                /*margin:auto;*/
                background:  white  /*#aaaaaa8c*/;
                padding:20px;
                border-radius:10px;
                /*box-shadow:0 2px 10px rgba(0,0,0,.15);*/
            }
            
            audio{
                width:100%;
            }
            
            .track-container{
                margin-top:10px;
                overflow:hidden;
                white-space:nowrap;
                border-top:1px solid #ddd;
                padding-top:10px;
            }
            
            .track-scroll{
                display:inline-block;
                /*padding-left:100%;*/
                animation:Pulse 15s linear infinite;
                font-weight:bold;
            }
            
            /* @keyframes scrollTrack{
                from{
                    transform:translateX(0);
                }
                to{
                    transform:translateX(-100%);
                }
            } */
            
            .status{
                margin-top:10px;
                color:#666;
                font-size:14px;
            }

            .album-display{
                display:flex;
                gap:25px;
                align-items:flex-start;
                width: 100%;
                box-sizing: border-box;
            }

            .album-cover {
                flex:0 1 300px;
            }
            
            .album-cover img {
                width:100%;
                max-width:300px;
                height:auto;
            }
            
            .album-info{
                flex:1;
                min-width:0;
            }
            
            .album-title{
                margin-top:0;
                margin-bottom:15px;
            }
            
                        
            .table-wrapper {
                overflow-x:auto;
            }
            


            .track-list{
                width:100%;
                border-collapse:collapse;
            }
            
            .track-list th,
            .track-list td{
                padding:8px 10px;
                border-bottom:1px solid #ddd;
            }
            
            .track-list th{
                text-align:left;
                background:#f5f5f5;
            }
            
            .track-list td:last-child,
            .track-list th:last-child{
                text-align:right;
                width:80px;
            }

            @media (max-width: 648px){

                .album-display{
                    flex-direction:column;
                }
            
                .album-cover{
                    flex:none;
                }
            
                .album-cover img{
                    max-width:300px;
                    width:100%;
                }
            
            }

            @media (max-width: 648px){

              .profile-pic{
                    flex:none;
                }

              .profile-pic img{
                    max-width:300px;
                    width: 100%;
                }
            

            
            }

            @media (max-width:768px) {
            
                .container {
                    flex-direction:column;
                }
            
                .album-display {
                    flex-direction:column;
                    align-items:center;
                }
            
                .album-info {
                    width:100%;
                }
            
                .side,
                .main {
                    width:100%;
                }
            }