.handle {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid black;
  background-color: gray;
  box-shadow: 1px 1px gray;
  margin: 5px;
  cursor: pointer;
  border-radius: 25px;
  text-color: gray;
}

.letter {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 5px;
  border: 1px dotted gray;
  background-color: lightyellow;
  cursor: pointer;
}

.joinwords {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  margin: 5px;
  border-radius: 25px;
  text-color: black;
  background-color: gray;
}

.word {
  background-color: white;
  border: 1px solid lightgray;
  padding: 3px;
  display: table-cell;
  margin: 3px;
  cursor: pointer;
  box-shadow: 2px 1px gray;
}

.rhyme-plus {
  color: Gray;
  box-shadow: 1px 1px white;
}

.refrain {
  background-color: lightyellow!important;
  border: 2px solid black!important;
}

.stanza {
  border: 2px solid gray;
  background-color: gainsboro;
  padding: 0px;
  margin-top: 5px;
}

.line {
  display: flex;
  flex-wrap: wrap;
}

.sline{
  display: flex;
  flex-wrap: wrap;
}

.settings {
  border: 2px solid gray;
  background-color: gainsboro;
  padding: 0px;
  margin-top: 5px;

}

#main {
  padding: 10px;
  display: flex;
}

.panel {
  display: table-cell;
  margin-right: 20px;
  padding: 10px;
  border: 2px dotted gray;
  background-color: lightcoral;
  border-radius: 10px;
  box-shadow: 2px 4px gray;
  resize: both;
  overflow: auto;

}

.menu {
  display: table-cell;
  position: fixed;
  right: 10;
  top: 10;
  padding: 10px;
  border: 2px dotted gray;
  background-color: lightcoral;
  border-radius: 10px;
  box-shadow: 2px 4px gray;
  resize: both;
  overflow: auto;

}

.meta {
  background-color: lightgray;
}

 /* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

/* The search field */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 
.comment {
  background-color: black;
  color: limegreen;
  padding: 5px;
}
.comment::before {
  content: '# ';
  color: limegreen;
  font-weight: bold;
}

.flagg {
  padding: 0px;
  margin: 3px;
  display: table-cell;
  cursor: pointer;
  height: 30px;
  width: 52px;
}

#results {
  
  margin: 10px;
  padding: 10px;
  background-color: lavender;
  display: inline-block;
}

h1 {
  margin: 10px;
}