body {
  background-image: url(../img/408446948.jpg);
  border-radius: 20px;
  height: auto;
  margin: auto;
  background-size: cover;
  backdrop-filter:unset;
  background-repeat: no-repeat;
  background-color: rgb(149,170,20);
}

header h1 {
  font-family: 'Fredoka One';
  font-size: 350%;
  right: 40%;
  text-align: center;
  padding: 4rem;
  margin: auto;
  color:rgba(255, 105, 10 , 1);
  text-shadow: 2px 2px 5px rgb(59, 59, 59);
  width: 35rem;
  height: 3rem;
}

h2 {
  font-family: 'Nabla';
  font-size: 3rem;
  letter-spacing: 6rem;
  border: 10px dotted transparent;
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
  text-align: center;
  left: 4%;
  border-bottom: 1rem;
  width: auto;
}

.score h2 {
  margin: 5rem auto;
  font-size: 2rem;
  text-align: center;
  font-family: 'Fredoka One';
  color: rgb(255, 247, 0);
  text-shadow: 2px 1.5px 4px black;
  letter-spacing: 1rem;
}

a:link {
  background-color: transparent;
  text-decoration: none;
  
}

h3 {
  font-family: 'Fredoka One';
  font-size: 1rem;
  letter-spacing: .3rem;
  color:rgb(255, 247, 0);
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding-top: 3rem;
  position: relative;
  text-align: center;
  border-bottom: 2rem;
}

h4 {
  font-family: 'Fredoka One';
  color:rgb(255, 247, 0);
  font-size: 1rem;
  letter-spacing: .3rem;
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding-top: 1rem;
  position: relative;
  text-align: center;
  border-bottom: 2rem;
}

h4 a {
  text-decoration: none;
  color:rgb(255, 247, 0);
}

h5 {
  font-family: 'Fredoka One';
  color:rgb(255, 247, 0);
  font-size: 1rem;
  letter-spacing: .3rem;
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding-top: 1rem;
  padding-bottom: 4rem;
  position: relative;
  text-align: center;
  border-bottom: 2rem;
}

h5 a {
  text-decoration: none;
  color:rgb(255, 247, 0);
}

h6 {
  font-family: 'Nabla';
  font-size: 2rem;
  letter-spacing: .3rem;
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding: 1rem;
  position: relative;
  text-align: right;
  border-bottom: 2rem;
}

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px 50px 50px;
  gap: 5rem;
  padding: 10px;
  text-align: center;
  padding: 20px 0;
  font-size: 4.5rem;
}

.grid-item {
  border-color: black;
  border-width: 2rem;
  font-family: 'Fredoka One';
  background-color: white;
  width: 5rem;
  height: 5rem;
  box-shadow: 5px 5px 8px rgb(42, 42, 42);
  border: 2px solid rgb(0, 0, 0);
}


footer {
	margin: 5rem auto;
  font-size: .6rem;
  text-align: center;
  font-family: 'Fredoka One';
  color: rgb(255, 247, 0);
  text-shadow: 2px 1.5px 4px black;
}

p {
  width: 80rem;
  margin: auto;
  font-size: 2rem;
  text-align: center;
  font-family: 'Fredoka One';
  color: rgb(255, 247, 0);
  text-shadow: 2px 1.5px 4px black;
}

tr {
  display: flex;
}

td {
  border: 2px solid rgb(0, 0, 0);
  box-shadow: 5px 5px 11px rgb(45, 45, 45);
  background-color: white;
  margin: 16px;
  font-family: 'Fredoka One';
  font-size: 2rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  
  
}

#empty{
  background-color: transparent;
  border: 3px solid transparent;
  box-shadow: none;
}

table {
  display: flex;
  align-items: center;
  flex-direction: column;
}

form {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 5rem;
  font-family: 'Fredoka One';
  font-size: 2rem;
  letter-spacing: .3rem;
  color: rgb(255, 247, 0);
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
}

#name {
  width: 10rem;
  height: 2rem;
  border-radius: .5rem;
  background-color: rgb(255, 255, 255);
  font-family: 'Fredoka One';
  font-size: 1.5rem;
}

td img {
  width: 6rem;
  padding: 2rem;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

h2{
  display: flex;
  justify-content: space-around;
}

#playButton{
  text-align: center;
  font-family: 'Nabla';
  font-size: 3rem;
  letter-spacing: 6rem;
  border: 10px dotted transparent;
  text-shadow: 2px 2px 5px rgb(23, 23, 23);
  padding: 2rem 0 2rem 6rem;
  position: relative;
  right:3%;
  text-align: center;
  width: auto;
}

#playButton:hover {
  border: 10px solid rgba(0,0,0,0.4);
  padding: 2rem 0 2rem 6rem;
  background-color: rgba(0,0,0,0.2);
  background-clip: padding-box;
  cursor: pointer;
}

#newgameButton:hover{
  color: white;
  cursor: pointer;
}

#scoreboardButton:hover{
  color: white;
  cursor: pointer;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* 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.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  margin: auto;
  padding: 20px;
  width: 80%;
}

.modal-content p {
  font-size: 60px;
  background-color: lightblue;
  text-align: center;
  height:auto;
  width:auto;
  border-radius:20px;
}

/* The Close Button */
.close {
  color: black;
  font-size: 28px;
  font-weight: bold;
}

.modal-header {
  display:flex;
  justify-content: right;
}

.modal-body {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.modal-body p {
  padding:1rem;
}

#bottom-button1{
  color:rgb(255, 247, 0);
  text-shadow: 2px 1.5px 4px black;
  font-family: 'Fredoka One';
  font-size: 50px;
  background-color:lightblue;
  float:left;
  border-radius:20px;
}

#bottom-button2{
  color:rgb(255, 247, 0);
  text-shadow: 2px 1.5px 4px black;
  font-family: 'Fredoka One';
  font-size: 50px;
  background-color:lightblue;
  float:right;
  border-radius:20px;
}

#bottom-button1:hover,
#bottom-button2:hover{
  font-size:70px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
  
}

.pig{
  animation-duration: 4s;
  transition-timing-function: ease;
  animation-iteration-count: 1;
  animation-name: pigRoll;
}

.bull{
  animation-duration: 2s;
  transition-timing-function: ease;
  animation-iteration-count: 2;
  animation-name: cowRoll;
}

@keyframes cowRoll {
  
   0%{transform:rotate(0deg);} 
   25%{transform:rotate(20deg);}
   75%{transform:rotate(-20deg);}
   100%{transform:rotate(0deg);}
  
}

@keyframes pigRoll {
  
  0%{transform:rotate(0deg);} 
  25%{transform:rotate(180deg);}
  50%{transform:rotate(0deg);}
  75%{transform:rotate(-180deg);}
  100%{transform:rotate(0deg);}
 
}

#bouncingPig{
  margin: auto;
  position: relative; top: 9rem;
  z-index: -1 ;
  left: 25rem;
  bottom: -1rem;
  animation-duration: 4s;
  transition-timing-function: ease;
  animation-iteration-count: infinite;
  animation-name: pigRollout;
}

@keyframes pigRollout {
  
  0%{bottom:-1rem;left: 25rem;transform:rotate(0deg);}
    
  25%{transform:rotate(80deg);}

  50%{bottom:-1rem;left: 28rem;transform:rotate(0deg);}

  75%{transform:rotate(-80deg);}

  100%{bottom:-1rem;left: 25rem;transform:rotate(0deg);}
 
}


#bouncingBull{
  margin: auto;
  position: relative; top: 9rem;
  z-index: -1 ;
  left: 69rem;
  bottom: -1rem;
  animation-duration: 4s;
  animation-delay: 1s;
  transition-timing-function: ease;
  animation-iteration-count: infinite;
  animation-name: bullBounce;
}

@keyframes bullBounce {
  
  0%{bottom:0rem;right: 9rem;transform:rotate(0deg);}
    
  25%{transform:rotate(10deg);}

  50%{bottom: 0rem;right: 9rem;transform:rotate(0deg);}

  75%{transform:rotate(-10deg);}

  100%{bottom:0rem;right: 9rem;transform:rotate(0deg);}

  /*-----------------------------------------------
/*{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
  -webkit-animation: mover 1s infinite  alternate;

  animation: { mover 1s infinite  alternate;}

  0% { transform: translateY(0); }

  100% { transform: translateY(-10px); }

  0% { transform: translateY(0); }

  100% { transform: translateY(-10px); }
 
}