/* .crystal-image {
    width: 20vh;
    height: 20vh;
    padding:2%;
    
} */

h2 {
    font-size:30px;
    color:white;
    background:black;
    opacity:0.7;
}

body {
    text-align: center;
    background-image: url("../images/background3.jpg");
    font-family: 'Amatic SC', cursive;
    margin:5%;
    
    
}

img {
  width:18vh;
  margin:1vh !important;
}

p {
    color:#ffffff;
    font-size:25px;
}


.headerTitle {
    font-size:60px;
    opacity: 0.9;
    color:white;
}

.headerTitle2 {
    font-size:40px;
    opacity: 0.8;
    color:white;
    background:black;
}

.glow {
    font-size: 80px;
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
  }

  .crystal-image:hover{  
      
    animation: pulse .5s infinite;
    animation-timing-function: linear;  
  }
  
  .numGuess {
      font:100px;
      color:white;
  }

  .instructions {
    background:black;
    opacity: 0.8;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1)};
    100% { transform: scale(1); }
    }
  
  
  @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
  }