/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
    
    .title {
      color:#F4B38A;
      font-family: "Jersey 10", sans-serif; /*I guess jersey 10 is what we added in the main neocites?*/
      font-weight: 400; /*boldness I believe*/
      font-style: normal;
      font-size: 50px;
    }
    
    .text { 
      color:#F4B38A;
      font-family: "Jersey 10", sans-serif; /*sans-serif is of use if the original font is not working for some reason*/
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
    }
    
  
    .explanation {
      color:#F4B38A; /*use dither*/
      font-family: "Jersey 10", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size:30px;
    }
    
    .MissingGirlPoster { /*addresses div and name
       max-width:100%; /*ensures the image scales down on small screens*/
      position: relative;
      margin: auto;
    /* transform: rotate(-1deg); /*rotates the actual image by degrees (can create a tilt)*/
      filter: drop-shadow(5px 5px 50px rgba(255, 246, 182, 0.18)); /*I stole this code, not sure how exactly but it adds a shadow behind an image*/
    }
    
    
    /* Grow */
    .hvr-grow {
      display: inline-block;
      vertical-align: middle;
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      transition-duration: 0.3s;
      transition-property: transform;
    }

    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-grow:active {
     transform: scale(1.1);
    }
    
     .container {
      text-align: center; /* Centers all inline content, including the image */
      }