* {
  /* border:1px solid teal; */
  /* background-color: ghostwhite; */
}
:root {
  --mustard:rgb(167, 172, 40);
  --verdantgreen:rgb(68, 163, 45);
  --darknavy:rgb(30, 48, 45);
  --greenblue:rgb(41, 140, 97);
  --whiteblue:rgb(225, 247, 247);
}
body{
  margin:0;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*page stuff*/
.pageWrapper {
  max-width:1100px;
  margin: 0 auto;
  font-family: 'Cormorant Unicase', serif;
}
h1,h2,h3 {
  /* padding:12px; */
  background-color: inherit;
  line-height: normal;
  text-align: center;
  font-family: 'Cormorant Unicase', serif;
}
img{
  position:relative;
}


/* search / submit*/
.searchContainer {
  position: sticky;
  width:100%;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  padding:10px;
  border:3px solid teal;
  /* border-radius: 20px; */
  margin-bottom: 10px;
  background-color: teal;

}
.mainInput {
  width:60%;
  height:1.3em;
  font-size: 1.3em;
}
.input {
  /* background-color: steelblue;
  color: ghostwhite; */
  margin:3px;
}
#submit {
  width:8%;
  padding:5px;
  vertical-align: middle;
  border:1px solid teal;
  font-family: 'Cormorant Unicase', serif;
  border-radius: 10px;
  background-color: mediumaquamarine;
}
.advancedSearch {
  display:none;
  background-color: transparent;
  margin:1px;
  /* width:13.38%; */
}
nav{
  width:100%;
  margin:0;
}
.mobile{
  display: none;
}
ul{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  background-color: teal;
  margin-bottom:0;

}
li {
  color:ghostwhite;
  list-style: none;
  background-color: transparent;
  padding:20px;
  margin-bottom: 0;
}
form{
  background: transparent;
  margin:0 auto;
}
span {
  background: transparent;
}
div{
  font-weight: lighter;
}
button{
  font-family: 'Cormorant Unicase', serif;
  font-size: 1.11em;
  background-color:teal ;
  color:ghostwhite;
  border:1px solid transparent;
}
.signBtn {
  font-size: .8em;
  position:absolute;
  top:0;
  right:20px;
}
.localFavs {
  font-size: .8em;
  position:absolute;
  top:20px;
  right:20px;
}
.signIn {
  display: none;
  position:absolute;
  top:5px;
  right:20px;
}



/*New div and book images*/
.resultsContainer {
  /* position:relative; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.showHide {
  display: none;
}


.bookshelf{
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  position: sticky;
  top:0;
  left:0;

  overflow: auto;
  padding:20px ;
  box-shadow: 0 2px 2px rgba(0,0,0,.7);
  max-height: 40vh;
  width: 90%;
  /* border:4px solid teal; */
  border-radius: 10px;
  /* z-index:3; */
}

.book {
  flex: 1 1 150px;
  position:relative;
  margin:0 10px;
  padding:0 11px 26px ;
  max-width:132px;
  background-color: transparent;
  /* border:1px solid brown; */
  /* z-index:1; */
  cursor: grab;

}

.newBooks{
  margin:20px auto ;
  display: flex;
  flex-grow: 1;
  /* flex-direction: row; */
  flex-flow: row wrap;
  /* overflow: auto; */
  padding:20px;
  /* border:4px solid teal; */

}
.saveContainer {
  display:none;
}
.booksToSave {
  display:flex;
  flex-grow: 1;
  padding:20px;
  height:60vh;

}


/*modal descriptor*/
.modal {

	display: block;
	background-color: rgba(0,0,0,.6);
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:3;
	overflow: auto;
}

.modal-box {
  transition: opacity 2s ;

  background-color: ghostwhite;
  opacity: 1;
  width:50vw;
  position: relative;
  border:2px solid teal;
	border-radius: 20px;
	margin:20% auto;
	padding:2%;
	line-height: 120%;
	box-shadow:0 2px 2px rgba(0,0,0,0.2);
	/* font-family: 'Arial'; */
}
.big-modal {
  display: block;
  background-color: rgba(0,0,0,.7);
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:3;
}
.fight-modal {
  transition-duration: 5s;
  transition-timing-function:linear;
  background-color: var(--whiteblue);
  position:relative;
  margin:5% auto;
  width:90%;
  height:90%;

}
.fighter-div {
  display: inline-block;
  width:18%;
  height:18%;
}

.close-modal {
  background-color: rgba(0,0,0,0.2);
  color:ghostwhite;
  position:absolute;
  top:0;
  right:0;

}

/*buttons*/
.cornerButton {
  border-radius: 10px;
  margin:3px 3px;
  background-color: mediumaquamarine;
  color:ghostwhite;
  position:absolute;
  top:0;
  right:20;
}

.favorite{
  border-radius: 50%;
  background-color: transparent;
  display:none;
  background-image:url(../images/black-star-icon-isolated-object-260nw-715403857.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: teal;
  width:21px;
  height:22px;
  border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

}

.cornerButton:hover{
  background-color: steelblue;
}
li:hover{
  border-bottom: 2px solid ghostwhite;
}
input:focus {
  outline:none;
  background-color: var(--whiteblue);
}
.light{
  background-color:thistle;
}
.winnerdiv {
  margin:7% auto;
  width:50%;
  height:50%;
}
.tooltip .tooltiptext{
  visibility: hidden;
  /* position:absolute; */
  float:left;
  color:var(--darknavy);
  background-color: thistle;
  z-index:2;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}



/*************************
animation
*************************/



button:focus {
  outline:none;
  animation: rotate-center 0.6s ease-in-out both;
}
/* .favShow:cl{
  background-color: thistle;
} */

.spinAround {
  animation-name:winner-lap;
  animation-duration:5s;
  animation-timing-function: ease-in-out;


}
.largeLittle{
  animation-name:largerSmaller;
  animation-duration:4s;
  animation-timing-function: ease-in-out;
}


@keyframes winner-lap {
  0% {transform:translateX(10px) rotate(0); }


  100%{transform:translateY(600px) rotate(1080deg);}
}



@keyframes rotate-center {
  0% {transform:rotate(0);}
  37%{transform:rotate(-45deg)}
  75%{transform:rotate(45deg);}
  100% {transform:rotate(0); }

}


@media (max-width:375px ) {
  .pageWrapper{
    max-width: 375px;
  }
  .searchContainer{
    position:sticky;

  }
  ul {
    flex-direction: row;
  }
  nav {
    display:none;
  }
  .mobile{
    display:block;
    flex-grow: 1;
  }
  button {
    border-top:.5px solid ghostwhite;
  }
  .signBtn, .localFavs {
    display: none;
  }

  .tooltiptext {
    display: none;
  }

  #submit {
    font-size: .2em;
  }
  /* .saveShow{
    display:none;
  } */
  .modal-box {
    width:85%;
  }
  button:hover {

  }

}

@media (max-width: 768px) {
  .pageWrapper{
    max-width: 767px;
  }
  .signBtn{
    position:absolute;
    top:15px;
    right:50px;
  }
  .localFavs {
    position: absolute;
    top:30px;
    right:50px;
  }
  .big-modal {
    width:100vw;
  }
}