body {
  font-family: "Roboto", sans-serif;
  background-color: #0f0e11;
  color: #dad8de;
}

#header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 5px;
}

#headerTextBox {
  order: 1;
  display: flex;
  justify-content: center;
  width: 50%;
}

#headerTextBox:hover {
  cursor: pointer;
}

#headerImageBox {
  order: 2;
  display: flex;
  justify-content: center;
  width: 50%;
}

#header h2 {
  margin-left: 50%;
  margin-top: 4px;
}

#header img {
  height: 140.5px;
  width: 250px;
  margin-right: 50%;
  margin-top: 4px;
}

.form {
  width: 75%;
  margin: 0 auto 10px auto;
  font-size: 18px;
}

#addButton,
#deleteButton,
#clearCacheButton,
#mobileButton,
#iframeButton,
#showIframes,
#hideIframes,
#add,
#delete,
#deleteAll,
#homeButton {
  background-color: #0f0e11;
  color: #dad8de;
  border: 2px solid #dad8de;
  cursor: pointer;
  margin: 5px;
}

#addButton:hover,
#deleteButton:hover,
#clearCacheButton:hover,
#mobileButton:hover,
#iframeButton:hover,
#showIframes:hover,
#hideIframes:hover,
#add:hover,
#delete:hover,
#deleteAll:hover,
#homeButton:hover {
  background-color: #dad8de;
  color: #0f0e11;
}

#addSettings,
#deleteSettings {
  display: none;
}

input {
  padding: 5px 10px;
  font-size: 14px;
  color: #0f0e11;
}

button {
  font-size: 14px;
  padding: 5px 10px;
}

#cart {
  display: flex;
  justify-content: center;
  border-top: 5px solid #0f0e11;
  border-bottom: 5px solid #0f0e11;
}

.column {
  width: 16%;
  padding: 25px 0px;
}

#images img {
  display: block;
  height: 100px;
  width: auto;
  margin: 20px;
}

#songs p {
  font-size: 14px;
  height: 100px;
  margin: 20px;
}

#artists p {
  font-size: 14px;
  height: 100px;
  margin: 20px;
}

#lengths p {
  font-size: 14px;
  height: 100px;
  margin: 20px;
  text-align: left;
}

#links iframe {
  display: block;
  font-size: 14px;
  height: 100px;
  font-weight: bold;
  margin: 20px;
}

#mobileLinks a {
  display: block;
  font-size: 14px;
  height: 100px;
  font-weight: bold;
  margin: 20px;
}

#footer {
  display: flex;
  justify-content: flex-end;
  border-top: 5px solid #0f0e11;
  border-bottom: 10px solid #0f0e11;
  font-size: 14px;
  margin: 20px;
  margin-right: 300px;
}

#top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: #dad8de;
  color: #0f0e11;
  cursor: pointer;
  padding: 15px;
}

#top:hover {
  background-color: gray;
  color: white;
}