@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;700&family=Oswald:wght@300;500;600&display=swap');

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}

html,
body {
  height:100%;
  background:#0D2E5B;
  background-image:linear-gradient(135deg, #0D2E5B, #439EDD);
  color:white;
}

body {
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  font-family:'Inter', sans-serif;
}

#wrapper {
  display:flex;
  flex-flow:column nowrap;
  align-items:center;
  width:20rem;
  max-width:100%;
  margin-top:auto;
  margin-bottom:auto;
  padding-top:1rem;
  padding-bottom:1rem;
}

#logo {
  margin-bottom:1rem;
}

#headline {
  margin-bottom:2rem;
  font-size:110%;
}

#form p {
  display:flex;
  flex-flow:row nowrap;
  margin-bottom:0.5rem;
}
#form div {
  margin-top:1rem;
  margin-bottom:1rem;
}
#form div p {
  display:block;
  margin-top:0.5rem;
  margin-bottom:0px;
  color:rgba(255, 255, 255, 0.5);
}
#form a {
  text-decoration:underline;
  color:inherit;
}
#form label {
  width:5rem;
}
#form input {
  flex:1 0 auto;
  border:none;
  border-bottom:1px solid currentColor;
  background:transparent;
  color:white;
}
#form button {
  display:block;
  margin-top:1rem;
  margin-left:auto;
  margin-right:auto;
  padding:1rem 2rem;
  border:1px solid currentColor;
  border-radius:0px;
  background:transparent;
  color:white;
  cursor:pointer;
  touch-action:manipulation;
}

#control {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:center;
  width:12rem;
  height:5rem;
  border:1px solid currentColor;
  border-radius:0px;
  background:transparent;
  color:white;
  cursor:pointer;
}
#control svg {
  display:inline-block;
  width:2rem;
  height:2rem;
  margin-right:1rem;
  fill:currentColor;
  vertical-align:middle;
}
#control[data-status="disconnected"] [data-visible]:not([data-visible="disconnected"]),
#control[data-status="pending"] [data-visible]:not([data-visible="pending"]),
#control[data-status="playing"] [data-visible]:not([data-visible="playing"]),
#control[data-status="paused"] [data-visible]:not([data-visible="paused"]),
#control[data-status="error"] [data-visible]:not([data-visible="error"]) {
  display: none;
}

@keyframes spinner { from { transform:rotate(0deg) } to { transform:rotate(360deg); } }
#control-spinner {
  animation-name:spinner;
  animation-direction:normal;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-iteration-count:infinite;
  animation-timing-function:steps(8, end);
  animation-play-state:running;
}

#delay {
	display:flex;
	flex-flow:row nowrap;
  margin-top:1rem;
}
#delay button {
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:center;
  width:3rem;
  height:3rem;
  border:1px solid currentColor;
  border-radius:0px;
  background:transparent;
  color:white;
  cursor:pointer;
  touch-action:manipulation;
}
#delay div {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
  width: 6rem;
}
#delay div strong {
	font-size: 80%;
	opacity: 0.5;
}