body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;

}

h1 {

    color:#007F0E;
}


.good {
    color:#007F0E;
    font-weight: bold;
    font-size:large;
    
    }

.bad {
    color:red;
    font-weight: bold;
    font-size:large;
    
    }

    /* Make the container relative */
.swap-on-hover {
    position: relative;	
      margin:  0 auto;
      max-width: 400px;
  }
  
  /* Select the image and make it absolute to the container */
  .swap-on-hover img {
    position: absolute;
    top:0;
    left:0;
      overflow: hidden;
      /* Sets the width and height for the images*/
      width: 400px;
  }
  
  /* 
      We set z-index to be higher than the back image, so it's alwyas on the front.
  
  We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
  */
  .swap-on-hover .swap-on-hover__front-image {
    z-index: 9999;
    transition: opacity .5s linear;
    cursor: pointer;
  }
  
  /* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
  .swap-on-hover:hover > .swap-on-hover__front-image{
    opacity: 0;
  }