body {

  background-color: cornflowerblue;
  background-image: url('files/pictures/powershot 7-14 626_Fotor_ inverted.jpeg');
  background-position: -50px -50px ;
  background-size: contain;
  background-attachment: fixed;
  /* background-repeat: no-repeat; */
  background-size: cover;
  color: rgb(92, 34, 134);

}
ul {
  list-style: none;
  display: relative;
}
li {
  display: inline;
  position: static;
}
h2 {
  display: inline;
  display: none;
}
h3 {
  clear: left;

  border-radius: 6px;
  margin-left: 10px;

  padding: 7px;
  font-family: Fantasy;
}
p {
  
}

/* -------------------------------
    styles for the links
  ------------------------------ */
a {
  margin: 10px;
  display: block;
}

/* -------------------------------
    styles for the containers
  ------------------------------ */

.header {

  display: inline-block;
  color: rgb(92, 34, 134);
  text-shadow: 3px 7px 6px RGB(255, 20, 147), 0px 0px 2px darkviolet;
  background-color: RGBa(0, 191, 255, 0.8);
  border: 0px solid mediumblue;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(77, 77, 0, 0.7), 0 6px 20px 6px rgba(100, 20, 211, 0.6);

  padding: 3px 20px;
  font-family: Fantasy;

}
.container {
  margin top: 90px;
  display: inline-block;
  clear: left;
  border: 0px solid mediumblue;
  border-radius: 6px;
  margin-left: 10px;
  background-color: RGBa(0, 191, 255, 0.8);
  box-shadow: 0 4px 8px 0 rgba(77, 77, 0, 0.7), 0 6px 20px 6px rgba(100, 20, 211, 0.6);
  padding: 7px 20px;

}
#hueFilter {
  opacity: .9;
  max-width: 300px;
  filter: hue-rotate(250deg) saturate(300%);
}

.bioPic {
  max-width: 300px;
  display: block;
}
.bioPic img {
  max-width: 300px;
  display: none;
}
.bioPic img:first-of-type {
  max-width: 300px;
  display: inline;
}
.bioPic p {
  display: none;
}
.bioPic p:first-of-type {
  display: inline;
}
/* -------------------------------
    styles for the nav buttons
  ------------------------------ */
.navPic {
  /* overflow: hidden; */
  top: 50%;
  border-radius: 100%;
  filter: hue-rotate(25) saturate(300%);
  box-shadow: 0 4px 8px 0 rgba(77, 77, 0, 0.7), 0 6px 20px 6px rgba(100, 20, 211, 0.6);
  /* float: left; */
  height: 50px;
  width: 50px;
  border: 0;
  margin: 2px;
  filter: saturate(300%);

}
.focus {
  border-radius: 100%;
  box-shadow: 0 6px 10px 0 rgba(77, 77, 0, 0.7), 0 8px 24px 6px rgba(100, 20, 211, 0.6);
  height: 70px;
  width: 70px;
  border: 0;
  /* margin: 0 auto; */
}
.gameBoard {
  color: rgb(92, 34, 134);


  display: inline-block;
  background-color: RGBa(100, 130, 255, 0.8);
  border: 0px solid mediumblue;
  border-radius: 6px;
  margin-top: 17px;
  margin-right: 13px;
  margin-bottom: 17px;
  margin-left: 13px;
  box-shadow: 0 4px 8px 0 rgba(50, 77, 0, 0.7) inset , 0 6px 20px 6px rgba(48, 0, 111, 0.6) ;
  padding: 13px;


}
.redGame {
  background-color: RGBa(255, 70, 90, 0.7);
}
.greenGame {
  background-color: RGBa(160, 255, 10, 0.6);
}
.yellowGame {
    background-color: RGBa(255, 255, 0, 0.6);
}
.leftBtn{
  display: inline;
}
.rightBtn{
  display: inline;
}
.lnr-arrow-left-circle { /*These buttons came from https://linearicons.com/free */
  color: RGB(255, 20, 147);
  font-size: 45px;
  display: inline;
  align-self: center;
}
.lnr-arrow-right-circle {  /*These buttons came from https://linearicons.com/free */
  color: RGB(255, 20, 147);
  font-size: 45px;
  display: inline;
  align-self: center;
}
.player {
  color: white;
  background-color: rgba(92, 34, 134, .8);
  box-shadow: 0 4px 8px 0 rgba(200, 0, 190, 0.7), 0 6px 20px 6px rgba(100, 20, 211, 0.6);
  border-radius: 6px;
}
.playButton {
  background-color: RGBa(160, 255, 10, 0.6);
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(200, 0, 190, 0.7), 0 6px 20px 6px rgba(100, 20, 211, 0.6);
  border-radius: 6px;
  padding: 5px;
  margin: 7px;

}
::placeholder {
  color: rgba(200, 0, 190, 0.8)
}
.playText {
  color: rgb(92, 34, 134);
  background-color: RGBa(0, 191, 255, 0.8);
  display: inline-block;
  border-radius: 6px;
  padding: 5px;
  margin-bottom: 10px;
}

























//