@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {

  --white-100: hsl(206, 5%, 100%);
  --white-200: hsl(206, 5%, 90%);
  --white-300: hsl(206, 5%, 80%);
  --white-400: hsl(206, 5%, 65%);
  --white-500: hsl(206, 5%, 50%);
  --cee-100: #E6DDF0;
  --cee-200: #E1DDF0;
  --cee-300: #7F739E;
  --cee-400: #6C548F;
  --cee-500: #5B2FA8;
  --cee-600: #191224;
  --ceebody: #737373;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: 4rem !important;
  
}

body {
  font-family: "Urbanist", sans-serif;
  font-size: var(--text-md);
  font-weight: normal;
  color: var(--black-500);
  background-color: var(--ceebody);
  max-height: 5rem;
  width: 98%;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  
}

.embed {
    max-width: 40rem;
    margin:0 auto;
    padding: 0;
    max-height: 6rem;
}

.embed-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 6rem;
    width: 100%;
    
}

.embed-image img {
  width:7rem;
  height: 7rem;
  display: block;
  border-radius: 20px;
  margin: 1rem;
  box-shadow:10px 10px 30px 10px rgba(0,0,0,0.3);
}

 .embed-col1 {
     width:30%;
     height: 6.5rem;
 }
 
 .embed-col2 {
     width:50%;
     margin-left: 3rem;
     margin-top: 2.01rem;
 }

 .embed-col3 {
     height: 3.8rem;
     width: 20%;
 }
 


.embed-logo img {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 23%;
  margin-bottom: auto;
  
}


.embed-play-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top:auto;
    padding: 0.8rem;
    
}

.play-container{
  text-align: center;
  width: 4.5rem;
  position: relative;
}

.progress-indicator {
  display: block;
  margin-bottom: 1rem;
  width: 4.5rem;
  height: 4.5rem;
  transform: rotate(-90deg);
}

.play,
.pause {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  border: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  z-index: 99;
}


.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.time {
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    color: var(--white-200);
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1rem 0.5rem 0.2875rem 0.2rem;
}

.embed-song-name {
    color: var(--white-100);
    font-size: 0.758rem;
    font-weight: 700;
    
}

.embed-song-artist {
    color: var(--white-100);
    font-size: 0.6rem;
    margin-top: 0.1rem;
    font-weight: 400;    
}

.embed-pord {
    font-weight: 400;
    font-size: 0.6rem;
    background: var(--white-100);
    color: var(--white-500);
    border-radius: 50px;
    padding: 4px 4px 4px 8px;
    width: 120%;
    
}


.embed-song-name, .embed-song-artist {
     overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 8rem;
    padding-left: 0.2rem; 
}

@media(min-width:48rem){
    .embed-pord {
    font-weight: 400;
    font-size: 0.8rem;
    background: var(--white-100);
    color: var(--white-500);
    border-radius: 7px;
    padding: 1px 4px 1px 8px;
    width: 25rem;
}

.embed-song-name, .embed-song-artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 20rem;
}

}


.embed-section {
    width:100vw !important;
    margin-right:0;
    height:12rem;
    background: inherit;
}