:root {
     --bgcolor:#000000;
     --ltext:#FFF0F5;
     --dtext:#000000;
     --border:#C82481;
     --accent:#FFC0CB;
     --visited:#FF5B96;
}

html {
  /* The path to your image, followed by the fallback value */
  cursor: url("Cursor.png"), auto;
}

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:100%;
     font-size:16px;
     background-image:url('StellarBG.gif');
     background-repeat:repeat;
     color:var(--ltext);
}

 #container {
     max-width:900px;
     margin:0 auto;
     margin-top:10px;
     height:100%;
}


/* You can also apply a custom cursor to specific elements, like links */
a:hover {
  cursor: url("CursorLink.png"), auto;
}

@font-face {
  font-family: 'Lieth'; /* A name you choose to refer to the font later */
  src: url('Lieth.ttf') format('ttf'),
       url('Lieth.ttf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Sparkle'; /* A name you choose to refer to the font later */
  src: url('SparkleFont.ttf') format('ttf'),
       url('SparkleFont.ttf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Twinkle'; /* A name you choose to refer to the font later */
  src: url('TwinkleFont.ttf') format('ttf'),
       url('TwinkleFont.ttf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Constantia'; /* A name you choose to refer to the font later */
  src: url('Constantia.ttf') format('ttf'),
       url('Constantia.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Kelvinch'; /* A name you choose to refer to the font later */
  src: url('Kelvinch-Roman.otf') format('otf'),
       url('Kelvinch-Roman.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Kelvinch'; /* A name you choose to refer to the font later */
  src: url('Kelvinch-Italic.otf') format('otf'),
       url('Kelvinch-Italic.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: italic;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Kelvinch'; /* A name you choose to refer to the font later */
  src: url('Kelvinch-Bold.otf') format('otf'),
       url('Kelvinch-Bold.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: 900; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Kelvinch'; /* A name you choose to refer to the font later */
  src: url('Kelvinch-BoldItalic.otf') format('otf'),
       url('Kelvinch-BoldItalic.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: 900; /* Optional: specifies the weight of this font file */
  font-style: italic;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Flawless'; /* A name you choose to refer to the font later */
  src: url('Flawless.ttf') format('ttf'),
       url('Flawless.ttf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

@font-face {
  font-family: 'Owl'; /* A name you choose to refer to the font later */
  src: url('Owl.otf') format('otf'),
       url('Owl.otf') format('woff'); /* Paths and formats to the font files */
  font-weight: normal; /* Optional: specifies the weight of this font file */
  font-style: normal;  /* Optional: specifies the style of this font file */
}

.lieth {
    /* Override the font for the span element */
    font-family: "Lieth";
    /* You can add other styles here too, like color or size */
    color: var(--ltext); 
}

.english {
    /* Override the font for the span element */
    font: 'constantia'; 'cambria', sans-serif;
    /* You can add other styles here too, like color or size */
    color: var(--ltext); 
}

.navbutton {
    cursor: url("CursorLink.png"), auto;
}

.notifbutton {
    cursor: url("CursorLink.png"), auto;
}

.contentbutton {
    cursor: url("CursorLink.png"), auto;
}

/* 1. Hide the default radio button */
input[type="radio"] {
    display: none; /* Hides the original input visually, while keeping it functional for accessibility */
}

/* 2. Style the label to act as the new radio button container */
input[type="radio"] + label {
    display: inline-block;
    font-size: 32px; /* Adjust size of the unicode character */
    cursor: pointer;
    padding-left: 10px; /* Space between the custom radio button and the label text */
}

/* 3. Define the default (unchecked) state using a pseudo-element */
input[type="radio"] + label::before {
    content: "✧"; /* Unchecked radio button (blue circle) */
    display: inline-block;
    margin-right: 0.5em; /* Space between the character and label text */
}

/* 4. Define the checked state using the :checked pseudo-class and adjacent sibling selector */
input[type="radio"]:checked + label::before {
    content: "✦"; /* Checked radio button (button with a dot) */
}

.star {
    position: absolute;
    /* Creates a 4-point nova star shape */
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    /* Creates a 5-point star shape */
    /* clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); */
    background-color: #FFF0F5;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFF0F5, 0 0 30px #FFC0CB, 0 0 40px #C72490;
    width: 40px;
    height: 45px;
    pointer-events: none; /* Allows clicking through stars */
    animation: burst 1s ease-out forwards;
    opacity: 0;
}

@keyframes burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        /* --x and --y are set by JS */
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.5);
        opacity: 0;
    }
}

/* Sortable tables */
table.sortable th {
  color:var(--bgcolor);
  cursor: url("CursorLink.png"), auto;
}

.tablesort td {
  border: 2px solid var(--border);
  color: var(--ltext);
  font: 16px 'constantia'; 'cambria', sans-serif;
  padding: 10px;
  text-shadow: 5px 5px 5px #000000;
  margin: 5px;
}

.tablesort-button {
  padding: 8px 12px;     /* Space between text and border */
  background-color: var(--accent); /* Button background color */
  color: white;          /* Text color */
  border: 8px ridge var(--border); /* Border style and color */
  border-radius: 4px;    /* Rounded corners */
  cursor: url("CursorLink.png"), auto;
  text-align: center;    /* Centers the text */
  text-decoration: none; /* Removes default link underline if applicable */
  font-weight: bold;     /* Ensures it looks like a header (optional, th is already bold) */
  margin: 4px;           /* Optional: spacing between headers */
  transition: background-color 0.3s; /* Smooth transition for hover effects */
}

/* Add hover effects for interactivity */
.tablesort-button:hover {
  background-color: var(--ltext);
}

/* Add active (pressed) effects */
.tablesort-button:active {
  background-color: #FF5C95;
  transform: translateY(1px); /* Slight movement to simulate press */
}

details > summary {
    cursor: url("CursorLink.png"), auto;
    list-style-type: none;
    display: inline;
}

details > summary::-webkit-details-marker {
    display: none;
    display: inline;
}

details > summary::before {
    content: '✧';
    display: inline;
}

details[open] > summary::before {
    content: '✦';
    display: inline;
}

details {
    border: 1px solid var(--border);
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

.sparkle-font {
    /* Override the font for the span element */
    font-family: "Sparkle";
    /* You can add other styles here too, like color or size */
    color: var(--ltext); 
}

.twinkle-font {
    /* Override the font for the span element */
    font-family: "Twinkle";
    /* You can add other styles here too, like color or size */
    color: var(--ltext); 
}

/*shimmer text and image class="shimmer"*/
.shimmer {
  color: var(--ltext);
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 2.5s infinite;
  max-width: 200px;
}

@keyframes shimmer {
  100% {
    mask-position: left
  }
}

/*pink text and image class="pink"*/
.pink {
	background: url("Images/Pink.gif");
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*nova text and image class="nova"*/
.pinknova {
	background: url("Images/PinkNova.gif");
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*rainbow text and image class="rainbow"*/
.rainbow {
	background: url("Images/Rainbow.gif");
        -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rainbow:hover, .rainbow:active {
	background: url("Images/Rainbow.gif");
        -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 21px #fff,
    0 0 42px #fff, /* Color of the outer glow */
    0 0 82px #fff,
    0 0 92px #fff,
    0 0 103px #fff,
    0 0 112px #fff;
}

/*galactic text and image class="galactic"*/
.galactic {
	background: url("Images/Galactic.gif");
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.glow-text {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #FFC0CB,
    0 0 10px #FFC0CB,
    0 0 21px #C72490,
    0 0 42px #C72490, /* Color of the outer glow */
    0 0 82px #C72490,
    0 0 92px #730B42;
}

.glow-text:hover, .glow-text:active {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #FFF,
    0 0 10px #FFF,
    0 0 21px #FFF,
    0 0 42px #FFC0CB, /* Color of the outer glow */
    0 0 82px #FFC0CB,
    0 0 92px #FFC0CB;
    0 0 102px #FFC0CB;
    0 0 112px #FFC0CB;
    0 0 122px #C72490;
    0 0 132px #C72490;
    0 0 142px #730B42;
}

.content-glow-text {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #550033,
    0 0 10px #730B42,
    0 0 21px #FFC0CB,
    0 0 42px #FFC0CB, /* Color of the outer glow */
    0 0 82px #C72490,
    0 0 92px #C72490;
}

.content-glow-text:hover {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #fff,
    0 0 10px #FFF,
    0 0 21px #FFF,
    0 0 42px #FFC0CB, /* Color of the outer glow */
    0 0 82px #FFC0CB,
    0 0 92px #C72490;
}

.white-glow-text {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #FFF,
    0 0 10px #FFF,
    0 0 21px #FFF0F5,
    0 0 42px #FFF0F5, /* Color of the outer glow */
    0 0 82px #FFC0CB,
    0 0 92px #FFC0CB;
}

.white-glow-text:hover {
  color: #fff; /* Main text color */
  /* Applying multiple shadows to create the glow effect */
  text-shadow:
    0 0 7px #FFC0CB,
    0 0 10px #FFC0CB,
    0 0 21px #C82481,
    0 0 42px #C82481, /* Color of the outer glow */
    0 0 82px #3A0519,
    0 0 92px #3A0519;
}

.glowing-border {
    border: 2px solid #ffffff;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

.shadow-text {
     text-shadow: 5px 5px 5px #730B42;
}

.light-text {
     text-shadow: 5px 5px 5px #fff0f5;
}

.box-glow {
  box-shadow: 0 0 50px 15px #ffffff;
}

h1 {
 color: var(--ltext);
 font-weight: normal;
 font-size: 100px;
 text-align: center;
 margin-top:0;
}

h2.a {
 color: var(--ltext);
 font-family: Lieth;
 font-weight: normal;
 font-size: 80px;
 margin-top:0;
 padding:0px;
}

h2.b {
 color: var(--ltext);
 font: 'kelvinch'; 'constantia', sans-serif;
 font-weight: normal;
 font-size: 30px;
 margin-top:0;
 padding:0px;
}


p.a {
 color: var(--ltext);
 font: 65px Lieth;
 padding:5px;
 text-shadow: 5px 5px 5px #000000;
 margin-top:0;
 margin:0;
 padding:0px;
}

p.b {
 color: var(--ltext);
 font: 18px 'constantia', serif;
 padding:5px;
 text-shadow: 5px 5px 5px #000000;
 margin-top:0;
 padding:0px;
}

p.c {
 color: var(--ltext);
 font: 12px 'constantia', serif;
 text-shadow: 5px 5px 5px #000000;
 margin-top:0;
 margin:0;
 padding:0px;
}

a:link {
  color: var(--accent);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

a:visited {
  color: var(--visited);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

a:visited:hover {
  color: var(--ltext);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

a:visited:active {
  color: var(--border);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

a:hover {
  color: var(--ltext);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

a:active {
  color: var(--border);
  background-color: transparent;
  text-decoration: none;
  cursor: url("CursorLink.png"), auto;
}

.hover:hover {
  color: var(--border);            /* Text color when hovered */
  text-decoration: underline; /* Adds an underline when hovered */
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 100px;
  font-family: serif;
  background-color: black;
  font-size: 16px;
  color: #FFF0F5;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* <x class="tooltip">Text<span class="tooltiptext">Tooltip text</span></x> */


/* Lieth tooltip container */
.liethtooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Lieth tooltip text */
.liethtooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  font-family: Lieth;
  background-color: black;
  color: #FFF0F5;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.liethtooltip:hover .liethtooltiptext {
  visibility: visible;
}

.sparkleshape {
  height: 115px;
  width: 95px;
  background: var(--ltext);
  mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

.novashape {
  --b: 10px; /* border thickness */

  height: 115px;
  width: 95px;
  background: var(--ltext);
  mask: radial-gradient(#0000 71%, #000 72% calc(72% + var(--b)),#0000 calc(73% + var(--b))) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

/* Glyph, by Harry Roberts */

hr.nova {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double var(--ltext);
    color: var(--ltext);
    text-align: center;
}
hr.nova:after {
    content: "✧✦✧";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 2.25em;
    padding: 0 0.25em;
    background: var(--bgcolor);
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.table-center {
  display: flex;
  justify-content: center;
}

.table-right {
  display: flex;
  justify-content: right;
}

.table-left {
  display: flex;
  justify-content: left;
}

.table-border, .table-border th, .table-border tr, .table-border td {
  table-layout: fixed;
  width: 325px;
  border: 2px solid var(--border);
}

.table-border2, .table-border2 th, .table-border2 tr, .table-border2 td {
  table-layout: fixed;
  border: 2px solid var(--border);
}

.table-no-border, .table-no-border th, .table-no-border tr, .table-no-border td {
  table-layout: fixed;
  width: 325px;
}

li::marker {
  content: "✦ "; /* Use a symbol or character */
  color: var(--ltext); /* You can also change the color */
}

ul {
  margin: 0;
  padding: 0;
  font-family: constantia, cambria, sans-serif;
}

.list {
  font-family: constantia, cambria, sans-serif;
  text-shadow: 5px 5px 5px var(--bgcolor);
}

.list a {
  margin: 0px;
  padding: 0px;
  font-family: constantia, cambria, sans-serif;
  text-shadow: 5px 5px 5px var(--bgcolor);
  color: var(--accent)
}

.stellarbg {
     background-image:url('StellarBG.gif');
     background-repeat:repeat;
}

.image-border {
  border: 8px double var(--accent);
}

.image-border:visited {
  border: 8px double var(--visited);
}

.image-border:visited:hover {
  border: 8px double var(--ltext);
}

.image-border:visited:active {
  border: 8px double var(--border);
}

.image-border:hover {
  border: 8px double var(--ltext);
}

.image-border:active {
  border: 8px double var(--border);
}

/*div gallery*/
div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.gallery-item {
  margin: 5px;
  border: 2px solid var(--accent);
  width: 75px;
}

div.gallery-item:hover {
  border: 2px solid var(--ltext);
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}
/*end div gallery*/

.box {
  background-color: var(--bgcolor);
  border: 2px solid var(--border);
  padding: 0px;
  margin: 0px;
}

th, td {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 1px;
  padding-right: 1px;
}

  .shadow-box {
    /* Horizontal offset: 5px, Vertical offset: 5px, Blur: 10px, Spread: 2px, Color: gray */
    box-shadow: 5px 5px 10px 2px gray;
  }

/*Radio button tabs code/
/* Hide radio inputs (accessibly) */
.tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
 
/* Style tab triggers */
.tab-triggers {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
 
.tab-trigger {
  padding: 1px 8px;
  background: var(--accent);
  cursor: url("CursorLink.png"), pointer;
  border-radius: 4px 4px 0 0;
}
 
/* Active tab styling */
#tab1:checked ~ .tab-triggers label[for="tab1"], 
#tab2:checked ~ .tab-triggers label[for="tab2"],
#tab3:checked ~ .tab-triggers label[for="tab3"] {
  background: var(--border);
  border-radius: 4px 4px 0 0;
  color: var(--border);
  border: 2px solid var(--border);
}
 
/* Hide all tab content by default */
.tab-content {
  display: none;
  padding: 16px;
  border: none;
  border-radius: 0 4px 4px 4px;
}
 
/* Show content for checked tab */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

/* Focus styles */
.tab-input:focus ~ .tab-triggers .tab-trigger {
  outline: 5px solid var(--border);
}

 #header {
     max-width:830px;
     height:65px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     background-image:url('PGBGsm.jpg');
     background-color:#000000;
     border:8px double var(--border);
}

 .title {
     font-size:42px;
     text-align:center;
     text-shadow: 5px 5px 5px var(--ltext);

}

 #wrapper {
     margin:0 auto;
     max-width:860px;
}

.content {
  padding:10px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:wrap;
     max-width:900px;
}

 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
     border:8px double var(--border);
     background-color:var(--bgcolor);
     overflow:auto;
}
 .box-one, .box-two {
     max-height:150px;
     width:402px;
     margin-left:5px;
}

 .box-one {
     margin-top:5px;
     margin-right:5px;
     margin-left:5px;
}

.navDiv.minimized {
    max-height: 40px;
}

.notifDiv.minimized {
    max-height: 40px;
}

.contentDiv.minimized {

}

 .box-two {
     margin-top:5px;
     margin-right:5px;
     margin-left:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     width:418px;
     height:326px;
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     margin-right:5px;
     margin-bottom:5px;
     width:830px;
     height:550px;
     /* was 550px */
     max-height:770px;
}
 .section-title {
     text-align:center;
     padding-top:0px;
     padding-bottom:0px;
     font: 30px 'twinkle';
     background-image:url('Title.jpg');
     background-repeat: no-repeat; 
     background-position: center; 
     color:var(--ltext);
     font-weight:normal;
}

 .content-title {
     text-align:center;
     padding-top:0px;
     padding-bottom:0px;
     font: 42px 'twinkle';
     background-image:url('Title.png');
     background-repeat: no-repeat; 
     background-position: center; 
     color:var(--ltext);
     font-weight:normal;
}

 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:300px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}

 .link-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:600px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:3px;
     margin-bottom:1px;
}

 button {
     cursor: url("Cursor.png"), auto;
     width:143px;
     height:39px;
     color:var(--accent);
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     border:2px solid var(--accent);
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
     padding-right:13px;
}

 button:hover, .button:active  {
     cursor: url("Cursor.png"), auto;
     width:143px;
     height:35px;
     color:var(--accent);
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     border:2px solid var(--border);
     margin-top:5px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink { 
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     object-fit: cover;
     background-position:center center;
     font-family: constantia, cambria, sans-serif;
     border:2px solid var(--accent);
     text-decoration: none;
     display: inline-block;
     padding: 6px 12px;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink:hover {
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     background-repeat:no-repeat;
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     border:2px solid var(--ltext);
     display: inline-block;
     padding: 6px 12px;
     text-decoration:none;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink:visited {
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     background-repeat:no-repeat;
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     border:2px solid var(--visited);
     display: inline-block;
     padding: 6px 12px;
     text-decoration:none;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink:visited:hover { 
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     object-fit: cover;
     background-position:center center;
     font-family: constantia, cambria, sans-serif;
     border:2px solid var(--ltext);
     text-decoration: none;
     display: inline-block;
     padding: 6px 12px;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink:visited:active { 
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     object-fit: cover;
     background-position:center center;
     font-family: constantia, cambria, sans-serif;
     border:2px solid var(--bgcolor);
     text-decoration: none;
     display: inline-block;
     padding: 6px 12px;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.buttonlink:active {
     cursor: url("CursorLink.png"), auto;
     width:116px;
     height:23px;
     background-image:url('Images/Button.png');
     background-repeat:no-repeat;
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     font-weight: normal;
     text-align: center;
     vertical-align: middle;
     border:2px solid var(--border);
     display: inline-block;
     padding: 6px 12px;
     text-decoration:none;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}

.link-tab {
     cursor: url("Cursor.png"), auto;
     width:143px;
     height:30px;
     background-image:url('Images/Button.png');
     background-repeat:no-repeat;
     color: #FFF0F5;
     font-family: constantia, cambria, sans-serif;
     font-size: 20px;
     border:2px solid var(--border);
     text-decoration:none;
     padding-top:5px;
     margin-top:3px;
     margin-bottom:3px;
     margin-left:1px;
     margin-right:1px;
}


.link-tab:hover, .link-tab:active  {
     cursor: url("Cursor.png"), auto;
     width:143px;
     height:30px;
     background-image:url('Images/Button.png');
     color:var(--accent);
     text-decoration:none;
     border:2px solid var(--accent);
     margin-top:5px;
     margin-left:1px;
     margin-right:1px;
}

.link-tab a {
    color: var(--accent);
    text-decoration:none;
  }

.sticky-div {
  position: sticky;
  top: 0; /* Sticks to the top of the viewport when it reaches this position */
  z-index: 1;
  /* Add other styles as needed */
}

.scroll {
  overflow-y: scroll;
  scrollbar-color: var(--accent) var(--border); /* Thumb color then Track color */
  scrollbar-width: thin; /* Or 'auto' */
}

 #footer {
     max-width:830px;
     height:45px;
     margin-left:5px;
     margin-right:5px;
     margin:0 auto;
     text-align:center;
     background-color: var(--bgcolor);
     border:8px double var(--border);
}
 #footer p {
     background-color:var(--accent);
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}

textarea {
  background-color:var(--ltext);
  color:var(--dtext);
  font-size:10px;
  }

 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:94%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
    .box-two {
      height:115px;
    }
     .box-three {
         width:98%;
    }
     .box-four {
         height:326px;
    /* was 326px;*/
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
     .link-wrapper {
         width:300px;
    }
     .table-border {
         width:100%;
}
     .table-border2 {
         width:98%;
}
     .table-no-border {
         width:98%;
}

 @media only screen and (min-height: 1081px) {
     html, body {
         overflow:visible;
    }
    #header {
      width:94%;
    }
     #container {
         width:100%;
    }
     .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
         width:100%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .box-four {
         height:100%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
     .link-wrapper {
         width:600px;
    }
     .table-border {
         width:100%;
}
     .table-border2 {
         width:100%;
}

.bouncing-image {
  /* Set image size */
  width: 200px; 
  height: auto;
  position: fixed; /* Position relative to the viewport */
}

/* X-axis animation wrapper */
.wrapper-x {
  animation: x-move 10s linear infinite alternate; /* Adjust duration to change speed */
}

/* Y-axis animation wrapper */
.wrapper-y {
  animation: y-move 8s linear infinite alternate; /* Adjust duration to change speed */
}

/* Keyframes for horizontal movement */
@keyframes x-move {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move to the far right edge minus the image width (100px) */
    transform: translateX(calc(100vw - 100px)); 
  }
}

/* Keyframes for vertical movement */
@keyframes y-move {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Move to the bottom edge minus the image height (or a similar value) */
    transform: translateY(calc(100vh - 100px));
  }
}