body{
  position: static;
  background-image: url('images/fitness-muscular-man-rear-shot.jpg');
  background-size: 100%;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular';
  text-align: center;
}

h1{
  background: radial-gradient(circle at 50% 20%, white , cadetblue, darkcyan);
  font-size: 203px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-collect{
  position: relative;
  display: block;
  background-color: rgba(85, 107, 47, 0.425);
  width: 85%;
  padding: 20px;
  justify-content: center;
  text-align: left;
  margin-left: 55px;
}
.info-collect p{
  font-size: larger;
  font-weight: bold;
  color: cadetblue;
}

.name-input,
.sex-dropdown,
.age-input{
  background-color: rgba(240, 248, 255, 0.493);
  font-family: monospace;
  font-size: 110%;
  color: rgb(1, 21, 88);
  height: 25px;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  margin: 10px 100px;
}
.name-input{
  margin-left: 85px;
}

input:hover,
select:hover{
  cursor: text;
  box-shadow: 0 0 5px cyan;
}

.save-button,
.inquire-button{
  border: none;
  border-radius: 5px;
  color: cadetblue;
  font-size: 100%;
  font-weight: bold;
  padding: 10px;
  width: 200px;
  margin: 20px 50px;
}
.save-button:hover,
.inquire-button:hover{
  cursor: pointer;
  border: none;
  box-shadow: 0px 5px 20px rgba(8, 105, 161, 0.911);
  animation: infinite bounce 0.5s;
}

@keyframes bounce{
  0%{scale: 100%; 
      background: linear-gradient(to right, white, cyan, rgb(16, 192, 192),rgb(0, 191, 255));}
  25%{scale: 102%; 
      background: linear-gradient(to right, rgb(0, 191, 255), white, cyan, rgb(16, 192, 192));}
  50%{scale: 105%;
      background: linear-gradient(to right, rgb(16, 192, 192), rgb(0, 191, 255), white, cyan);}
  75%{scale: 103%;
      background: linear-gradient(to right, cyan, rgb(16, 192, 192), rgb(0, 191, 255), white);
    }
  100%{scale: 101%;
        background: linear-gradient(to right, white, cyan, rgb(16, 192, 192),rgb(0, 191, 255));
      }
}

.input-warning{
  display: inline-grid;
  grid-template-rows: 50px 50px;
  background-color: rgba(255, 0, 0, 0.507);
  border-radius: 15px;
  height: 100px;
  width: 550px;
  margin: 30px;
  padding: 20px;
  font-size: 20px;
}
.input-warning-button{
  font-size: 30px;
  font-family: Impac, Haettenschweiler;
  color: rgba(150, 13, 41, 0.87);
  width: 130px;
  border: none;
  border-radius: 8px;
  margin-left: 36%;
  scale: 0.8;
}
.input-warning-button:hover{
  cursor: pointer;
  background-color: rgb(245, 155, 155);
  color: red;
  scale: 1;
  box-shadow: 0px 5px 20px crimson;
}


a{
  text-decoration: none;
  font-size: larger;
  font-family: Impact;
}
a:hover{
  animation: infinite bounce 1s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cards{
  background-size: cover;
  font-size: x-large;
  height: 250px;
  width: 700px;
  margin: 50px;
  padding: 20px 20px;
}
.cards-grid{
  position: relative;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  column-gap: 30px;
  row-gap: 30px;
  align-items: center;
  text-shadow: 8px 5px 5px darkblue;
  z-index: 2;
}

.cards p{
  font-size: smaller;
  color:cadetblue;
  font-family:fantasy;
}
.cards div button{
 background: radial-gradient( rgb(247, 83, 83), red, darkred, wheat, brown);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: x-large;
  border: none;
  padding: 10px;
  width: 160px;
  margin-left: 50px;
}

.cards button:hover{
  cursor: pointer;
  scale: 130%;
  animation:  infinite glow 1s;
}

.card-darker-end{
  position: absolute;
  background-color: rgba(95, 158, 160, 0.774);
  height: 290px;
  width: 250px;
  z-index: 1; /*this helps precise the stacking order of components. The higher the z-index, the more foward the component.*/
  margin-left: 470px;
  margin-top: -20px;
  
}

@keyframes glow{
  0%{-webkit-text-fill-color: rgb(255, 0, 0);}
  25%{-webkit-text-fill-color: rgb(248, 0, 0);}
  50%{-webkit-text-fill-color: rgb(216, 27, 27);}
  50%{-webkit-text-fill-color: rgb(160, 40, 40);}
  100%{-webkit-text-fill-color: rgb(170, 7, 7);}
}

.cards div img{
  height: 120px;
  width: 120px;
  margin-top: -10px;
  margin-left: 80px;
  border-radius: 15px;
}