/*
   Filename:       hospital_window.css
   Author:         John G. (Skip) Todora
   Start Date:     May 02, 2023
   Revised:        January 29, 2026 to make page cellphone friendly
   Website:        jtodora.com
*/

.bg-grad {
   background-color: #E5E5E5;
   background-image: linear-gradient(#E5E5E5, #66C4FF);  
}  /* #1E90FF #1EB3FF #66C4FF */

.story-container {
   display: block;
   margin: auto;
   width: 900px;
   padding-top: 40px;
}

.man-by-window-img {
   display: block;
   float: right;
   width: 30%;
   /* height: 50%; */
   padding-bottom: 10px;
   padding-left: 10px;
}

.lake-img {
   display: block;
   float: left;
   width: 30%;
   padding-top: 10px;
   padding-right: 10px;
   /* padding-bottom: 10px; */
}

.couple-hand-in-hand-img {
   display: block;
   float: right;
   width: 20%;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 10px;
}

.parade-img {
   display: block;
   float: right;
   width: 25%;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 10px;
}

.brick-wall-img {
   display: block;
   float: left;
   width: 25%;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}

.centered-text {
   text-align: center;
   padding-top: 40px;
   padding-bottom: 10px;
}

.centered-text-bold {
   text-align: center;
   font-size: 1.5em;
   font-weight: bold;
}

@media screen and (max-width: 600px) {
    .story-container {
        width: 100%;
    }
    img {
        float: none; /* Stack images above text on small screens */
        display: flex;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .man-by-window-img {
      float: none;
      display: flex;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
    }
    .lake-img {
      float: right;
      display: flex;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
    }

    .couple-hand-in-hand-img {
      float: right;
      display: flex;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
    }

    .parade-img {
      float: none;
      display: flex;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
    }

    .brick-wall-img {
      float: none;
      display: flex;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 10px;
      padding-right: 10px;
    }
}