body {
  background: rgb(75,143,224);
  background: radial-gradient(circle, rgba(75,143,224,1) 0%, rgba(153,196,255,1) 52%, rgba(75,143,224,1) 100%);
  color: white;
  font-family: 'Merriweather';
}

a {
  color: white;
  text-decoration: none;
}

.titleheader {
  width: 100%;
  max-width: 800px;
  margin: auto;
}

.largetext {
  font-size: 1.5em;
  color: white;
  font-family: 'Merriweather';
}

.borderline {
  width: 100%;
  height: 4px;
}

.vidmodal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 0px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.modaliframe {
	width: 40%;
	margin: auto;
	background-color: rgba(140,140,140,1);
	padding: 20px;
	border-style: solid;
	border-color: black;
	border-width: 2px;
	border-radius: 2px;
}

.vidmodalFrame {
	width: 90%;
  max-width: 800px;
	margin: auto;
  margin-top: 40px;
	background-color: rgba(60,60,60,0.8);
	padding: 8px;
	border-style: solid;
	border-color: black;
	border-width: 2px;
	border-radius: 4px;
}

.minimodal {
  width: 90%;
  max-width: 800px;
	margin: auto;
  margin-top: 40px;
	background-color: rgba(60,60,60,0.8);
	padding: 20px;
	border-style: solid;
	border-color: black;
	border-width: 2px;
	border-radius: 4px;
}

.minimodaltext {
  font-size: 1.35em;
  text-align: center;
}

.closemodal {
  text-align: center;
  font-size: 1.5em;
  padding: 4px;
  color: black;
  font-family: 'Merriweather';
  float: right;
  border-radius: 4px;
  background-color: lightgray;
  display: inline-block;
}

.closemodal:hover {
  cursor: pointer;
  background-color: gray;
}

.selectable {
  transition: .5s;
}

.selectable:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: .5s;
}

.inputbox {
  width: 400px;
  height: 110px;
  font-size: 3.2em;
  color: black;
  text-align: center;
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 2px;
}

.selectabletext {
  color: #1961b8;
  font-weight: bold;
}

.bluebox {
  border-radius: 8px;
  border-style: none;
  background: rgb(66,133,214);
  background: linear-gradient(180deg, rgba(66,133,214,1) 0%, rgba(25,97,184,1) 100%);
  padding: 12px;
}

.basicbutton {
  padding: 10px;
  display: inline;
  font-size: 1.5em;
  border-style: solid;
  border-color: white;
  border-width: 2px;
  transition: .3s;
}

.basicbutton:hover {
  cursor: pointer;
  font-weight: bold;
  transition: .3s;
}

.episodebox {
  margin: auto;
  width: 95%;
  max-width: 800px;
}
