@font-face {
  font-family: "OCRAExtended";
  src: url("https://g.webfontfree.com/Code/EOT/e2/bd/e2bdaf99c2028cd98db622ed713117e5.eot");
  src: url("https://g.webfontfree.com/Code/EOT/e2/bd/e2bdaf99c2028cd98db622ed713117e5.eot?#iefix") format("embedded-opentype"), url("https://g.webfontfree.com/Code/WOFF/e2/bd/e2bdaf99c2028cd98db622ed713117e5.woff") format("woff"), url("https://g.webfontfree.com/Code/WOFF2/e2/bd/e2bdaf99c2028cd98db622ed713117e5.woff2") format("woff2"), url("https://g.webfontfree.com/Data/TTF/e2/bd/e2bdaf99c2028cd98db622ed713117e5.ttf") format("truetype"), url("https://g.webfontfree.com/Code/SVG/e2/bd/e2bdaf99c2028cd98db622ed713117e5.svg#OCRAExtended") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html,
body {
  margin: 0;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  font-size: 1.5rem;
  font-family: sans-serif;
}

main {
  color: #fff6d5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  margin: 0;
}

img {
  height: 60px;
  max-width: 60px;
  margin-bottom: 13px;
}

button {
  width: fit-content;
  background-color: #1a1a1a;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5411764706);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s, border-color 0.3s;
}

button:disabled {
  background-color: #333333;
  border-color: #555555;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #444444;
  border-color: #ffffff;
}

input {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5411764706);
  padding: 10px;
  margin: 10px 0;
  /* Space above and below the input */
  border-radius: 5px;
  font-size: 1rem;
  width: 300px;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #ffffff;
  outline: none;
}

ul {
  list-style-type: none;
  /* Remove default bullets */
  padding: 0;
  margin: 0;
}

li, #output {
  color: #ffffff;
  text-align: center;
  font-family: "OCRAExtended", monospace;
  font-size: 13px;
}

#images {
  margin-top: 2px;
}

#input-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 600px;
}

#input-tooltips {
  grid-column: 1/4;
  display: flex;
  flex-direction: column;
}

#input-tooltips > p {
  text-align: left;
  height: 43px;
  margin-block: 1px;
}

#input-fields {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  align-items: start;
}

#input-fields > input {
  width: 70%;
  margin-block: 1px;
}

#input-generator {
  grid-column: 5;
}

#input-generator > button {
  height: 100%;
}

#album {
  background-color: #15120d;
  height: 466px;
  width: 600px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-block: 20px;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

#left-text,
#right-text {
  width: 24px;
  text-align: center;
  align-content: center;
  writing-mode: vertical-rl;
  font-family: "OCRAExtended", monospace;
  font-size: 13px;
  color: #ffffff;
}

#left-text {
  border-right: 1px dotted rgba(255, 255, 255, 0.5411764706);
}

#left-text > p {
  transform: scale(-1, -1);
}

#right-text {
  border-left: 0.5px dotted rgba(255, 255, 255, 0.5411764706);
}

#images {
  width: 95px;
}

#main {
  width: 457px;
  height: 466px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  justify-content: center;
}

#main-top {
  grid-row: 1/5;
  height: 100%;
  margin-top: -8px;
}

#main-bottom {
  grid-row: 6;
}

#main-bottom > li {
  margin-top: -2px;
}

.text-white {
  color: rgba(255, 255, 255, 0.7450980392);
}

.text-red {
  color: #db2232;
}

.text-green {
  color: #6abe87;
}

.text-yellow {
  color: #d3c945;
}

.text-title {
  font-size: 32px;
}

.text-subtitle {
  font-size: 18px;
}

.text-author {
  font-size: 14px;
}

.numbered-list {
  counter-reset: song;
  /* Initialize the counter */
  list-style: none;
  padding: 0;
  margin: 0;
}

.numbered-list li {
  counter-increment: song;
  /* Increment the counter for each list item */
  position: relative;
  min-height: 17.3px;
  max-height: 17.3px;
}

.numbered-list li::before {
  content: counter(song, decimal-leading-zero) " - ";
  /* Format the counter with leading zeros and a dash */
}

.user-input {
  margin: 5px;
  width: fit-content;
}

#output {
  background-color: #15120d;
  width: 600px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-block: 20px;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}