/* css for Jonathan Dell.com 
   Written by: Jonathan Dell */
header{
	height: 80px;
	width: 100%;
	background-color: silver;	
	border-bottom: 1px solid black;
}
#logo {
	margin-top: -20px;
	transition: z-index 2s, width 2s, height 2s, background-color 1s, border 2s;
}
#logo:hover {
	z-index: 3;
	position: absolute;
	width: 200px;
	height: 180px;
	background-color: silver;
	border: 2px solid black;
}
/* Start nav bar  */
nav {
	float: right;
	padding: 30px 20px 0px 0px;
}
nav a {
	color: #aaffff;
	text-decoration: none;
}
nav a:hover {
	color: black;
}
nav li, nav ul {
	display: inline;
	padding: 5px;
	background-color:blue;
}
nav ul {
	border-radius: 5px;
	padding: 10px;
} 
/* Start body  */
body {
	overflow-x: hidden;
}
/*button {
	color: #aaffff;
	background-color: blue;
}*/
/* <span class="samplewebsite"><img src="images/samplepage.png" alt="sample website" width="100%" height="100%"></span> */
.samplewebsite {
	z-index: 3;
	position: absolute;
	margin: 0;
	padding: 0;
	opacity: 0.5;
	margin-top: -100px;
	pointer-events: none;
}
.rainbow-button {
  width: 100px;
  height: 40px;
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size: 16px;
  font-weight:bold;
}
.rainbow-button:after {
  content:attr(alt);
  width: 100px;
  height: 50px;
  align-items:center;
  justify-content:center;
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}
input[type="text"]{
	box-sizing: border-box;
	max-width: 95%;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}

.bgc-silver {
	background-color: silver;
}
.bgc-lightblue {
	background-color: lightblue;
}
ul {
	list-style: none;
}
.authorspaneven {
	text-shadow: 2px 2px #33FF3F;
	background-color: rgba(51,225,25,0.6);
	padding: 2px 2px;
	font-size: 1.5em;
}
.authorspanodd {
	text-shadow: 2px 2px #33FF3F;
	background-color: rgba(51,53,255,0.9);
	padding: 2px 2px;
	font-size: 1.5em;
}
.myform {
	border: 1px solid black;
	max-width: 50%;
	margin: auto;
}
textarea {
	resize: none;
	box-sizing: border-box;
	max-width: 95%;
}
/* Mobile devices   */
@media (max-width: 500px){
	header img {
		width: 80px;
	}
	img {
		width: 100%;
	}