body {
	background-color: #000000; /* black background */
        color: #999999; /* grey text */
        font-family: Arial, sans-serif;
        padding: 0.5em;
     }
header {     
	  #handshakeImage {
	    left: 2em;
	    height: 40px;
   	    border-radius: 10px;
      	  }
	  .flex-header-container {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    gap: 0.7em; /* adds space between the image and the text */
   	  }
        }
p {
           font-size: 0.75em; /* Smaller font size for paragraphs on mobile */
   }
   p.smaller {
    font-size: 0.55em;
    letter-spacing: 0.06em
}

   .red-text {
    color: red;
}

h4, i, h3 {
            color: #4CAF50; /* green text for headings and italic text */
          }
/* animated stretch heading h3 starts */
@keyframes textFade {
            0%, 60% { color: #bbbbbb; }
            30%, 60% { color: white; }
            30%, 60% { letter-spacing: 0.09375em; }
            100% { color: #bbbbbb; }
        }
        h3 {
            animation: textFade 5s forwards;
            -webkit-animation: textFade 5s forwards; /* For Safari and Chrome */
	    font-size: 1em; /* Reduce font size for smaller screens */
        }
/* animated stretch heading h3 ends */

/* animated underline for h4 starts */
h4 {
            position: relative; /* For absolute positioning of the spark */
            font-size: 0.75em; /* Reduce font size for smaller screens */
        }
h4 u {
            text-decoration: none;
            border-bottom: 0.0625em solid #4CAF50; /* was 1px */
            position: relative;
	    
        }
h4 u::after {
            content: '';
            position: absolute;
            bottom: -0.0625em; /* was -1px */
            left: 0;
            width: 0.625em; /* was 10px */
            height: 0.0625em; /* was 1px */
            background: white; /* Color of the spark */
            animation: moveSpark 6s linear infinite;
        }
	@keyframes moveSpark {
            0% { left: 0; }
            100% { left: 97%; }
        }
/* animated underline for h4  ends */
/* css for links */
a {
            text-decoration: none;
            color: #bbbbbb; /* grey text for headings, links, and italic text */
            letter-spacing: 0.06875em; /* increased spacing for better readability of names */
  }
a:hover {
            text-decoration: underline;
        }
.email-link {
            text-decoration: none;
            color: #4CAF50; /* green text */
            letter-spacing: normal;  
            }       
.namebase-link {
            text-decoration: none;
            color: #4CAF50; /* green text */
            letter-spacing: 0.07em; 
            font-size: 0.6em;      
                } 

#results {
                    display: none;
                    position: absolute;
                    z-index: 1;
                    background-color: #333;
                    padding: 0.7em;
         }
                
#searchBar {
                    width: 20em; /* Adjust this value to your needs */
                }
                
#search-results-table {
                    position: absolute;
                    z-index: 1;
                    background-color: #333;
                    padding: 0.7em;
                }
                
.search-result {
                    text-decoration: none;
                    color: white;
                }
/* table css starts here */

.registered {
    color: red;
  }

  .fixed-height {
    height: .5em; /* Adjust this value to your needs */
}

        .table-container {
            display: flex;
            justify-content: left;
            align-items: flex-start;
	    width: 100%; /* Limits the width to 100% of the viewport width */
            margin-bottom: 0;
        }
        table {
          width: 33.3333%;
          margin: 0;
            border-collapse: collapse;
            background-color: #1a1a1a; /* dark gray for table background */
        }
            th:first-child, td:first-child {
            width: 60%; /* Adjusted width for names for smaller screens */
            }
            th:last-child, td:last-child {
            width: 40%; /* Adjusted width for price smaller screens */
            }
        th, td {
            padding: 0.3em;
            text-align: left;
            border: 0; /* Removing all borders */
            color: #bbbbbb; /* grey text for table cells */
        }
	table th, table td {
                font-size: 0.5em; /* Adjust font size for table headers and cells */
                letter-spacing: 0.04em; /* was 1.1px */
            }
        th {
            background-color: #333333; /* slightly lighter gray for headers */
            font-weight: bold;
            animation: textFade 2s forwards;
            -webkit-animation: textFade 2s forwards; /* For Safari and Chrome */
        }
        td:first-child { /* Only the left border of the NAMES column */
            border-left: 0.0625em solid #adb5bd; /* was 1px */
        }
/* animated letter fade for table heading starts */
        @keyframes letterFade {
            0%, 100% { color: #bbbbbb; }
            50% { color: #FFFFFF; }
        }
        .animated-letter {
            display: inline-block;
            animation: letterFade 0.75s forwards;
        }
        .letter-1 { animation-delay: 0s; }
        .letter-2 { animation-delay: 0.75s; }
        .letter-3 { animation-delay: 1.5s; }
        .letter-4 { animation-delay: 2.25s; }
        .letter-5 { animation-delay: 3s; }
        .letter-6 { animation-delay: 3.75s; }
/* animated letter fade for table heading ends*/
        table {
            position: relative; /* Makes the header cell a container for the falling spark */
            overflow: hidden; /* Prevents the spark from being visible outside the cell */
        }
        .hspark {
            position: absolute;
            top: -0.375em; 
            left: -0.25em;
            width: 0.5em; 
            height: 0.5em; 
            background-color: white; 
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Shadow effect */
            transform: rotate(45deg); 
            animation: fall 5s linear infinite; 
        }
        .tspark {
            position: absolute;
            top: -0.375em; 
            left: -0.25em;
            width: 0.5em; 
            height: 0.5em; 
            background-color: white; 
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Shadow effect */
            transform: rotate(45deg); 
            animation: fall2 60s linear infinite; 
        }
@keyframes fall {

    0%,
    100% {top: 0;}

    50% {top: 1.125em;}
}

@keyframes fall2 {

    0%,
    100% {top: 1.625em;}

    50% {top: 100%;}
}
        
#backToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
}

.back-to-top-btn {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #4CAF50; /* Change this to your desired button color */
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    text-decoration: none;
}

.back-to-top-btn:hover {
    background-color: #4CAF50; /* Change this to your desired button hover color */
}

.hidden {
    display: none;
}
	footer {
	    text-align: left; 
	    padding: 2em 0; /* Adds some padding above and below the text */
        font-size: 12px;
	    color: #333; /* Optional: Text color */
	    position: relative; /* Optional: Positions the footer relative to its normal position */
	    bottom: 0;
	    width: 100%;
	}