﻿777777body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, #77ad9d 27%, #daf9ea 75%);
}

#audio {
	width: 100% !important;
	}

#card {
  display: flex;
  justify-content: center;
  align-items: stretch;
  border-radius: 20px;
  7878box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#card #display {
  width: 60%;
  7878border-radius: 20px 0 0 20px;
   background-color: #D7CCC8;
  -webkit-backdrop-filter: blur(30px) hue-rotate(20deg);
          backdrop-filter: blur(30px) hue-rotate(20deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

#display {
	box-shadow: 5px 0 2px -2px rgba(0, 0, 0, 0.5);
	}



#card #display > * {
  text-align: center;   
}
#card #display #art {
  height: 200px;
  margin: 0 auto;   
}
#card #list {
  width: 40%;
  7878border-radius: 0 20px 20px 0;
  background: transparent;
  display: flex;
  flex-direction: column; 
}
#card #list .item {
  padding: 0 1em;
  background: white;
  transition: all 0.3s ease;
}
#card #list .item:first-of-type {
  7878border-radius: 0 20px 0 0; 
}
#card #list .item:last-of-type {
  7878border-radius: 0 0 20px 0;
}
#card #list .item.is-active {
   background-color: #D7CCC8;
  -webkit-backdrop-filter: blur(30px) hue-rotate(20deg);
          backdrop-filter: blur(30px) hue-rotate(20deg);
  transition: all 0.3s ease;
}
#card #list .item:hover {
  cursor: pointer;
}

77.audio-control-board {
	width: 100%;
	height: 40px;
	border-radius: 0;
	border: 1px solid blue;
	}

#personalized-size-image {
	box-sizing: border-box;
	clear: both;       
	}

.image-container {
	box-sizing: border-box;
	clear: both;       
	}

.centeredVideo {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	box-sizing: border-box;
	clear: both;       
	}


.image-container {
  position: relative;
	}

video {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}