/* header controls */
header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0px;
  border-radius: 5px;
  background-color: Peru;
  float: left;
  overflow: hidden;
  font-size: 250%;
  text-decoration: none;
}
.header-right a {
  color: green;
  transition: color .5s, background-color 2s;
}
.header-right {
  float: right;
  font-family: "Lucida Handwriting", monospace;
}
.header-right a:hover {
  color: red;
  background-color: grey;
}
.fa fa-bars {
  font-size:36px;
}
.header-right .icon {
	display: none;
}
@media screen and (max-width: 1030px) {
	.header-right a:not(:first-child) {display: none;}
	.header-right a.icon {
		float: right;
		display: block;
	}
}
@media screen and (max-width: 1030px) {
	.header-right.responsive {position: relative;}
	.header-right.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.header-right.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/*primary element controls*/
body {
  background-image: url(https://backyard-chickens-101.neocities.org/Images/grass-field.jpg);
  color: black;
  font-family: Verdana;
}
body:has(nav) {
  /*height: 100%;
  overflow-y: hidden; THE BODY IS NOT SUPPOSED TO SCROLL, AND THE SIDEBAR IS, I'M STILL FIXING THIS*/ 
}
.main {
  margin: auto;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  width: 90%;
  border: 10px;
  font-family: Georgia;
}
h1 {
  text-decoration: underline;
}
hr {
  height: 2px;
  background-color: Peru;
}
img {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  padding: 3px;
}

/*specific div controls*/
nav {
  float: left;
  overflow: hidden;
  overflow-y: scroll;
  width: 30%;
  height: 100%;
  object-fit: cover;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
} 
.breed {
  float: left;
  font-family: Georgia;
  color: rgba(255, 255, 255, 0);
}
.breed:hover {
  transition: .9s ease;
  color: rgba(255, 255, 255, 1);
}
.breed img:hover {
  transition: .9s ease;
  box-shadow: Peru 0px 20px 30px -10px;
}
.bottom-middle {
  position: relative;  
  font-weight: bold;
  text-decoration: underline;
  bottom: 0;
}
.red { /*use "span" not "div" to highlight red text*/
  color: red;
}
/*all table elements have black borders*/
table, th, td {
    border: 2px black;
    font-weight: bold; 
    font-size: 25px;
}
/*the odd rows are brown*/
tr:nth-child(odd) {
  background: Peru;
}
    
/*the even rows are pink*/
tr:nth-child(even) {
  background: pink;
}

/*transitions and animations courtesy of Velda Shaby*/
.fling-minislide {
  position: relative;
  overflow: hidden;
	width: 600px; 
	height: 570px; 
}
.fling-minislide img {
  position: absolute;
  animation: fling-minislide 20s infinite;
	opacity: 0; 
	width: 100%; 
	height: auto;
}
@keyframes fling-minislide {
  25%{opacity:1;} 40%{opacity:0;}
}
.fling-minislide img:nth-child(4){
  animation-delay:0s;
}
.fling-minislide img:nth-child(3){
  animation-delay:5s;
}
.fling-minislide img:nth-child(2){
  animation-delay:10s;
}
.fling-minislide img:nth-child(1){
  animation-delay:15s;
}

/* IN-PROGRESS EXPERIMENTS ARE DOWN HERE
.nav_wrap {
  position: relative;
}
.nav_img_caption {
  position: absolute;
  text-align: center;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  transition: opacity .2s, visibility .2s;
}
.nav_wrap:hover .nav_img_caption {
  visibility: visible;
  opacity: 1;
} */


/*.center {
  margin: auto;
  display: flex;
}*/