body {
       width: 100%;
       height: 768px;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       font-family: Arial, sans-serif;
       text-align: center;
       background-color: #000000;
       background-image: url(cat.jpg);
       background-position: center;
       background-repeat: no-repeat;
}

#title {
       position: fixed;
       width: 100%;
       height: 5%;
       top: 4%;
       right: 0;
       bottom: auto;
       left: 0;
       font-size: 36px;
       font-weight: bold;
       text-align: center;
       color: #FFFFFF;
}

#title h1 {
       margin: 0;
       font: inherit;
       color: inherit;
}

#links {
       position: fixed;
       width: 100%;
       height: auto;
       top: 13%;
       right: 0;
       bottom: 77px;
       left: 30px;
       font-size: 24px;
       font-weight: bold;
       text-align: left;
       color: #FFFFFF;
       /* 24 links at this font size can be taller than the top/bottom bounds above on shorter
          viewports; without this, the overflow spills past this box's own edge and can sit over
          (and swallow clicks meant for) the Footer below instead of just being clipped/scrollable. */
       overflow-y: auto;
}

#links ul {
       list-style: none;
       margin: 0;
       padding: 0;
}

#Footer {
       position: fixed;
       width: 100%;
       left: 0;
       right: 0;
       bottom: 44px;
       text-align: center;
       font-size: 14px;
       color: #FFFFFF;
       opacity: 0.85;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 14px;
       /* Guarantees this sits above #links/#w3c even if their boxes overlap -- without this, the
          About link could be visually present but unclickable if a same-stacking-level sibling's
          box happens to paint over this same screen area. */
       z-index: 20;
}

#FolderInfo {
       white-space: nowrap;
}

a.textlink {
       display: inline-block;
       border: 1px solid currentColor;
       padding: 3px 10px;
       font-size: 12px;
       font-weight: bold;
       text-transform: uppercase;
       vertical-align: middle;
}

#w3c {
       position: fixed;
       width: 100%;
       height: auto;
       top: auto;
       right: 0;
       bottom: 15px;
       left: 0;
       text-align: right;
}

#w3c .copyright {
       margin: 0 12px 6px 0;
       font-size: 12px;
       font-weight: normal;
       color: #FFFFFF;
}

.w3cimage {
       border: 0;
       width:  88px;
       height: 31px;
}

/* Custom link styles */
a:active {
       text-decoration: none;
       color: #FFFFFF;
}

a:visited {
       text-decoration: none;
       color: #FFFFFF;
}

a:hover {
       text-decoration: underline;
       color: #FFFFFF;
}

a:link {
       text-decoration: none;
       color: #FFFFFF;
}

/* Donation links */
.donationform {
         font-size: 1em;
         font-weight: bold;
         color: black;
         text-decoration: none;
}

/* General text on error pages */

.donationbody {
       font-size: 1.6em;
       font-weight: bold;
       text-align: center;
       color: white;
}

.donationtext {
       font-size: 1.0em;
       font-weight: bold;
       font-style: italic;
       text-align: center;
#      background-color: red;
       color: white;
       text-shadow: 2px 2px 0 black;
}

.donationform {
       font-size: 1.4em;
       font-style: italic;
       text-align: center;
       color: red;
}

.donationlinks {
       font-size: 1.4em;
       text-align: center;
       word-spacing: 16em;
}