body {
    background-image: url(../images/tides2/water5.png);
    /* Center the background image */
    background-position: center center;
  
     /*Prevent the image from repeating */
    background-repeat: no-repeat;
  
    /* Scale the image to cover the entire viewport */
    background-size: cover;
  
    /* Fix the background image relative to the viewport (optional parallax effect)*/
    background-attachment: fixed;
  
  

    font-family: Garamond, serif; 
} 
.tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #445d8b;
    border: 2px solid black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 3;
    top: 80px;
    left: 90%;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .btn {
    background-color: transparent;
    border-color: transparent;
    }
    .btn:hover {animation: shaking 0.5s infinite;}
    @keyframes shaking {
       0% {transform: rotate(0deg);}
       20% {transform: rotate(-4deg);}
       50% {transform: rotate(0deg);}
       70% {transform: rotate(4deg);}
       100% {transform: rotate(0deg);}
    }
    div.scroll-container {
       
        overflow: auto;
        white-space: nowrap;
        padding: 10px;
      }
      
      div.scroll-container img {
        padding: 10px;
      }
      #box_2 {
        background-image: url(../images/tides2/shore2.png);
  /* Center the background image */
  background-position: center center;

   /*Prevent the image from repeating */
  background-repeat: repeat;

  /* Scale the image to cover the entire viewport */
  background-size: contain;

  /* Fix the background image relative to the viewport (optional parallax effect)*/
  background-attachment: fixed;

      }

    #box_3 {
        background-image: url(../images/tides2/well3.png);
  /* Center the background image */
  background-position: center center;

   /*Prevent the image from repeating */
  background-repeat: repeat;

  /* Scale the image to cover the entire viewport */
  background-size: contain;

  /* Fix the background image relative to the viewport (optional parallax effect)*/
  background-attachment: fixed;

      }
      #box_4 {
        background-image: url(../images/tides2/shallows3.png);
  /* Center the background image */
  background-position: center center;

   /*Prevent the image from repeating */
  background-repeat: repeat;

  /* Scale the image to cover the entire viewport */
  background-size: contain;

  /* Fix the background image relative to the viewport (optional parallax effect)*/
  background-attachment: fixed;

      }


      #box_5 {
        background-image: url(../images/tides2/coral2.png);
  /* Center the background image */
  background-position: center center;

   /*Prevent the image from repeating */
  background-repeat: repeat;

  /* Scale the image to cover the entire viewport */
  background-size: contain;

  /* Fix the background image relative to the viewport (optional parallax effect)*/
  background-attachment: fixed;

      }

    #h4 {
        color: whitesmoke;
      }