/* lyrics.css */
 @import url(https://db.onlinewebfonts.com/c/ef6bdf5ef216552c7e9869841e891ca0?family=Arial+Rounded+MT+Bold); 
 @import url(https://db.onlinewebfonts.com/c/af37a17ad53d1410778d941a0951508b?family=Arial+Rounded+MT+Std); 
 
body {
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  margin: 0;
  padding: 0;
  margin-top: 75px;
  margin-bottom: 25px;

  display: flex;
  flex-direction: column;   /* stack items vertically */
  justify-content: flex-start;  /* keep content from floating in middle */
  
  background: linear-gradient(to bottom, #fefeff, #ffd9d9);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  
  font-size: 20px; 
  /*  font-size: clamp(20px, 2vw, 30px); */ 
}

pre {
  font-family: 'Arial Rounded MT Std', Arial, sans-serif;
  width: 85%;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(35px, 2vw, 45px); 
  text-align: left;

  margin: 0 auto;             /* <-- centers the pre horizontally */
  
  -webkit-text-size-adjust: none; /*stops text size changing automaticall on mobile */
  text-size-adjust: none;
}


.title {
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  font-size: 150%; /* increases size by 25% relative to parent */
}

hr {
  width: 90%;
  margin: auto;
}

#toggleLink {
  align-self: flex-start;                  /* prevent stretching */
  display: inline-block;                   /* hug the text */
  margin-left: 7.5%;
  font-family: 'Arial Rounded MT Std', Arial, sans-serif;
  font-size: clamp(25px, 2vw, 35px); 
  color: black; 
  margin-top: 1em;  
  margin-bottom: 2em;

  padding: 4px 8px;                        /* space inside the box */
  border: 2px solid;               
  border-radius: 8px;                      /* rounded corners */
  border-color: black;
  background-color: transparent;           
  text-decoration: none;                   
}

a:not(:has(img)) {
  align-self: flex-start;                  /* prevent stretching */
  display: inline-block;                   /* hug the text */
  /* margin-left: 7.5%; */
  font-family: 'Arial Rounded MT Std', Arial, sans-serif;
  font-size: clamp(25px, 2vw, 35px); 
  color: black; 
  margin-top: 1em;  
  margin-bottom: 2em;

  padding: 4px 8px;                        /* space inside the box */
  border: 2px solid;               
  border-radius: 8px;                      /* rounded corners */
  border-color: black;
  background-color: transparent;           
  text-decoration: none;                   
}


/*

1
Add to the head section of web page.
<link href="https://db.onlinewebfonts.com/c/af37a17ad53d1410778d941a0951508b?family=Arial+Rounded+MT+Std" rel="stylesheet">
or
Using @import CSS directive, put the following line in add to your css file.(http | https)
@import url(https://db.onlinewebfonts.com/c/af37a17ad53d1410778d941a0951508b?family=Arial+Rounded+MT+Std);
or
Use font-face declaration Fonts.(http | https)

@font-face {
    font-family: "Arial Rounded MT Std";
    src: url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.eot");
    src: url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/af37a17ad53d1410778d941a0951508b.svg#Arial Rounded MT Std")format("svg");
}

2
CSS rules to specify fonts
font-family: "Arial Rounded MT Std"; 

*/

	h2 {
	  align-self: flex-start; /* overrides body's align-items */
	  color: #f5f5e0;                   /* text color inside */
	  -webkit-text-stroke: .3px black; /* outline for WebKit browsers */
	  text-stroke: 1px black;         /* standard property (limited support) */
	  text-align: left;             
	  text-shadow: 1px 1px 0.1px black;
	  margin-top: 5%;
	  margin-left: 7.5%;
	  font-size: 200%;
 
		}
		
	h2 .subtitle {
	  display: block;          /* subtitle on its own line */
	  color: black;          /* optional, can set different color */
	  -webkit-text-stroke: 0; /* remove outline */
	  text-stroke: 0;          /* remove outline */
	  text-shadow: none;       /* remove shadow */
	  font-size: clamp(20px, 2vw, 30px);         /* override size if desired */
	}