input[type="radio"] {
  position: relative;
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid white;
  border-radius: 50%;
  outline: none;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"]:checked {
  background-color: aqua;
}



.myButton {
	box-shadow: 0px 0px 0px 2px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:10px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:6px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}


table, th, td {
  border: none;
  border-collapse: collapse;
  padding-left:0px;
  padding-right:0px;
}

div {
  border-style: none;
  line-height: 1.6;
  margin:auto;
}
.pageTitle {
  font-weight: bold;
  background-color:aliceblue;
  border:2px solid black;
  border-radius: 5px;
  font-size: 32px;
  text-align: center
}


.songTitle {
  /*top  right bottom left*/
  font-weight: bold;
  font-size: 24px;
  padding: 15px 10px  10px    10px;
  color: white;
  border:2px solid black;
  border-radius: 5px;
  background-color:#0E5D7B;
}

.search {
         /*top  right bottom left*/
  padding: 15px 10px  0px    10px;
  color: white;
  border:2px solid black;
  border-radius: 5px;
  background-color:#0E5D7B;
}

.results {
  border:2px solid black;
  border-radius: 5px;
  margin-top: 5px;
  background: #0E5D7B linear-gradient(white, lightblue);
}

.songbody {
  padding: 10px;
  border:2px solid black;
  border-radius: 5px;
  margin-top: 5px;
  background: #0E5D7B linear-gradient(white, lightblue);
  font-family: monospace;
}

a:link {
  color:black;
  text-decoration: none;
}

a:visited {
  color:black;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

body {
  background-color: whitesmoke;
}

@media (min-width:0px) {
  .page {
      float: normal;
      width: 95%;
  }
  .category1:hover {
      cursor: pointer;
  }
  .category1 {
      font-size: 18px;
      display: flex;
  }
  .category2:hover {
      cursor: pointer;
  }
  .category2 {
      font-size: 18px;
      display: inline;
      float:   left;
  }
}
@media (min-width:1025px) {
  .page {
      float: normal;
      width: 50%;
  }
  .category {
      display: flex;
  }
}