* {
    color-scheme: light dark; /* Explicitly support both modes */
    -webkit-text-fill-color: currentColor; /* Ensure text color is applied */
}

body,
html {
    background-color: #030303;
    height: 100%;
    padding: 0px;
    margin: 0px auto;
    text-decoration: none;
}
* html .threepxfix {
    margin-left: 3px;
}
img {
    border: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
}
#frameWrapper5 h1,
h2,
h3 {
    color: #ffffff;
}
h6 {
    font-size: 11px;
    font-weight: normal;
}
iframe {
    height: 100%;
    width: 100%;
    border: none;
}
form {
    clear: left;
    font-family: "Courier New", Courier, monospace;
    color: #cccccc;
    width: inherit;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14%;
}
table {
    margin-left: auto;
    margin-right: auto;
}

/***********CLASSES************CLASSES**************CLASSES*********/
.style2 {
    font-size: large;
    font-weight: bold;
}
.style3 {
    color: #000000;
}

.hidden {
    display: none;
    visibility: collapse;
}

.credits {
    font-weight: bold;
    font-size: 15px;
    color: #999999;
    text-align: left;
}
.mainPages {
    text-align: left;
}
p.textbox {
    margin-right: 0px;
}
p.submit {
    font-family: "Courier New", Courier, monospace;
    color: #00ff33;
    text-align: center;
}
.globalNavFocus a,
.libNavFocus a {
    color: #999999;
    font-size: 17px;
    font-weight: bold;
}
.libNavHeader {
    color: #999999;
    font-size: 26px;
    margin: 0px;
    padding: 0px;
}
.txtBox {
    font-size: 11px;
}
.NEW {
    color: #0000ff;
    background-color: #d2e9ff;
}
/************DIVS*****************DIVS**********************DIVS*******/
#wrapper {
    border: medium #000000 solid;
    font-family: "Courier New", Courier, monospace;
    color: #cccccc;
    height: 100%;
    min-height: 678px;
    min-width: 800px;
    padding: 0px;
    margin-top: -50px;
}
#wrapper a {
    text-decoration: none;
    font-family: "Courier New", Courier, monospace;
    color: #373737;
}
#frameWrapper,
#frameWrapper2,
#frameWrapper3,
#frameWrapper4 {
    width: 575px;
    background-color: #030303;
    font-family: Courier;
    text-align: justify;
    color: #ffffff;
    border: none;
    word-spacing: normal;
}
#updatesText {
    width: 700px;
}
#frameWrapper {
    font-size: 12px;
}
#frameWrapper2 {
    text-align: center;
}
#frameWrapper3 {
    text-align: center;
}
#frameWrapper2 a {
    font-size: 13px;
    color: #0066cc;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
#frameWrapper3 a {
    font-size: 15px;
    color: #0066cc;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
#frameWrapper4 {
    text-align: center;
    font-size: 12px;
}
#frameWrapper5 {
    font-size: 15px;
    text-align: left;
    color: #b4b4b4;
}
#frameWrapper6 {
    text-align: center;
    font-size: small;
    font-weight: normal;
}
#whereNow2 {
    font-size: 28px;
    text-align: center;
}

#ital {
    font-size: 11px;
    font-style: italic;
}
#blank {
    background-color: #030303;
}
#thankyou {
    text-align: center;
    background-color: #030303;
    font-family: "Courier New", Courier, monospace;
    color: #ffffff;
    font-size: 12px;
    font-weight: 100;
    margin-right: auto;
    margin-left: auto;
    padding: 8%;
}
#loveGods {
    text-align: center;
}
#loveGodText {
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: #999999;
}
#header {
    border: 1px #000000 solid;
    border-bottom: 7px #000000 solid;
    background-image: url(/images/header.jpg);
    height: 150px;
    padding-left: 1px;
}
#logo {
    float: right;
    clear: both;
    max-width: 100%; /* Ensures it doesn’t exceed the container width */
    height: auto; /* Maintains aspect ratio */
    border-top: none;
    border-right: 3.5px #000000 solid;
    border-left: thick #000000 solid;
    padding-top: 20px;
    margin: 0px;
    display: block; /* Ensures it respects layout constraints */
}


#globalNavFocus a {
    color: #0099ff;
    font-size: 20px;
    font-weight: bold;
}
#globalNav a {
    border-style: solid;
    border-width: 0.5px;
    border-color: transparent;
}
#globalNav a:hover {
    border-style: solid;
    border-width: 0.5px;
    border-color: #cccccc;
    background-color: #e6e6e6;
}
#globalNav ul,
#libNav ul {
    list-style-type: none;
    font-size: 20px;
    font-weight: bold;
    padding: 0px;
}
#globalNav ul,
#globalNav ul li {
    list-style: none;
    max-height: 60px;
    text-align: center;
    margin: auto;
    margin-bottom: 0px;
    padding: 0px;
}

#globalNav ul li {
    display: inline;
    height: 50px;
    padding: 0px 5px;
}
#globalNav {
    height: 20px;
    margin-top: 95px;
    margin-bottom: 0px;
    padding: 0px;
}
#globalNav a:hover,
#libNav a:hover,
#libListFrame a:hover,
#footerLogos a:hover {
    color: #0000ff;
}
#globalNav a:active,
#libNav a:active,
#libListFrame a:active,
#footerLogos a:active,
#frameWrapper2 a:hover {
    color: #99ccff;
    font-weight: bold;
}
#frameWrapper3 a:hover {
    color: #ffffff;
}
#frameWrapper2 a:active {
    color: #999999;
}
#frameWrapper3 a {
    color: #00ccff;
}
#libNav {
    float: right;
    clear: both;
    border: thick #000000 solid;
    border-top: none;
    border-left: none;
    background-image: url(/images/header.jpg);
    background-position: right;
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 501px;
}
#libNav a {
    border-style: solid;
    border-width: 0.5px;
    border-color: transparent;

    color: #999999;
}
#libNav a:hover {
    border-style: solid;
    border-width: 0.5px;
    border-color: #cccccc;
    background-color: #e6e6e6;
}
#libNav ul {
    margin: 0px;
    padding: 4px;
}
#libList {
    border: 0px;
    border-top: 2px #333333 groove;
    background-color: #ffffff;
    height: 480px;
    width: 501px;
    margin: 0px;
}
#libListFrame {
    background-color: #ffffff;
    font-family: "Courier New", Courier, monospace;
    color: gray;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    width: 1000px;
    padding-left: 7px;
    margin: 0px;
    padding-top: 5px;
    line-height: 1.3;
}

#libListFrame a {
    text-decoration: solid;
    font-family: "Courier New", Courier, monospace;
    color: blue;
    font-size: 14px;
    border-style: solid;
    border-width: 0.1px;
    border-color: #ffffff;
    padding-bottom: 1px;
}
#libListFrame a:hover {
    border-style: solid;
    border-width: 0.1px;
    border-color: #666666;
    background-color: #e6e6e6;
}

.band {
    font-weight: 900;
    font-style: normal;
    color: #1f1f1f;
pointer-events: none;
}

#globalNav a {
    color: #999999;
}

#globalNav a:hover {
}
#libListHeader {
    width: 483px;
    text-align: left;
    font-weight: bold;
    font-size: 22px;
    text-shadow: 1px 1px 3px rgba(100, 100, 100, 0.3); /* Softer, lighter grey shadow */
    font-weight: 600;
    color: #959595;
    background-color: #ffffff;
    margin: 0px;
}
#popular {
    width: 270px;
    text-align: right;
    font-size: 11px;
    color: #000000;
    background-color: #ffffff;
    margin: 0px;
}
#about {
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    font-family: "Courier New", Courier;
    font-size: 15px;
    font-weight: 100;
    text-align: left;
}
#frameMain {
    background-color: #ffffff;
    background-image: url(../images/frameMainBack.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
}
#mainContent {
    background-color: #ffffff;
    height: 75%;
    margin-right: 511px;
    margin-left: 0px;
    width: auto;
    padding-right: 0px;
    padding-left: 0px;
}
#frameHead {
    color: #999999;
    font-size: 26px;
    font-weight: bold;
    padding-top: 5px;
    text-align: center;
}
.txtBox {
    background-color: #cccccc;
    font-size: 11px;
}
#footer {
    clear: both;
    background-color: #030303;
    line-height: 30px;
    text-align: center;
    font-size: smaller;
    color: #cccccc;
    margin: 0px;
    margin-top: 10px;
    padding-top: 20px;
}
#footer a,
#frameWrapper6 a {
    padding: 5px;
    color: #0099ff;
    font-weight: bold;
}
#footer a:hover,
#frameWrapper6 a:hover {
    color: #66ccff;
}

.Focus:focus {
outline: none;
border: none;    
font-weight: bolder;
    background-color: #b4b4b486;
    text-shadow:
        0 0 0.05px red,
        1px 1px 0.05px red,
        -1px -1px 0.05px red,
        1px -1px 0.05px red,
        -1px 1px 0.05px red;
}

.Demos:focus,
.LiveAudio:focus,
.TVShows:focus,
.LiveVideo:focus,
.RadioShows:focus {
    font-weight: bolder;
    background-color: #b4b4b486;
    text-shadow:
        0 0 0.05px red,
        /* Barely noticeable glow */ 1px 1px 0.05px red,
        -1px -1px 0.05px red,
        1px -1px 0.05px red,
        -1px 1px 0.05px red; /* Very faint and narrow */
}

.activeNav {
    font-weight: bolder;
    background-color: #b4b4b486;
    text-shadow:
        0 0 0.05px red,
        1px 1px 0.05px red,
        -1px -1px 0.05px red,
        1px -1px 0.05px red,
        -1px 1px 0.05px red;
}


.libNavHeader {
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

#libListFrame a, #libListFrame a:visited {
    text-decoration: none;
    -webkit-text-decoration: none;
}

.tnptv {
    font-weight: 900;
    font-style: normal;
    pointer-events: none;
}




/* Default: Show desktop content and hide smartphone content */
#wrapper {
  display: block;
}

.smartphoneContent {
  display: none;
}

/* Styles for tablets and smaller devices (max-width: 820px) */
@media (max-width: 820px) {
  #wrapper {
    display: none; /* Hide the wrapper on tablets and smaller devices */
  }
  .smartphoneContent {
    display: block; /* Show smartphone content */
    padding: 15px; /* Consistent padding */
    font-size: 17px; /* Default font size */
    width: 100%; /* Ensure it takes the full width of its container */
    height: 100%; /* Allow content to fill the height */
    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
    overflow: auto; /* Allow scrolling if content overflows */
  }
}

@media (pointer: coarse) and (max-width: 820px) {
#libListFrame a{
        font-size: 15px;
line-height: 1.8;
    }
}

/* Styles for smaller smartphones (max-width: 600px) */
@media (max-width: 600px) {
  .smartphoneContent {
    background-color: #c0c0c0;
    padding: 12px;
    font-size: 16px;
  }
}

/* Styles for very small smartphones (max-width: 400px) */
@media (max-width: 400px) {
  .smartphoneContent {
    background-color: #b0b0b0;
    padding: 8px;
    font-size: 14px;
  }
}

/* High-Resolution Displays (Retina & High-DPI Screens) */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .smartphoneContent {
    background-color: #e0e0e0;
    font-size: 18px;
    padding: 18px;
  }
}

/* Ultra-High-Resolution Displays (Super Retina, 4K mobile screens, etc.) */
@media screen and (-webkit-min-device-pixel-ratio: 3),
       screen and (min-resolution: 288dpi) {
  .smartphoneContent {
    background-color: #f0f0f0;
    font-size: 19px;
    padding: 20px;
  }
}