/*
   Filename:       100percent.css
   Author:         John G. (Skip) Todora
   Start Date:     July 24, 2023
   Revised:        February 11, 2026 to make page cellphone friendly
   Website:        jtodora.com
*/

ol {
   margin-left: 100px;
}

.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;
   font-size: 1.2em;
}

.italic-text {
   font-style: italic;
}

.bible-verse {
   font-style: italic;
   padding-top: 30px;
   padding-bottom: 30px;
   padding-right: 200px;
   padding-left: 200px;
}

.sound-of-freedom {
   font-style: italic;
   padding-top: 30px;
   padding-bottom: 30px;
   padding-right: 100px;
   padding-left: 100px;
}

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

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

.percent-img {
   display: block;
   float: left;
   width: 20%;
   padding-bottom: 10px;
   padding-right: 10px;
}

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

.woman-over-toilet-img {
   display: block;
   float: right;
   width: 30%;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 20px;
}

.no-drag-story-img {
   display: block;
   float: left;
   width: 30%;
   padding-bottom: 10px;
   padding-right: 10px;
   padding-top: 10px;
}

.sound-of-freedom-img {
   display: block;
   float: right;
   width: 40%;
   padding-top: 10px;
   padding-left: 10px;
   padding-bottom: 20px;
}

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

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

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

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

.volume-control-img {
   display: block;
   float: left;
   width: 15%;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 20px;
}

.shout-from-mnt-img {
   /* display: block; */
   margin: auto;
   width: 70%;
   padding-top: 50px;
   padding-bottom: 20px;
}

.jesus-reaching-out-img {
   display: block;
   margin: auto;
   width: 70%;
   padding-top: 10px;
   padding-bottom: 40px;
}

/* TOOL TIP FROM: https://www.w3docs.com/tools/code-editor/10122 */
a.tltip {
   /* border-bottom: 1px solid; */
   visibility: visible;
   /* text-decoration: none; */
}

a.tltip:hover {
   /* cursor: help */
   position: relative;
}

a.tltip span {
   display: none;
}

a.tltip:hover span {
   border: black 1px solid;
   color: black;
   padding: 5px 20px 5px 5px;
   display: block;
   z-index: auto;
   /* background: #e3eb9e; */
   background: #ffffe1;
   left: 0px;
   margin: 15px;
   width: 500px;
   position: absolute;
   top: 15px;
   text-decoration: none;
   box-shadow: 10px 10px rgb(104, 100, 100);
}
/* END POP-UP HOVER VERSE TEXT */

sup {
   font-weight: bold;
}

.small-caps {
   font-variant-caps: small-caps;
   padding-left: 50px;
}

@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;
    }
    /* TOOL TIP FROM: https://www.w3docs.com/tools/code-editor/10122 */
   a.tltip {
      /* border-bottom: 1px solid; */
      visibility: visible;
      /* text-decoration: none; */
   }

   a.tltip:hover {
      /* cursor: help */
      position: relative;
   }

   a.tltip span {
      display: none;
   }

   a.tltip:hover span {
      border: black 1px solid;
      color: black;
      padding: 5px 20px 5px 5px;
      display: block;
      z-index: auto;
      /* background: #e3eb9e; */
      background: #ffffe1;
      left: 0px;
      margin: 15px;
      width: 275px;
      position: absolute;
      top: 15px;
      text-decoration: none;
      box-shadow: 10px 10px rgb(104, 100, 100);
   }
   /* END POP-UP HOVER VERSE TEXT */
   .nasb1995-img {
      display: flex;
      float: none;
      width: 100%;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
   }
   .percent-img {
      display: flex;
      float: left;
      width: 30%;
      padding-bottom: 10px;
      padding-right: 10px;
   }
   .bible-verse {
      font-style: italic;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-right: 75px;
      padding-left: 75px;
   }
   .evolve-into-us-img {
      display: flexk;
      float: left;
      width: 40%;
      /* padding-bottom: 10px; */
      padding-right: 10px;
      padding-top: 10px;
   }
   .woman-over-toilet-img {
      display: flex;
      float: right;
      width: 40%;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
   }
   .no-drag-story-img {
      display: flex;
      float: left;
      width: 40%;
      padding-bottom: 10px;
      padding-right: 10px;
      padding-top: 10px;
   }
   .sound-of-freedom {
      font-style: italic;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-right: 75px;
      padding-left: 75px;
   }
   .sound-of-freedom-img {
      display: flex;
      float: right;
      width: 50%;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
   }
   .constitution-img {
      display: flex;
      float: right;
      width: 50%;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
   }
   .baby-img {
      display: flex;
      float: left;
      width: 40%;
      padding-bottom: 10px;
      padding-right: 10px;
      padding-top: 10px;
   }
   .ai-img {
      display: flex;
      float: right;
      width: 50%;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
   }
   .access-denied-img {
      display: flex;
      float: left;
      width: 40%;
      padding-bottom: 10px;
      padding-right: 10px;
      padding-top: 10px;
   }
   .volume-control-img {
      display: flex;
      float: left;
      width: 30%;
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 20px;
   }
   .shout-from-mnt-img {
      display: flex;
      float: none;
      width: 100%;
      padding-top: 50px;
      padding-bottom: 20px;
   }
   .jesus-reaching-out-img {
      display: flex;
      margin: auto;
      width: 70%;
      padding-top: 10px;
      padding-bottom: 40px;
   }
   ol {
      margin-left: 50px;
   }
}