html, body {
            overflow-x:hidden;
            overflow-anchor: none;
        }
        
        html {
            box-sizing: border-box;
            margin:0;
            padding:0;
        }
        
        body {
            margin:0;
            padding:0;
            background: #eef;
            font-family: sans-serif;
            background-image:url(../img/sand.gif);
            height: 100vh;
        }
        
        *, *:before, *:after {
            box-sizing: inherit;
        }
        
        #wrapper {
            background: #fff;
            margin: 0 auto;
            padding: 0 30px 15px 30px;
            max-width: 660px;
            min-height: 100vh;
        }
        
        #mandro {
        
            border-bottom:1px solid #999;
            padding-bottom:10px;
            margin-top: 5px;
            color:rgb(51, 160, 255);
            padding-top:10px; 
            
        }
        
         #mandro img {
         
            width: 67%; 
        }
        p {
        
            max-width:600px;
        }
        
        p.indent, div.indent{
        
            margin:0 0 30px 30px;
        }
        
         p.description, label.description{
        
            color: rgba(157, 149, 148, 0.8);
            line-height: 1.3em;
        }
        
        a {
        
            color: rgba(157, 149, 148, 0.8);
        }
        
        p.blue, span.blue, a.blue {
            color:rgb(51, 160, 255);
        
        }
        
        .y_grid-container {
              display: grid;
              grid-template-columns: auto 240px;
              max-width:600px;
              background-color: #eef;
              padding: 8px;
              border: 1px solid rgba(50, 50, 50, 0.8);
              border-radius: 4px;
              margin-bottom:8px;
              font-size: 1.2em;
              line-height: 1.2em;
        }
        
        .y_grid-item {
            
            padding: 2px 8px;
            font-size: 0.8em;
            text-align: left;
            line-height: 20px;
            line-height: 1.2em;
        }
        
        .y_dur2 {
           color: #999;
        }
        
        .y_playbutton {
            font-size: 1.4em;
            white-space: nowrap;
            width:20px;
        }
        
         .y_playbutton a {
            vertical-align:-2px;
            text-decoration: none;
            color: #0072ff;
         }
         
         .y_playbutton a:hover {
            color: #0055ff;         }
         
         
        .y_slider {
          -webkit-appearance: none;
          width: 100px;
          height: 5px;
          background-color: transparent;
          background-image: url(blau.gif);
          background-position-x: -250px;
          background-repeat: no-repeat;
          border: 1px solid #053a5f;
          border-radius: 2px;
          -webkit-transition: .2s;
          transition: opacity .2s;
          
        }
       
        .y_slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 10px;
          height: 10px;
          background: #fff;
          cursor: pointer;
          border: 1px solid #053a5f;
          border-radius: 5px;
        }
        
        .y_slider::-webkit-slider-thumb:hover {
            background: #84c9ff;
        }

        .y_slider::-moz-range-thumb {
          width: 10px;
          height: 10px;
          background: #fff;
          cursor: pointer;
          border: 1px solid #053a5f;
          border-radius: 5px;
          position: relative;
        }
        
        .y_slider::-moz-range-thumb:hover {
            background: #84c9ff
        }
        
        .y_title-space {
            display: grid;
            grid-template-columns: auto; /* download-symbol 20px */
        }
        
        .y_download-symbol {
            display:none;
            font-size: 1.0em;
            border: 1px solid #999;
            border-radius: 5px;
            padding: 2px 2px 0 2px;
            height: 1.4em;
            font-weight:bold;
            text-align:center;
        }
        
        .y_download-symbol a {
            text-decoration: none;
        }
        
        .y_player-space {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-column-gap: 10px;
        }
        
        y_player-space div * {
         vertical-align:middle;
        }
        
        li {
        
            margin-top: 12px;
            color: rgba(157, 149, 148, 0.8);
            line-height: 1.3em;
            margin-left: 4px;
        }
        
        sup {
            position: relative;
            vertical-align: baseline;
            top: -0.4em;
            font-size: 75%;
        }
                
        /* DARK THEME */
        
        html,  body, #wrapper {
          background-color: rgb(29, 31, 32);
          color: #e8e6e3;
        }

        .y_grid-container {
          background-color: rgb(29, 31, 32);
          border-color: rgba(107, 99, 88, 0.8);
        }
        
         .y_download-symbol a {
            color: rgb(51, 160, 255);
         }

        .y_playbutton a {
          text-decoration-color: currentcolor;
          color: rgb(51, 160, 255);
        }

        .y_dur2 {
          color: rgb(138, 130, 119);
        }
        
         .y_slider {
             border-color: rgba(107, 99, 88, 0.8);
         }
         
         .y_slider::-webkit-slider-thumb, .y_slider::-moz-range-thumb {
            background:  rgb(29, 31, 32);
            border: 1px solid rgba(107, 99, 88, 0.8);
         }
       
        /*  END DARK THEME */
        
        @media only screen and (max-width: 768px) {
        
            #wrapper {
                margin: 5px auto;
                padding: 10px;
                width: 100vw;
            }
            
            .y_grid-container {
                  width:100%;
                  padding: 10px;
            }
            
            .y_title-space {
                display: grid;
                grid-template-columns: auto;
            }
            .y_download-symbol {
                display: none;
            }
            
            .y_slider {
              width: 100px;
             }
             
             img {
             
                width: 100%;
             }
             
             #mandro {
        
                border-bottom:1px solid #bbb;
                
            }
             
              #mandro img {
             
                width: 100%;
             }
             
        }