html {
  /* background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  width: 100%;
  height: 100%;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
  height: 100%;
  width: 100%;
  font-family: 'Jost', sans-serif, 'peepoFont';
  color: white;
  margin: auto;
}

#body-gradient {
  height: 100%;
  width: 100%;
  color: white;
  margin: auto;
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

#body-table {
  height: 100%;
  width: 100%;
  display: table;
  margin: auto;
}

#body-content {
  width: 75%;
  padding-left: 12.5%;
  padding-right: 12.5%;
  height: 100%;
  display: table-cell;
  font-size: 3vmin;
  /* vertical-align: middle; */
  text-align: center;
  /* Align top-version: */
  vertical-align: top;
  padding-top: 12vmin;
}

#content-wrapper {
  background-color: #00000022;
  padding-left: 2%;
  padding-right: 2%;
  /* padding-top: 1%; */
  /* padding-bottom: 7%; */
  padding-top: 0px;
  padding-bottom: 0.5%;
}

h2 {
  font-size: 6vmin;
}

h3 {
  font-size: 4vmin;
}

#login-banner {
}

button {
  color: black;
  background-color: white;
  border: none;
  height: 5vmin;
  font-size: 3vmin;
  font-family: inherit;
}

.gradient-slider-container {
  width: 66%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}

#topleft {
  position: absolute;
  left: 5px;
  top: 0px;
  color: #FFFFFFAA;
}

.version:link {
  text-decoration: none;
}

.version:visited {
  text-decoration: none;
}

.version:hover {
  text-decoration: underline;
  font-weight: bold;
}

.version:active {
  text-decoration: none;
}

.version {
  color: white;
  opacity: 0.33;
}

.new-version {
  color: #FFFFFF;
}

.new-version:link {
  text-decoration: underline;
}

.new-version:visited {
  text-decoration: underline;
}

.new-version:hover {
  text-decoration: underline;
  font-weight: bold;
}

.new-version:active {
  text-decoration: underline;
}

#currently-playing:link {
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

#currently-playing:visited {
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

#currently-playing:hover {
  text-decoration: none;
  font-style: italic;
  font-weight: bolder;
  color: #ffffff;
}

#currently-playing:active {
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

#currently-playing-art {
  display: inline-block;
  height: 1em;
  width: auto;
  transform: translate(0, 0.15em);
}

#currently-playing-artists {
  font-size: smaller;
  opacity: 0.75;
}

#currently-playing-album {
  font-size: smaller;
  color: #ffffff;
}

#currently-playing-album:link {
  text-decoration: none;
  font-style: italic;
}

#currently-playing-album:visited {
  text-decoration: none;
  font-style: italic;
}

#currently-playing-album:hover {
  text-decoration: none;
  font-style: italic;
  font-weight: bolder;
}

#currently-playing-album:active {
  text-decoration: none;
  font-style: italic;
}

.artist:link {
  font-size: smaller;
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

.artist:visited {
  font-size: smaller;
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

.artist:hover {
  font-size: smaller;
  text-decoration: none;
  font-style: italic;
  font-weight: bolder;
  color: #ffffff;
}

.artist:active {
  font-size: smaller;
  text-decoration: none;
  font-style: italic;
  color: #ffffff;
}

#chat-container {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

#chat-content {
  width: 100%;
  pointer-events: all;
  display: inline-block;
  align-self: flex-end;
}

#chat-input-container {
  width: 100%;
  height: 3vmax;
  font-size: 1.5vmax;
  background-color: #00000022;
}

#chat-input:focus {
  outline: none;
}

#chat-input {
  font-family: inherit;
  width: 100%;
  height: 100%;
  font-size: inherit;
  background-color: #00000000;
  border: none;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

#chat-history {
  font-size: 1.5vmax;
}

.chat-message {
  margin-left: 0.5vmin;
}

.chat-emoji {
  height: 1.5vmax;
  width: auto;
  transform: translate(0px, 0.15vmax) scale(1.25);
}

.spotify-logo:link {
  text-decoration: none;
}

.spotify-logo:visited {
  text-decoration: none;
}

.spotify-logo:hover {
  text-decoration: none;
}

.spotify-logo:active {
  text-decoration: none;
}

.spotify-logo {
  text-decoration: none;
  color: white;
  --size: 10vmax;
  width: var(--size);
  font-size: calc(var(--size) / 5);
}