body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #009443;
    height: 100vh;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
    grid-template-areas: "section section"
                         "footer footer ";
    
    
    }


footer {
  position: fixed ;
  bottom: 0;
  left: 0%;
  right: 0%;
}

img {
    
    width: 100px;
    height: auto;
    position: relative;
   
}




  @media only screen and (min-width: 767px) {
   
    img {
    
    
width: 90%;
max-height: 100%;
  }

  

  }


  
  @keyframes revealContentAnim {
    to {
      transform: scale(0);
    }
  }
  
  nav {
    background-color: grey;
  }
  
  
  
  body {
    overflow-x: hidden;
  
  
  }
  
  .wrapper {
    transition: transform 1s ease-in-out;
  }
  
  .slide-out {
    transform: translateX(-125%);
  }
  
  
  
  @keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
  }
  
  /* Apply the animation to the content */
  .slide-in {
    animation: slideInFromRight 1s ease-out;
  }