:root {
  --color-text: white;
  --color-text-inverted: black;
  --color-muted-text: hsl(219, 11%, 65%);
  --color-background-default: hsl(224, 71%, 4%);
  --color-background-alternative: hsl(220, 43%, 11%);
  --color-background-field: hsl(223, 22%, 18%);
  --color-border-field: hsl(219, 14%, 27%);
  --color-background: var(--color-background-default);
  --color-dimmed: hsla(0, 0%, 0%, 0.3);
  --color-lightened: hsla(0, 0%, 100%, 0.3);
  --color-acent: hsl(48, 100%, 45%);
  --color-info: hsl(208, 100%, 50%);
  --color-info-background: hsla(208, 100%, 50%, 0.2);
  --color-success: hsl(155, 100%, 28%);
  --color-success-background: hsla(155, 100%, 28%, 0.2);
  --color-warn: hsl(36, 76%, 40%);
  --color-warn-background: hsla(36, 76%, 40%, 0.4);
  --color-error: hsl(0, 76%, 40%);
  --color-error-background: hsla(0, 76%, 40%, 0.2);

  --color-background-live: var(--color-info);

  --border-radius: 0.8rem;
  --border-size: 1px;

  --transition-height: 15rem;
  --page-max-width: 150ch;

  color-scheme: dark;
  font-family: Verdana, sans-serif;
  color: var(--color-text);
}
html {
  height: 100%;
}
body {
  margin: 0;
  background-color: var(--color-background);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body:has(dialog[open]) {
    overflow: hidden;
}
.page {
  width: 100%;
  height: 100%;
  max-width: var(--page-max-width);
}

/* Transitions */
.transition {
  padding-top: calc(var(--transition-height) / 2);
  padding-bottom: var(--transition-height);
  margin-bottom: calc(var(--transition-height) / 1.5);
}
.sun::before {
  content: "";
  position: absolute;
  width: 17rem;
  height: 17rem;
  top: -9.5rem;
  left: -9.5rem;
  background-color: var(--color-acent);
  border-radius: 50%;
}
.curve {
  position: absolute;
  height: var(--transition-height);
  width: 100%;
  bottom: 0;
}
.curve::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 40%;
  width: 55.5%;
  height: 100%;
  background-color: var(--color-transition-from);
  left: -4%;
  transform: translate(0, 40%);
  z-index: -1;
}
.curve::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 60%;
  width: 55%;
  height: 100%;
  right: 0;
  transform: translate(0, 60%);
  background-color: var(--color-transition-to);
}
.curve.animate {
  animation: 1s ease-in-out infinite alternate curve-waves;
}
@keyframes curve-waves {
  0% {
    height: var(--transition-height);
  }
  100% {
    height: 0;
  }
}

/* Default elements */
* {
  scroll-margin-top: 3rem;
  -webkit-tap-highlight-color: transparent;
}
iframe {
  border: none;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}
h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.04rem;
  font-weight: normal;
  margin: 0;
}
h5,
h6,
p {
  margin: 0;
  font-weight: normal;
  font-size: 1rem;
}
button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button > svg {
  height: 1em;
}
audio {
  width: 100%;
}
data.endpoints {
  display: none;
}

/* Utility classes */
.round {
  border-radius: 50%;
}
.text-muted {
  color: var(--color-muted-text);
}
.text-justify {
  text-align: justify;
}
.respect-newline {
  white-space: pre-wrap;
}
.side-info {
  color: var(--color-muted-text);
  text-align: right;
  font-size: 0.9em;
  margin-top: 0.6em;
}

/* Components */
.player {
  width: 70%;
  max-width: 70rem;
  background-color: var(--color-dimmed);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-top: 1.5rem;
}
.player:first-child {
  margin-top: 0;
}
.player-info[data-position-current] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.player-info[data-position-current]::after {
  content: attr(data-position-current) " / " attr(data-position-end);
}
.player-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}
.play-stop > button {
  font-size: 2.5rem;
  transition: transform 0.3s ease-out, visibility 0.3s;
}
.play-stop > button > svg {
  fill: var(--color-text);
}
.play-stop > button:first-of-type {
  position: absolute;
}
.play-stop[data-status="stopped"] > button:first-of-type,
.play-stop[data-status="playing"] > button:last-of-type {
  visibility: visible;
  transform: scale(1);
}
.play-stop[data-status="playing"] > button:first-of-type,
.play-stop[data-status="stopped"] > button:last-of-type {
  visibility: hidden;
  transform: scale(0);
}

.recordings-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(35rem, 100%), max-content)
  );
  margin-bottom: 3rem;
}
.recordings-grid > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.recordings-grid audio {
  box-sizing: border-box;
  padding: 0 1rem 0 1rem;
}

.recording {
  background-color: var(--color-background-alternative);
  border: var(--border-size) solid var(--color-background-field);
  border-radius: var(--border-radius);
  margin: 1rem;
  padding-bottom: 1rem;
}
.recording select {
  margin-left: auto;
  margin-bottom: 1rem;
  margin-right: 2rem;
}

.box {
  display: block;
  padding: 0 2rem 2rem 2rem;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 12rem;
  width: 26rem;
  max-width: 100%;
  border: var(--border-size) solid var(--color-background-field);
  border-radius: var(--border-radius);
}
.card > img {
  position: absolute;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  object-fit: cover;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  -webkit-backdrop-filter: blur(0.5rem) saturate(.7);
  backdrop-filter: blur(20px) saturate(.7) brightness(.5);
  border-top: var(--border-size) solid var(--color-background-field);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(18rem, 100%), max-content)
  );
}
.card-grid + h2 {
  margin-top: 3em;
}

header {
  background-color: var(--color-background-alternative);
  border-bottom: var(--border-size) solid var(--color-background-field);
  padding: 0.5rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
}
header p, header h4 {
  margin: 0 1rem;
}

.icon {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-text);
}
.icon-main {
  font-size: 2.5rem;
}
.icon-button {
  position: relative;
  display: flex;
  --icon-button-size: 2.4rem;
}
.icon-button::after {
  content: '';
  height: var(--icon-button-size);
  width: var(--icon-button-size);
  transition: background-color 150ms ease-in;
  border-radius: 50%;
}
.icon-button:hover::after,
.icon-button:focus::after {
  background-color: var(--color-lightened);
}
.icon-button > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--icon-button-size) / 100 * 65);
  height: calc(var(--icon-button-size) / 100 * 65);
  fill: var(--color-text);
}

dialog {
  background-color: transparent;
  border: none;
  width: 60rem;
  height: 40rem;
}
::backdrop {
  backdrop-filter: blur(20px) brightness(.6);
}
.dialog-content {
  border: var(--color-background-field) solid var(--border-size);
  border-radius: var(--border-radius);
  background-color: var(--color-background);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.pagination {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.pagination > div {
  display: flex;
  background-color: dimgray;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.pagination a {
  padding: 0.3em 0.6em;
}
.pagination a[aria-current="page"] {
  background-color: var(--color-background);
}

form {
  width: 100%;
  max-width: 40rem;
  padding: 0 1rem 0 1rem;
  box-sizing: border-box;
}
fieldset {
  margin-top: 1.5rem;
  border: var(--border-size) dashed var(--color-lightened);
  border-radius: var(--border-radius);
  background-color: var(--color-background-alternative);
}
input,
textarea,
select,
form button,
button[type="submit"] {
  display: block;
  padding: 0.4em;
  border: var(--border-size) solid var(--color-border-field);
  border-radius: calc(var(--border-radius) / 2);
  box-sizing: border-box;
  font-size: medium;
  background-color: var(--color-background-field);
  font-family: inherit;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-muted-text);
}
form input,
form textarea,
form select,
form button,
form p,
button[type="submit"] {
  margin-top: 1rem;
}
input[type="text"],
textarea {
  width: 100%;
}
input[type="range"] {
  margin-top: 0;
  padding: 0;
  width: 100%;
}
button > svg {
  fill: var(--color-text);
}
button[type="submit"] {
  float: right;
  cursor: pointer;
}
button[type="submit"] > svg {
  transition: height 150ms ease-in-out, padding 150ms ease-in-out;
  height: 0;
  padding-left: 0;
}
button[type="submit"]:hover > svg {
  height: 1.3ch;
  padding-left: 0.5ch;
}

.message-frame {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 16rem;
  height: 8rem;
  z-index: 1;
  pointer-events: none;
}
.message-body {
  background-color: transparent;
  overflow-x: hidden;
}
.message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  width: 16rem;
  height: 8rem;
  padding: 1rem;

  box-sizing: border-box;
  border-bottom-left-radius: var(--border-radius);
  border-top: 0.15rem solid;
  border-right: 0.15rem solid;
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem) brightness(70%);

  animation: 5s ease-in forwards message;
}
.info {
  border-color: var(--color-info);
  background-color: var(--color-info-background);
}
.success {
  border-color: var(--color-success);
  background-color: var(--color-success-background);
}
.warn {
  border-color: var(--color-warn);
  background-color: var(--color-warn-background);
}
.error {
  border-color: var(--color-error);
  background-color: var(--color-error-background);
}
.message > h4 {
  text-transform: uppercase;
}
.message > p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
@keyframes message {
  0% {
    transform: translateX(100%);
  }
  7% {
    transform: translateX(0);
  }
  93% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
    visibility: hidden;
  }
}

.recorder {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.recorder .icon > svg {
  fill: var(--color-text);
}
.recorder > .controls {
  bottom: 0;
  width: 100%;
  padding: 0.8rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background-color: var(--color-background-alternative);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.recorder .controls > .icon-main > svg {
  display: none;
}
.recorder[data-status="recording"] > .controls > .icon-main > svg {
  display: block;
}
.recorder > .controls > button:last-child {
  visibility: hidden;
}
.recorder[data-status="playable"] > .controls > button:last-child {
  visibility: visible;
}
.recorder > .main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.recorder > .main > .player {
  visibility: hidden;
  width: 0;
  transition: width 1s ease-in-out, visibility 1s;
  background-color: var(--color-background-alternative);
}
.recorder[data-status="playable"] > .main > .player {
  visibility: visible;
  width: 70%;
}
.recorder > .main > .player .play-stop > .icon {
  visibility: hidden;
}
.recorder[data-status="playable"] > .main > .player .play-stop > .icon {
  visibility: visible;
}
.recorder > .main > .icon-main > svg {
  transition: transform 1s ease-in-out, font-size 1s ease-in-out,
    bottom 0.5s ease-in-out, color 1s ease-out;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -25%);
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 5px 10px black;
}
.recorder[data-status="recording"] > .main > .icon-main > svg {
  bottom: 50%;
  font-size: calc(2.5rem * 5);
  fill: red;
  box-shadow: 0 0 6rem red;
  transform: translate(-50%, 25%);
  animation: 2s ease-in-out infinite alternate center-breathe;
}
@keyframes center-breathe {
  0% {
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    transform: translate(-50%, 25%) scale(0.9);
  }
}
.record {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.record > input[type="file"] {
  position: absolute;
  width: 0;
  opacity: 0;
  z-index: -1;
}
.record p {
  max-width: 50vw;
  overflow: auto;
}

.message-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.message-screen > svg {
  height: 6rem;
  fill: var(--color-text);
}

/* Sections */
section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}
section:first-of-type {
  margin-top: 0;
}

#live {
  background-color: var(--color-background-live);
  --color-transition-from: var(--color-background-live);
  --color-transition-to: var(--color-background);
  width: 100%;
}