:root {
  --brdr-radius: 16px;
  --top-bottom-margin: 20px;
}

html
{
  margin: auto;
  width: 96vw;
}

header {
  text-align: center;
}

main {
  padding: 10px;
  border-style: solid;
  border-radius: var(--brdr-radius);
}

section p {
  text-align: justify;
}

strong {
  color:red;
}

hr {
  color: lightgrey;
}

textarea {
  white-space: pre;
  margin: var(--top-bottom-margin) 0 var(--top-bottom-margin) 0;
  width: 99%;
  height: 20rem;
  resize: none;
  border-style: solid;
  border-radius: var(--brdr-radius);
}

button {
  height: 6rem;
  border-style: solid;
  border-radius: var(--brdr-radius);
  margin-bottom: var(--top-bottom-margin);
  font-size: xx-large;
  border-width: 2px;
  border-color: black;
}

#buttons {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

#musicTitle {
  margin-right: 1rem;
}

@media screen and (min-width: 768px){
  html {
    max-width: 760px;
  }

  #buttons {
    flex-direction: row;
  }

  button {
    width: 10rem;
    height: 3rem;
    font-size: large;
  }
}