1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
DIV.IHTA.highlightedTitle SPAN.IHTA
{
     /* Soft gradient for a warm glow */
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color:      white;
    display:    inline-block;

    /* Add more padding for a more prominent title */
    padding: 1.5em 2em;

    margin-bottom:  2em;
    border-radius:  10px;   /* Rounded corners for a smoother look */
    font-size:      1.5em;  /* Slightly larger font for emphasis */

    /* Soft shadow for depth */
    box-shadow:     0px 4px 8px rgba(0, 0, 0, 0.3);

    text-transform: uppercase;  /* Make the title look more professional */
    letter-spacing: 1px;        /* Space the letters slightly for a cleaner look */
}

DIV.IHTA.rainbow-candy-cane 
{
    background: repeating-linear-gradient(
        45deg,

        /*
        Chat-GPT's first suggestion.  It was great, but for the purposes of an example,
        this wasn't "Flamboyant" enough, we agreed...

        red     0%,
        orange  16.6%,
        yellow  33.2%,
        green   49.8%,
        blue    66.4%,
        indigo  83%,
        violet  100%
        */

        /*
        The second example.  This one is pretty bad, the colors have exact borders,
        and do not "blend" into each-other between color-transitions

        red     0px,    red     20px, 
        orange  20px,   orange  40px, 
        yellow  40px,   yellow  60px, 
        green   60px,   green   80px, 
        blue    80px,   blue    100px, 
        indigo  100px,  indigo  120px, 
        violet  120px,  violet  140px
        */

        red     0px,    red     15px, 
        orange  25px,   orange  40px, 
        yellow  50px,   yellow  65px, 
        green   75px,   green   90px, 
        blue    100px,  blue    115px, 
        indigo  125px,  indigo  140px, 
        violet  150px,  violet  165px
    );

}

/*
 * The following four CSS Definitions were, 100% in totality, generated by Chat-GPT
 * There are times when that thing will let you down when trying to figure out how to do spacing
 * and placement for CSS values.  If you ask how to center things with 'flex' it can screw it
 * up.
 * 
 * This was a bunch of Color-Wheel Questions, and it nailed this one on the first try!
 */
TABLE.IHTA.tableClass
{
    width:              100%;
    border-collapse:    collapse;
    background:         rgba(255, 255, 255, 0.3); /* Subtle white transparency */
    backdrop-filter:    blur(5px); /* Frosted glass effect */
}

TABLE.IHTA.tableClass TD
{
    padding:    0.5em 0.5em 0.5em 1em !important;
    font-size:  150%;
    border:     1px solid rgba(255, 255, 255, 0.5); /* Thin border */
}

TABLE.IHTA.tableClass TR:nth-child(odd)
{
    background: rgba(255, 255, 255, 0.5); /* Light white tint for odd rows */
    color:      black;
}

TABLE.IHTA.tableClass TR:nth-child(even)
{
    background: rgba(255, 255, 255, 0.2); /* Slightly more transparent for even rows */
    color:      black;
}