@charset "utf-8";

* {
  font-family: "ubuntu", "ubuntu-regular", sans-serif;
}

/* Reset some default styles to ensure consistency across browsers */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  color: #333;
  background-color: #f1f1f1;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

main {
  background-color: #fff;
  padding: 20px;

  flex: 1;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}

main input {
  font-size: 1.2em;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

footer section {
  display: flex;
  gap: 3em;
}

button {
  font-size: 1.2em;
}

.player {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.1em;
}