@charset "utf-8";
/* CSS Document */

body {
    background-color: #ffe;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #eae;
}

body, td, th {
    font-family: "Times New Roman", Times, serif; 
    font-size: 14px; 
    color: #c00;
}

a {
    text-decoration: none;
    font-size: 24px;
    color: #020;
    text-align: center;
}

a:link, a:visited {
    text-decoration: none;
    color: #008;
    font-family: "times new roman";
    font-size: 18px;
    text-align: center;
}

a.x:hover {
    text-decoration: none;
    font-family: "times new roman";
    font-size: 18px;
    color: red;
    background-color: #ddd;
    text-align: center;
}

h1.heading {
    font-family: Times New Roman, Times, serif;
    font-size: large;
    text-decoration: none;
    color: #008;
    text-align: center;
}

p.weathercharts-org {
    font-family: "courier new";
    font-size: 24px;
    color: #000;
    text-decoration: none;
    text-align: center;
}

p.weathercharts-org-1 {
    font-family: "courier new";
    font-size: 24px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    text-align: center;
}

p.weathercharts-org-2 {
    font-family: "times new roman";
    font-size: 20px;
    color: red;
    text-decoration: none;
    text-align: center;
}

table.weathercharts-org {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    background: #fff;
    border-collapse: collapse; 
    border-width: 1px;
    border-color: #227;
    border-style: solid;
}

table td {
    border: 1px solid black;
}

table.weathercharts-org-two {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    background: #fff;
    border-collapse: collapse;
    border: 3px solid #227;
    padding-left: 5em;
    border-width: 1px;
}

tr.weathercharts-org {
    height: 30px;
}

td.weathercharts-org {
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    text-align: center;
}

.style1 {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-small;
    color: black;
}

.font_size {
    font-size: 18px;
}

.weathercharts-org tr td div {
    font-size: 24px;
}

.textsize {
    font-size: 18px;
    color: #006;
}

.text_color_dark_blue {
    color: #006;
}

div.border_1 {
    border: 2pt solid #f98;
    width: 50%;
    margin: 0 auto;
    background-color: #ffd;
    border-radius: 10px;
}

p.round {
    border: 2px solid #f98;
    padding: 10px;
    width: 50%;
    margin: auto;
    text-align: center;
    background-color: #ffd;
    color: #036;
    font-family: "Courier New", monospace;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
}

/* Positioning and float rules for the icons */
.print-icon-left {
    position: relative;
    top: -12px;
    left: 15px;
    float: left;
    border-style: none;
}

.player-icon-right {
    position: relative;
    top: -12px;
    right: 15px;
    float: right;
    border-style: none;
}

/* Icon hover transition animation */
.round a img {
    transition: transform 0.3s ease;
    display: inline-block;
}

.round a:hover img {
    transform: scale(1.15);
}

p.round_two {
    border: 2px solid #f98;
    padding: 10px;
    width: 55%;
    margin: auto;
    text-align: center;
    background-color: #ffd;
    color: #036;
    font-family: "Courier New", monospace;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
}

img.round_border_max {
    display: block;
    margin: 0 auto;
    padding: 5px;
    border: 2px solid #008;
    background-color: #ffd;
    border-radius: 10px;
}

.center_boxes_vt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.box_vt {
    width: 9%;
    padding: 5px;
    text-align: center;
    background: #edffff;
    border: 1px solid #227;
    border-radius: 5px;
}

.hr {
    background-color: #aaa;
    color: #aaa;
    border: none;
    height: 2px;
    margin: auto;
    width: 95%;
}

/* --- Single Chart Viewer & Zero-Jumping Controls for Max Charts --- */

#chart-stage {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Hide all chart slides by default */
.chart-slide {
    display: none;
}

/* Default state: Show T+0 chart on initial load */
#t0 {
    display: block;
}

/* Hide T+0 whenever any other slide anchor is targeted */
#chart-stage:has(.chart-slide:target) #t0 {
    display: none;
}

/* Display whichever chart is targeted in the URL anchor */
.chart-slide:target {
    display: block !important;
}

/* Pointer cursor cue when hovering over chart images */
.chart-slide a img {
    cursor: pointer;
}