style.css

@font-face {
  font-family: "My Custom Font";
  src: url(fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf) format("truetype");
}

body { 
  font-family: 'Roboto Mono', monospace; 
}

#title h1{
  color: red;
  visibility: collapse;
}

p {
  margin-bottom: 2rem;
}


.chorus {
	padding-top: 0px;
	padding-left: 5px;
  margin-left: -5px; /* this realigns the left border with the rest of the text */
	padding-bottom: 5px;
	border-radius: 5px;
	margin-bottom: 2rem;
  border: 2px solid darkgray;
	border-top: 20px solid darkgray;
}


/*
Selects all .chorus elements without a "data-options" attribute 
and set's the content to "Chorus". 
*/
:not([data-options]).chorus::before{
  content: "Chorus";
}

/*
Selects all .chorus elements with a "data-options" attribute 
and set's the content to that attribute
*/
[data-options].chorus::before{
  content: attr(data-options);
}

/*
Styling the content which is set above
*/
.chorus::before {
  position: relative;
  top: -16px;
  color: white;
}

/*remove some a big gap after the title*/
.chorus>:first-child{
  margin-top: -10px;
}

/*remove a big gap after the last p*/
.chorus>:last-child{
  margin-bottom: 0rem;
}

.tab {
  font-size: smaller;
}