body {
  /*background: linear-gradient(90deg, white, gray);*/
  background-color: #70faff;   /* #50ffff; #00ffff; cyan */
}

body, h1, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: center;
  
  /*background-image: url('page 3 of 8.jpg');
  background-attachment: fixed; * This makes the background image fixed while scrolling *
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  
}

a {
    text-decoration: none;
    color: inherit; /* Ensures that the link color inherits from its parent */
}


.ancestor-of-714 {

  /* Parent class of the "Call Today 714-756-0810" */
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 1160px; /* Fixed width */
  height: 700px; /* Fixed height */
    
  position: relative; /* static; relative; absolute;  fixed; inherit; */
    
}

.ancestor-of-homescreen {

  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 1150px; /* Fixed width */
  height: 675px; /* Fixed height */
    
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 100px; /* Distance from the top of the viewport */
  left: 5px; /* Distance from the left side of the viewport */

}

.ancestor-of-clickables {

  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 1150px; /* Fixed width */
  height: 590px; /* Fixed height */
    
  position: relative; /* static; relative; absolute;  fixed; inherit; */
    
}


.half-screen-width {
  width: 50%;
  border: 1px solid black;  
  margin: 0 auto;
}




/* Ensure the link itself has the desired size */
.clickable-mascot {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 369px; /* Fixed width */
  height: 400px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 29px; /* Distance from the top of the viewport */
  left: 5px; /* Distance from the left side of the viewport */
  
}

.clickable-swoosh1 {
  
  /* swoosh1 - The "swoosh" is the "DUTY SCOOPIN" ribbon whose lettering rises notably as the ribbon unfurls from left to right. */ 
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 600px; /* Fixed width */
  height: 400px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 29px; /* Distance from the top of the viewport */
  left: 399px; /* Distance from the left side of the viewport */
  
}


.clickable-swoosh2a {
  
  /* swoosh2a - The "swoosh" is the "DUTY SCOOPIN" ribbon whose lettering rises notably as the ribbon unfurls from left to right. */ 
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 300px; /* Fixed width */
  height: 160px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  /* top: 350px; * Distance from the top of the viewport */
  top: 310px; /* Distance from the top of the viewport */
  left: 570px; /* Distance from the left side of the viewport */
  
}


.clickable-swoosh2b {
  
  /* swoosh2b - The "swoosh" is the "DUTY SCOOPIN" ribbon whose lettering rises notably as the ribbon unfurls from left to right. */ 
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 300px; /* Fixed width */
  height: 160px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  /* top: 250px; * Distance from the top of the viewport */
  top:  210px; /* Distance from the top of the viewport */
  left: 870px; /* Distance from the left side of the viewport */
  
}


/* Ensure the link itself has the desired size */
.clickable-grass {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 969px; /* Fixed width */
  height: 184px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 429px; /* Distance from the top of the enclosing-DIV (ancestor) */
  left: 5px; /* Distance from the left side of the enclosing-DIV (ancestor) */
  
}



/*** GRASS (vertical bar) ****/
.clickable-div1 {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 85px; /* Fixed width */
  height: 576px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute;  /* absolute; fixed; * Fixed positioning */
  top: 126px; /* Distance from the top of the enclosing-DIV (ancestor) */
  left: 5px; /* Distance from the left side of the enclosing-DIV (ancestor) */
  
}

.main-image {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 969px; /* Fixed width */
  height: 584px; /* Fixed height */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed;  Fixed positioning */
  /* top: 29px; * Distance from the top of the viewport */
  top: 5px; /* Distance from the top of the enclosing-ancestor-DIV (position: absolute)  */
  left: 85px; /* Distance from the right side of the enclosing-ancestor-DIV (position: absolute)*/
  
}

/*** GRASS (vertical bar) ****/
.clickable-div2 {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 85px; /* Fixed width */
  height: 576px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute;  /* absolute; fixed; Fixed positioning */
  top: 126px; /* Distance from the top of the enclosing-ancestor-DIV (position: absolute)  */
  left: 1052px; /* 1750px; Distance from the left side of the enclosing-ancestor-DIV (position: absolute)  */
  
}


/*** GRASS (vertical bar) ****/
.clickable-vert-bar {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 85px; /* Fixed width */
  height: 576px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute;  /*  absolute; fixed; Fixed positioning */
  top: 126px; /* Distance from the top of the enclosing-enclosing-ancestor-DIV (position: absolute)  */
  left: 972px; /* 1052px; /* 1750px; Distance from the left side of the enclosing-ancestor-DIV (position: absolute)  */
  
}


/* BACK button */
.clickable-BACK {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 160px; /* Fixed width */
  height: 45px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the enclosing-ancestor-DIV (position: absolute) */
  left: 95px; /* Distance from the left side of the enclosing-ancestor-DIV (position: absolute) */
  
}


/* CALL 714... button */
#page1-CALL {
  
  left: 115px; /* Distance from the left side of the enclosing-ancestor-DIV (position: absolute) */
  
}


#page1-FIRST {
  
  left: 515px; /* Distance from the left side of the enclosing-ancestor-DIV (position: absolute) */
  
}


/* CALL 714... button */
.clickable-CALL {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 400px; /* Fixed width */
  height: 100px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the enclosing-ancestor-DIV (position: absolute) */
  left: 315px; /* Distance from the left side of the enclosing-ancestor-DIV (position: absolute) */
  
}


.clickable-FIRST {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 400px; /* Fixed width */
  height: 100px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the enclosing-ancestor-DIV (position: absolute) */
  left: 715px; /* Distance from the left side of the enclosing-ancestor-DIV (position: absolute) */
  
}


/* mission-statement button */
.clickable-mission {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 200px; /* Fixed width */
  height: 65px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 485px; /* Distance from the top of the viewport */
  left: 310px; /* Distance from the left side of the parent/ancestor DIV */
  
}


.clickable-NO-MORE {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 200px; /* Fixed width */
  height: 250px; /* Fixed height */
  text-decoration: none; /* Remove underline from link */
  
  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 355px; /* Distance from the top of the viewport */
  left: 760px; /* Distance from the left side of the parent/ancestor DIV */
  
}

.mission-statement {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 465px; /* Fixed width */
  height: 584px; /* Fixed height */

  /* ************************************************************************
     An element with position: "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed; * Fixed positioning */
  top: 200px; /* Distance from the top of the parent/ancestor DIV */
  left: 120px; /* Distance from the left side of the parent/ancestor DIV */
  font-size: 30px;
  font-weight: normal;  /* or 400 *** bolder; * or 700 */
  text-align: left;
 
}


.showcard-links {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 400px; /* Fixed width */
  height: 584px; /* Fixed height */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed;  Fixed positioning */
  top: 100px; /* Distance from the top of the parent DIV element. */
  left: 650px; /* Distance from the left side of the parent DIV element. */
  
}


.menu-of-pages {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 400px; /* Fixed width */
  height: 700px; /* Fixed height */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed;  Fixed positioning */
  top: 200px; /* Distance from the top of the parent DIV element. */
  left: 1000px; /* Distance from the left side of the parent DIV element. */
  
}


.for-all-your-needs {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 200px; /* Fixed width */
  height: 200px; /* Fixed height */
  
  /* ************************************************************************
     An element with position "absolute" is positioned relative to the nearest 
     positioned ancestor (instead of positioned relative to the viewport, 
     like the "fixed" setting).
     Ancestor is the outermost DIV element (class: "ancestor-of-clickables"). 
     ********* */
  position: absolute; /* absolute; fixed;  Fixed positioning */
  top: 550px; /* Distance from the top of the parent DIV element. */
  left: 800px; /* Distance from the left side of the parent DIV element. */
  
}

.mascot-call {
  
  display: inline-block; /* inline-block; Necessary to set width and height */
  width: 300px; /* Fixed width */
  height: 200px; /* Fixed height */

}

/* Add a hover effect */
.clickable-div1:hover .content {
  background-color: #45A049; /* Darker green on hover */
}

/* Add a hover effect */
.clickable-vert-bar:hover .content {
  background-color: #45A049; /* Darker green on hover */
}


/* To connect fonts to a website, use the @font-face rule in the CSS file: */
 @font-face {
    font-family: "Showcard Gothic";
    
    src: url('https://fontsforyou.com/fonts/s/ShowcardGothic.ttf') format('truetype');  

    /* https://stackoverflow.com/questions/33475526/cant-understand-the-bulletproof-font-face-css-rule */
    /* 
    src: url('https://fontsforyou.com/fonts/s/ShowcardGothic.eot');  * IE9 Compat Modes *
    src: url('https://fontsforyou.com/fonts/s/ShowcardGothic.eot?#iefix') format('embedded-opentype'),  * IE6-IE8 *
         url('https://fontsforyou.com/fonts/s/ShowcardGothic.woff') format('woff'),  * Modern Browsers *
         url('https://fontsforyou.com/fonts/s/ShowcardGothic.ttf') format('truetype'), * Safari, Android, iOS *
         url('https://fontsforyou.com/fonts/s/ShowcardGothic.svg#svgFontName') format('svg'); * Legacy iOS *
    */     
}

.showcard-style {
    font-family: "Showcard Gothic", serif; /* sans-serif Fallback to sans-serif font if 'Showcard Gothic' is not available */;
    font-size: 30px;
}    

.showcard-style-menu {
    font-family: "Showcard Gothic", serif; /* sans-serif Fallback to sans-serif font if 'Showcard Gothic' is not available */;
    /*font-size: 30px;*/
    font-size: 15px;
}    


.call-today {
  /* Added 6/12/2024 */  
  /* display: inline-block; * inline-block; Necessary to set width and height */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the viewport */
  left: 120px; /* Distance from the left side of the viewport */
  
}

.call-today21 {
  /* Added 6/12/2024 */  
  /* display: inline-block; * inline-block; Necessary to set width and height */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the viewport */
  left: 240px; /* Distance from the left side of the viewport */
  
}

.call-today31 {
  /* Added 6/12/2024 */  
  /* display: inline-block; * inline-block; Necessary to set width and height */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the viewport */
  left: 360px; /* Distance from the left side of the viewport */
  
}

.call-today12 {
  /* Added 6/12/2024 */  
  /* display: inline-block; * inline-block; Necessary to set width and height */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 40px; /* Distance from the top of the viewport */
  left: 120px; /* Distance from the left side of the viewport */
  
}
.call-today {
  /* Added 6/12/2024 */  
  /* display: inline-block; * inline-block; Necessary to set width and height */
  position: absolute; /* absolute;  fixed; * Fixed positioning */
  top: 0px; /* Distance from the top of the viewport */
  left: 120px; /* Distance from the left side of the viewport */
  
}

/* Import the Monoton font from Google Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');*/

/* Import the Bebas Neue font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Specific font for the Art Deco div */
.art-deco-font {
    /*font-family: 'Monoton', cursive*/
    font-family: 'Bebas Neue', sans-serif;
    /*font-size: 24px;*/
    font-size: 16px;

    color: #2c3e50;
    padding: 10px;
    border: 2px solid #2c3e50;
    background-color: #ecf0f1;
    border-radius: 5px;
    margin: 20px 0;
    text-align: center;
    letter-spacing: 2px;
}

/* See top of CSS module.
   a {
    text-decoration: none;
    color: inherit; * Ensures that the link color inherits from its parent *
} */



/* ****************************************************************************

NOT IN USE 

**************************************************************************** */