
    <!-- 6.1.24 CSS style -->
    <!-- 11.12.25 shrink the semantic marker image -->
    <style>
        body {
          background-color: lightgreen;

          /* Smoothly transition the background color */
          transition: background-color .5s;
        }

        .player {
          height: 110vh;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
			 float:left;
			 clear:both;
        }

        .details {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          margin-top: 25px;
        }

        .track-art {
          margin: 25px;
          height: 250px;
          width: 250px;
          background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
          background-size: cover;
        }

        .now-playing {
          font-size: 1rem;
        }

        .track-name {
          font-size: 3rem;
        }

        .track-artist {
          font-size: 1.5rem;
        }

        .buttons {
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .playpause-track,
        .prev-track,
        .next-track {
          padding: 25px;
          opacity: 0.8;

          /* Smoothly transition the opacity */
          transition: opacity .2s;
        }

        .playpause-track:hover,
        .prev-track:hover,
        .next-track:hover {
          opacity: 1.0;
        }

        .slider_container {
          width: 75%;
          max-width: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        /* Modify the appearance of the slider */
        .seek_slider,
        .volume_slider {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          height: 5px;
          background: black;
          opacity: 0.7;
          -webkit-transition: .2s;
          transition: opacity .2s;
        }

        /* Modify the appearance of the slider thumb */
        .seek_slider::-webkit-slider-thumb,
        .volume_slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 15px;
          height: 15px;
          background: white;
          cursor: pointer;
          border-radius: 50%;
        }

        .seek_slider:hover,
        .volume_slider:hover {
          opacity: 1.0;
        }

        .seek_slider {
          width: 60%;
        }

        .volume_slider {
          width: 30%;
        }

        .current-time,
        .total-duration {
          padding: 10px;
        }

        i.fa-volume-down,
        i.fa-volume-up {
          padding: 10px;
        }

        i.fa-play-circle,
        i.fa-pause-circle,
        i.fa-step-forward,
        i.fa-step-backward {
          cursor: pointer;
        }

        .semantic-marker-image {
          margin: 10;
          height: 150px;
          width: 160px;
          background-image: url("https://SemanticMarker.org/SemanticMarkerSmall.png");
          background-size: contain;
          resize: both;
          background-repeat: no-repeat;

         clear:both;
        }
        .semantic-marker-image.after {
		     clear:both;
			}

    </style>
