<style>


header {
  padding: 10px;   /*   20  */
}

h1 {
  margin: 0;
  margin-left: 20px; /*   20  */
  color: black;
  font-size: 44px;
}

h2 {
  margin: 0;
  margin-left: 20px;   /*  25px is even with Property   */
  font-size: 30px;     /*  34  */
  color: darkblue;  /* Land Homes & More..   */
}

h3  {
    margin: 0;
    margin-left: 20px;
    font-size: 28px;
    color: darkblue;
}

h4  {
    margin: 0;
    margin-left: 20px;
    font-size: 25px;
    color: darkblue;
}


h5 {
       font-size: 20px;
       color: green; 
   }

 .container {
        text-align: center;
        font-weight: bold;
        margin-left: 10px;  /* gets Property off the left wall  */
        font-size: 20px;   /* sets the bottom links size 20 */
     /*   background-color: #CE9C63;   sets the whloe container bg color  */
    }


.square-container {
  width: 235px;
  height: 225px;
  text-align: center;
  margin-bottom: 10px;   /* Add margin bottom for spacing */
  margin-left: 35px;
  margin-top: 20px;    /* space out vertical boxes  */
/* border: 1px solid black; */ /* background color or image as    background-color: lightgray; */
/* border-radius: 5px;  */  /* I used these next 2 lined to see the square temporarily  */
  overflow: hidden; /* Ensure nothing escapes the container */
}

/*
.square-container2 {
  width: 200px;
  height: 170px;                 150  
  text-align: center;
  margin-bottom: 5px;        Add 10 margin bottom for spacing 
  margin-left: 34px;     52 px  
  margin-top: 20px;    /* space out vertical boxes  */
/* border: 1px solid black; */ /* background color or image as    background-color: lightgray; */
/* border-radius: 5px;  */  /* I used these next 2 lined to see the square temporarily  */
/*  overflow: hidden; *//* Ensure nothing escapes the container */
/*  }  */
/* 
footer {
  margin-top: 5px;
}  */

.row {
  display: flex;
  height: 35px;
  justify-content: center;
  margin-bottom: 0;    /*  the space between the link rows any thing href  */
/*  background-color: ;*/          /*  b4  light gray  .. now fence brown  */
}

/*    a {
  margin: 0 5px;
}   */


/*              
.link-set-1 a{
  background-color: white;
}

.link-set-2 a{
  background-color: lightgray;
}
                         ..zak     this does not work   */


       .link-set-1 a {     
       color:blue;
       background-color: #67CD9B;
       text-decoration: underline;
       }


       .link-set-1 a:visited {     
       color:black;
       background-color: #67CD9B;
       text-decoration: underline;
       }

       .link-set-1 a:hover {     
       color: orange;
       background-color: transparent;
       text-decoration: underline;
       }

       .link-set-1 a:active {     
       color:black;
       background-color: #ADFF2F;
       text-decoration: underline;
       }

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

       .link-set-2 a {
        color:#000;   /*  off white #FAFAFA */
       background-color: lightblue ;  /* light green #67CD9B */
       text-decoration: underline;
       }
       
       .link-set-2 a:visited {   /*    ususl view is visited */
        color:#000;    /*   #FEFEFE   off white  */
       background-color: lightblue;
       text-decoration: none;
       }

 
       .link-set-2 a:hover {
        color:red;
       background-color: lightblue;
       text-decoration: none;
       }

       
       .link-set-2 a:active {       
        color:purple;
       background-color: transparent;   /*    background-color: transparent;  */
       text-decoration: underline;
       }


  /*      a:visited {
       color: purple;
       background-color: lavender;
       text-decoration: underline;
       }

       a:hover {
       color: red;
       background-color: indianred;
       text-decoration: underline;
       }

       a:active {
       color: orangered;
       background-color: transparent;
       text-decoration: underline;
       }
*/
/* =====================this one makes the image in clustrmax counter smaller   ======== */
.override-link {
    width:30px;
    height:20px;
}
/* =====================this one makes the images in the counters smaller   ======== */

.orange-text {
    color:orange;
}


.white-text {
    color:white;
}

.lightgreen-text {
  color:lightgreen;
}

/*
.hr-container {
  text-align: center;
}
.half-width-hr {
  width:35%;
  margin: 0 auto;
  border-top:3px solid brown;
  }   */

   .line-spacing {
  line-height: .65;
}                         



/* container2 for the center square  ***********************************************
.container2 {
    position: relative;
    width: 100%;
    height: 100vh;
} */


  /*      .left {
    float: right;
    width: 25%;
    height: 100%;
   }  */
          /*  background-color: lightblue;  */

    .center-right {      /* puts the text in the middle of the box on right */
    position: absolute;
    top: 5%;
    right: 0;
    width: 50%;
    height: 50%;
    background-color: lightgreen;
}  

       .message {
    text-align: center;
    padding: 5px;
}

.container-new {
    position: fixed;
    top: 150px; /* Adjust as needed */
    right: 200px; /* Adjust as needed */
    width: 300px;
    height: 350px;
    background-color: lightblue; /* Adjust color as needed */
    border: 2px solid black; /* Optional: Add border for visibility */
    z-index: 999; /* Optional: Adjust z-index if needed */
}

@media only screen and (max-width: 600px) {
    .container-new {
        top: 100px; /* Adjust top position for smaller screens */
        right: 5%; /* Adjust right position for smaller screens */
        width: 90%; /* Adjust width for smaller screens */
    }
}
</style>