@font-face {font-family: Arial Black;src: url(ArialBlack.ttf);}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
  
        body {
            font-family: Arial Black, Arial, Helvetica, sans-serif;
            overflow-x: hidden;
        }

        .background{
            position: fixed;top: 0;z-index: -1;display: block;width: 100vw;height: 100vh;
            background: url('img/FREE-CASH-WEB-BG.gif') center center/cover no-repeat;
        }
        
                .player {
                    position: relative;
                    color: white;
                    max-width: 700px;
                    width: 90vw;
                    margin: auto;
                    margin-top: 10vh;
                    margin-bottom: 10vh;
                    padding: 3rem;
                    background-color: rgba(0, 0, 0, 0);
                    font-size: 1.5rem;
                    line-height: 2.5rem;
                }
                .container {
                    position: relative;
                    color: white;
                    max-width: 700px;
                    width: 90vw;
                    margin: auto;
                    margin-top: 10vh;
                    padding: 3rem;
                    background-color: rgba(0, 0, 0, 0.3);
                    font-size: 1.5rem;
                    line-height: 2.5rem;
                }
                .container a {display:block;text-align: center; font-size: 4rem; text-decoration: none; color: yellow}
        .player p {
            display: block;
            text-align: justify;
            -moz-text-align-last: justify;
            text-align-last: justify;
            margin-bottom: 2rem;
        }

        .player a img {
            display:block;
            margin:auto;
            max-width: 100%;
            margin-bottom: 10rem;
        }
        
                #playlist{
                    margin-top: 3rem;
                    font-size: 1.5rem;
                    list-style: decimal;
                    line-height: 2.5rem;
                    margin-left: 3rem;
                }
                #playlist li {
                    display: list-item;
            overflow-wrap: break-word;
            width: 100%;
            color: white;
            margin-bottom: 3rem;
            transition: 0.3s;
                }
        
                #playlist span{
                color: white;
                display: block;
                text-align: justify;
                -moz-text-align-last: justify;
                text-align-last: justify;
                width: 100%;
                margin-bottom: 2rem;
                font-size: 4rem;
                text-decoration: none;
                }
        
                #playlist li a{
                    display: block;
                    color: white;
                text-align: justify;
                -moz-text-align-last: justify;
                text-align-last: justify;
                text-justify: inter-character;
                width: 100%;
                text-decoration: none;
                }
        
                #playlist a:hover {
                    background-color: rgba(0, 0, 0, 0.5);
                }
        
                #playlist li::before {
                    font-family: Arial, Helvetica, sans-serif;
                }
        
                #playlist .current-song a{
                    color:red;
                }
        
                audio {
                    width: 100%;
                }
        
                .controls {
                    font-size: 5rem;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 3rem;
                    margin-top: 2rem;
                }
        
                .controls a {
                    text-decoration: none;
                    color: white;
                }

                .controls a img {
                    padding: 3rem;
                    width: 30vw;
                    transition: 0.3s;
                }

                .controls a img:hover{
                    filter:drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0,0.7)); 
                    -webkit-filter:drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0,0.7));
                }
        .download {
            font-size: 3rem;
            padding: 2rem 0;
            display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
        }

        .download a {
            text-decoration: none;
            color: white;
        }
                
        
                .toggle{
                    position: fixed;
                    bottom: 0;
                    right: 0;
                    width: 18rem;
                    height: 18rem;
                    cursor: pointer;
                    transition: margin-bottom .5s;
                }
        
                .toggle img {
                    width: 100%;
                    height: 100%;
                    filter:drop-shadow(1rem 1rem 0.5rem #000); 
                    -webkit-filter:drop-shadow(1rem 1rem 0.5rem #000); 
                    transition: 0.5s;
                }
                .toggle img:hover {
                    filter:drop-shadow(0.5rem 0.5rem 0.2rem #000); 
                    -webkit-filter:drop-shadow(0.5rem 0.5rem 0.2rem #000); 
                }
        
                .sidenav {
          height: 0vh;
          width: 100%;
          position: fixed;
          z-index: 1;
          bottom: 0;
          right: 0;
          background-color: rgba(255, 0, 0, 0.95);
          border-top: rgb(255, 255, 255) solid 3px;
          overflow-x: hidden;
          transition: 0.5s;}
        .actual-player {position:sticky; top:2rem; padding: 2rem 1rem;background-color: rgba(0, 0, 0, 0)}
        .sidenav a {text-decoration: none;font-size: 25px;color: white;display: block;transition: 0.3s;}
        .about span {position:sticky;display: block;top:2.5rem;font-size: 5rem;margin-bottom: 4rem;text-shadow:0.5rem 0.5rem 0.5rem #ff0000;transition: 0.3s;z-index: 2}
        .sidenav a:hover, span:hover {color: #000;}
        .sidenav .closebtn {position: sticky;top: 0;float: right;;font-size: 9rem;margin-right: 3rem;font-family: Arial Black, Arial, Helvetica, sans-serif;}
        .about {padding: 3rem;width: 90%;font-size: 2rem;color: white;}
        @media only screen and (max-width: 812px) {
            body {background-color: red}
            .download {display: none;}
            .toggle{width: 10rem;height: 10rem;}
            .sidenav .closebtn{font-size: 3rem;margin-right: 2rem; padding-top: 1.8rem;}
            .about {padding: 1.5rem;font-size: 1rem;}
            .about span {text-shadow:0.2rem 0.2rem 0.5rem #ff0000;font-size: 2rem; margin-bottom: 3rem}
            #playlist {margin-top: 1.5rem; font-size: 1rem; line-height: 1.5rem; margin-left: 2rem;}
            #playlist span {font-size: 2rem;margin-bottom: 1rem}
            .actual-player {top:1rem;padding: 1rem;background-color: rgba(0, 0, 0, 0)}
            .player {padding: 1rem; margin-bottom: 10rem}
            .player p {font-size: 1rem;line-height: 1.5rem}
            .download {font-size: 2rem}
            .controls {font-size: 3.5rem; margin-bottom: 2.5rem}
            .controls a img {padding: 2rem;width: 40vw;}
        }