#error {
  color: red;
}

html,
body {
  height: 100%;
  margin: 0px;
}

#controller {
  display: flex;
  padding: 8px;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
}

#controller .column {
  flex: 1;
  overflow: auto;
}

.column {
  display: flex;
  flex-direction: column;
}

form.vertical,
form.tall {
  display: flex;
  flex-direction: column;
}
form.tall {
  flex: 1;
}

.button-row {
  display: flex;
}
.button-row form.wide {
  display: flex;
  flex: 2;
}
.button-row select {
  flex: 1;
}
.button-row input[type="text"] {
  flex: 2;
}

td input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
textarea {
  flex: 1;
}
select[size] {
  flex: 1;
}

#song-list,
#playlist {
  width: 100%;
  height: auto;
}

.preview {
  aspect-ratio: 16/9;
  box-sizing: border-box;
  border: 1px solid red;
}

.slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flow-root;
  contain: strict;
  container-type: size;
}

.slide p,
.slide h1,
.slide h2 {
  margin-left: 3cqi;
  margin-right: 1cqi;
  margin-top: 2cqi;
}

.slide h1,
.slide h2 {
  text-align: center;
}

.slide p.credit {
  text-align: right;
  font-style: italic;
}

h1,
h2 {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}