/* Version: 5 */

:root {
    --airpuff-yellow: #FFDD00; /* Define the yellow color if not already defined */
    --airpuff-green: #88C070; /* Soft olive green */
    --airpuff-dark-green: #5E8B54; /* Darker complementary green */
    --airpuff-pink: #E57373; /* Muted Blush Pink for softer contrast */
    --airpuff-teal: #5F9EA0; /* Muted Teal as a complementary accent */
    --airpuff-blue: #6A5ACD; /* Slate Blue */
    --airpuff-yellow: #FFDD00;
    --airpuff-coralpink: #FF7F7F;
    --airpuff-coralorange: #FF8C66;
    --airpuff-purple: #9370DB; /* light, warm purple */
    --airpuff-rose: #D97A7A; /* dusty rose */
}

a {
    color: #F90;
    text-decoration:underline;
    font-weight:normal;
}

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(106, 90, 205, 0.7); /* slate blue glow */
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(106, 90, 205, 0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(106, 90, 205, 0.7);
    }
}

.logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    animation: pulse-glow 2.5s infinite ease-in-out;
}

.logo:hover {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.8), 0 0 60px rgba(173, 216, 230, 0.9);
}

@media (max-width: 500px) {
    .logo {
        max-width: 150px;
    }
}


.basic {
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    padding: 20px;
    width: 80%; /* Optional: control header width */
    margin: 0 auto; /* Center the header section itself */
}

.body_main {
    background: #333333;
    color: #FFF;
    font-family: "Tahoma";
    font-style: normal;
    font-size: 1vw;
    font-weight: normal;
}

/* Button styling for the API Documentation link */
.button-link {
    display: inline-block;
    padding: 3px 6px;
    background-color: var(--airpuff-purple); /* Muted pink for buttons */
    color: #333; /* Darker color for contrast */
    font-size: 1em;
    font-weight: bold;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: var(--airpuff-rose); /* Teal on hover */
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover {
    background: #00d9ff;
}

.footer {
    color: #999;
    font-size: 1 em;
    text-align: center;
}

.header {
    color: #CCC; /* Use the same yellow */
    font-size: 3em;
    font-weight: bold;
    text-align: center; /* Center text within the header */
    margin: 0 auto; /* Center the header div within the main content */
    width: 80%; /* Control width of header content if needed */
}

.header-div {
    color: #F00;
    font-size: 1.2em;
    text-align: left; /* Ensure header text is left-aligned */
}

.header_yel {
    color: #FF0;
    font-size: 1.5em;
}

/* For all labels on the page */
label {
    font-size: 1.5em; /* Adjust to the desired size */
    color: inherit; /* Inherits the current color so no change to the existing color */
}

/* OR, if you only want to apply to specific labels, create a class */
.large-label {
    font-size: 3em;
    color: inherit;
}

.metarDialog {
    position: fixed;
    color: #FF0;
    font-family: "Tahoma";
    font-size: 0.625em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.metarDialog:target {
    opacity:1;
    pointer-events: auto;
}

.metarDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #666;
    background: -moz-linear-gradient(#ccc, #666);
    background: -webkit-linear-gradient(#ccc, #666);
    background: -o-linear-gradient(#ccc, #666);
}


.paragraph {
    color: #06F;
    font-family: Georgia;
    font-size: 1em;
    text-align: center; /* Center text within the paragraph */
    margin: 0 auto; /* Center the paragraph div within the main content */
    width: 80%; /* Control width of paragraph content if needed */
}

.paragraph p {
    color: var(--airpuff-green);
    font-size: 1.5em;
}

.paragraph_metar {
    color: #FFF;
    font-family: Georgia;
    font-style: normal;
    font-size: 1em;
}

.paragraph_cfb {
    color: #6495ED;
    font-family: Courier;
    font-style: normal;
    font-size: 24px;
    line-height: 28.8px;
}

.paragraph_lg {
    color: #90EE90;
    font-family: Courier;
    font-style: normal;
    font-size: 1.5em
}

.table_top {
    color: #FF0;
    font-size: 2.5em;
    text-align: left;
}

.table_main {
    border: 1;
    border-spacing: 5px;
    border-color: black;
    color: #FF0;
    font-size: 24px;
    text-align: left;
}

a.wxapi {
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a.wxapi:hover {
    color: #217dbb;
    text-decoration: underline;
}

a.wxapi::after {
    content: " ↗️";
}

.td {
    font-size: 0.65em;
    color: #6495ED;
    border: 1;
    text-align: center;
}

.td_cfb {
    color: #6495ED;
    font-family: Courier;
    font-style: normal;
    font-size: 0.75em;
    text-align: left;
}

.td_lg {
    color: #90EE90;
    font-family: Courier;
    font-style: normal;
    font-size: 0.75em;
    text-align: left;
}

.td_list {
    color: #FFF;
    border: 1;
    font-size: 0.35em;
    text-align: left;
}

.td_links {
    border: 0.25;
    color: #f93;
    font-family: Georgia;
    font-style: normal;
    font-size: 0.6em;
    text-align: left;
}

.td_links_lg {
    border: 0.25;
    color: #60f;
    font-family: Georgia;
    font-style: normal;
    font-size: 0.8em;
    text-align: left;
}

.td_links_sm {
    border: 0.25;
    color: #f93;
    font-family: Georgia;
    font-style: normal;
    font-size: 0.4em;
    text-align: left;
}

.td_list_lg {
    color: #FFF;
    border: 1;
    font-size: 1 em;
    text-align: left;
}

.td_pink {
    color: #F66;
    font-family: Courier;
    font-style: normal;
    font-variant: small-caps;
    font-size: 0.75em;
    text-align: left;
}

.td_titles {
    color: #FF0;
    font-family: Tahoma;
    text-align: left;
}

.td_reflinks {
    color: var(--airpuff-purple); /* Muted pink for buttons */
    font-family: Tahoma;
    text-align: center;
    font-size: 0.5em;
}

.th_titles {
    color: #FF0;
    text-align: left;
}

.th {
    color: #FF0;
    text-align: center;
}

.tr {
    border: 1;
    color: #FFF;
    text-align: center;
}

.tr_headers {
    font-size: 0.65em;
    border: 1;
    color: #FF0;
    text-align: center;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ifr_std {
    color: #F55;
    text-decoration: none;
    text-align: left;
    font-weight:normal;
    font-size: 8px;
}

.lifr_std {
    color: #F0F;
    text-decoration: none;
    text-align: left;
    font-weight: normal;
    font-size: 8px;
}

.missing_std {
    color: #999;
    text-decoration: none;
    text-align: left;
    font-weight: normal;
    font-size: 8px;
}

.mvfr_std {
    color: #55F;
    text-decoration: none;
    text-align: left;
    font-weight:normal;
    font-size: 8px;
}

.ukn_std {
    color: #FFA500;
    text-decoration: none;
    text-align: left;
    font-weight:normal;
    font-size: 8px;
}

.vfr_std {
    color: #0F0;
    text-decoration: none;
    text-align: left;
    font-weight:normal;
    font-size: 8px;
}

a.def:link, a.def:visited, a.def:hover, a.def:active {
    color:#F90;
    text-decoration:underline;
    font-weight:normal;
}

a.tools:link, a.tools:visited, a.tools:hover, a.tools:active {
    color: var(--airpuff-purple); /* Muted pink for buttons */
    text-decoration:underline;
    font-weight:normal;
}

a.wxapi:link, a.tools:visited, a.tools:hover, a.tools:active {
    color: var(--airpuff-pink); /* Muted pink for buttons */
    text-decoration:underline;
    font-weight:normal;
}

a.ifr:link, a.ifr:visited, a.ifr:hover, a.ifr:active {
    color:#F55;
    text-decoration:underline;
    font-weight:normal;
}

a.lifr:link, a.lifr:visited, a.lifr:hover, a.lifr:active {
    color:#F0F;
    text-decoration:underline;
    font-weight:normal;
}

a.missing:link, a.missing:visited, a.missing:hover, a.missing:active {
    color:#999;
    text-decoration:underline;
    font-weight:normal;
}

a.mvfr:link, a.mvfr:visited, a.mvfr:hover, a.mvfr:active {
    color:#55F;
    text-decoration:underline;
    font-weight:normal;
}

a.vfr:link, a.vfr:visited, a.vfr:hover, a.vfr:active {
    color:#0F0;
    text-decoration:underline;
    font-weight:normal;
}

/* Centering and styling for the table */
.styled-table {
    margin: 0 auto; /* Center the table */
    border-collapse: collapse;
    width: 60%; /* Adjust width as needed */
}

.styled-table th, .styled-table td {
    border: 2px solid #4B0082; /* Indigo border for subtle contrast */
    padding: 5px 10px; /* Adjust padding for comfortable spacing */
}

.styled-table th {
    text-align: right; /* Right-justify keys */
    background-color: #5F9EA0; /* Muted teal background for header cells */
    color: #CCC; /* White text for header */
}

.styled-table td {
    background-color: #483D8B; /* Darker slate blue for data cells */
    color: #FFFFFF; /* Thistle text for readability against dark background */
    text-align: left;
}

.header-title {
    color: var(--airpuff-teal);
    font-size: 4em;
    font-weight: bold;
    text-align: center; /* Ensure header text is left-aligned */
    margin: 0 auto;
}

.header img {
    width: 100px;
    margin-right: 20px;
    float: left;
}