@media only screen and (min-width: 320px) and (max-width: 479px){ 
       img{
      width: 25rem;
      height: 10rem;
    }
    }
    
@media only screen and (min-width: 480px) and (max-width: 767px){ 
        img{
      width: 25rem;
      height: 10rem;
    }
    }
    
@media only screen and (min-width: 768px) and (max-width: 991px){ 
    img{
      width: 30rem;
      height: 15rem;
    }
     }
    
@media only screen and (min-width: 992px){ 
    img{
      width: 35rem;
      height: 20rem;
    }
    }
    
    body{
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: black;
        color: aliceblue;
        text-align: center;
        padding: 10em;
    }
  
 
    /* Controls the pulse of the image */
    #pulse {
        animation-duration: 10s;
        animation-name: pulse;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
      
      @keyframes pulse { /* controls pulsing of hero logo*/
        0% {
          opacity: .3;
        }
        
        100% {
          opacity: 1.5;
        }
      }

    /* Footer styling */

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    text-decoration: none;
}
    /* *{
        border: 2px solid red;
    } */