/* OBWX Styles */
:root {
    /* Text Variables*/
    --text-small: 0.875rem; /*14*/
    --text-normal: 1rem; /*16*/
    --text-medium: 1.125rem; /*18*/
    --text-large: 1.25rem; /*20*/
    --text-larger: 1.375rem; /*22*/
    --text-xlarge: 1.5rem; /*24*/
    --text-vlarge: 2rem; /*32*/
    --text-outTemp: 4rem; /*64*/
    /* Theme Variables*/
    --obwx-color: rgb(230,230,230);
    --obwx-background-color: rgb(0,0,0);
    --obwx-border-color: rgb(76,76,76);
    /* Dynamically Updated Variables */
    --outTemp-color: rgb(100,100,100);
    --wind-speed-dial: -45deg;
    --wind-max-dial: 45deg;
    --wind-dir-dial: 90deg;
    --rain-gauge-level: 105px;
    --metar-updated-color: rgb(100,100,100);
    --metar-rules-color: rgb(100,100,100);
    --forecast-p0-temp-color: rgb(100,100,100);
    --forecast-p1-temp-color: rgb(100,100,100);
    --forecast-p2-temp-color: rgb(100,100,100);
    --forecast-p3-temp-color: rgb(100,100,100);
    --forecast-p4-temp-color: rgb(100,100,100);
    --forecast-p5-temp-color: rgb(100,100,100);
    --wx-alert-0-color: #556655;
    --wx-alert-1-color: #556655;
    --wx-alert-2-color: #556655;
    --wx-alert-3-color: #556655;
    --wx-alert-4-color: #556655;
    --wx-alert-5-color: #556655;
}

/* Set some minimum heights */
.height-14 { min-height: 14rem; }

/* Remove Scrollbars */
html {
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

body {
    color: var(--obwx-color);
    background-color: var(--obwx-background-color);
}
main {
    max-width: 98%;
    min-width: 22rem;
    margin: auto;
    font-size: var(--text-medium);
}

/* Flex Utilities */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive Borders */
.bt { border-top: 1px solid var(--obwx-border-color); }
.bb { border-bottom: 1px solid var(--obwx-border-color); }
.bs { border-left: 1px solid var(--obwx-border-color); }
.be { border-right: 1px solid var(--obwx-border-color); }

@media screen and (min-width: 992px) {
.bt-lg { border-top: 1px solid var(--obwx-border-color); }
.bb-lg { border-bottom: 1px solid var(--obwx-border-color); }
.bs-lg { border-left: 1px solid var(--obwx-border-color); }
.be-lg { border-right: 1px solid var(--obwx-border-color); }
}

/* Logo Section */
.section-header {
    min-height: calc(var(--text-large) * var(--bs-body-line-height) * 3);
}

/* Alerts Section */
.wx-alert-0 { color: var(--wx-alert-0-color); }
.wx-alert-1 { color: var(--wx-alert-1-color); }
.wx-alert-2 { color: var(--wx-alert-2-color); }
.wx-alert-3 { color: var(--wx-alert-3-color); }
.wx-alert-4 { color: var(--wx-alert-4-color); }
.wx-alert-5 { color: var(--wx-alert-5-color); }

/* Update time and date section */
.updated-date,.updated-time {
    font-size: var(--text-medium);
}
@media screen and (min-width: 992px) {
    .updated-date-lg,.updated-time-lg {
        font-size: var(--text-large);
    }
}

/* Current weather section */
.current-wx-text, .feels-like{
    font-size: var(--text-large);
}
.outTemp {
    font-size: var(--text-outTemp);
    color: var(--outTemp-color);
}

/* Wind direction section */
.wind-grid {
    display: grid;
}
.wind-rose-container,
.wind-arrow-container,
.wind-text-container {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}
.rose-arrow {
    transition: transform 2500ms ease-in-out;
    transform: rotate(var(--wind-dir-dial));
}

/* Wind speed section */
.wind-speed-mph {
    width: 100%;
    position: absolute;
    bottom: 0px;
    font-size: var(--text-vlarge);
}
.windometer-legend-hi {
    width: 155px;
    text-align: right;
    display: inline-block;
}
.wind-meter {
    width: 140px;
    height: 70px;
    border-style: solid;
    border-color: #808080;
    border-width: 5px 5px 0px 5px;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
}
.windometer-arrow {
    width: 100%;
    height: 200%;
    display: block;
    position: absolute;
    top: 0;
    transform: rotate(var(--wind-speed-dial));
    transition: transform 2500ms ease-in-out;
}
.windometer-arrow:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 25px solid #c50a1d;
    position: absolute;
    top: 0px; /*Moves the arrow away or towards center of circle*/
    left: 48%; /*Centers the arrow on the box edge (use 0 degree rotation) */
}
.windometer-tickmark {
  width: 100%; /*No changes needed*/
  height: 200%; /*No changes needed*/
  display: block;
  position: absolute;
  top: 0;
}
.windometer-tickmark:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3px solid #808080; /*2px solid transparent*/
  border-right: 3px solid #808080; /*2px solid transparent*/
  border-top: 7px solid #808080;
  position: absolute;
  top: 2px; /*Moves the arrow away or towards center of circle*/
  left: 50%; /*Centers the arrow on the box edge (use 0 degree rotation) -2,198*/
}
.windometer-tickmark:nth-child(3) {
    transform: rotate(45deg);
}
.windometer-tickmark:nth-child(4) {
    transform: rotate(-45deg);
}
.windometer-tickmark-recentHi { 
  width: 100%; /*No changes needed*/
  height: 200%; /*No changes needed*/
  display: block;
  position: absolute;
  top: 0;
  transform: rotate(var(--wind-max-dial));
  transition: transform 2500ms ease-in-out;
}
.windometer-tickmark-recentHi:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 15px solid #00c8c8;
  position: absolute;
  top: 0px; /*Moves the arrow away or towards center of circle*/
  left: 50%; /*Centers the arrow on the box edge (use 0 degree rotation) -2,198*/
}

/* Rain Gauge Section */
.raingauge {
  width: 150px;
  height: 300px;
}
.raingauge-bucket {
  height: 118px;
  width: 100px;
  border: 5px solid #c8c8c8;
  border-top: none;
  border-radius: 0px 0px 20px 20px;
  position: relative;
  overflow: hidden;
}
.raingauge-rain {
  position: absolute;
  top: var(--rain-gauge-level);
  height: 120px;
  width: 100%;
  background-color: #0000cc; /* Blue inner rain*/
}
.raingauge-tape {
  position: absolute;
  width: 16px;
  border-style: solid;
  border-width: 2px 0px 0px 0px;
  border-color: #c8c8c8;
  left: 79px;
}
.raingauge-tape:nth-child(2) {
    top: 25%;
}
.raingauge-tape:nth-child(3) {
    top: 50%;
}
.raingauge-tape:nth-child(4) {
    top: 75%;
}
.raingauge-text {
    position: relative;
    top: 34px;
    font-size: var(--text-xlarge);
}
.rain-records {
    line-height: 1.75;
    font-size: var(--text-large);
}
.rain-title {
    text-align: right;
    padding-right: .5rem;
}
.rain-value {
    text-align: left;
    padding-left: .5rem;
}

/* Records and Extras */
.records-title {
    font-size: var(--text-small);
}
.records-time {
    font-size: var(--text-small);
}

/* Metar */
[class*="metar-"] {
    font-size: var(--text-normal);
    padding-top: 0.25rem;
}
.metar-location-name,
.metar-updated {
    font-size: var(--text-medium);
}
.metar-updated {
    color: var(--metar-updated-color);
}
.metar-header {
    width: fit-content;
    margin: auto;
}
.metar-rules {
    color: var(--metar-rules-color);
}

/* Almanac */
.alm-outer {
    padding: calc(var(--bs-body-line-height) * var(--text-medium)) 0;
}
.daylight,
.phase {
    font-size: var(--text-normal);
    position: relative;
}
.daylight {
    top: 0.25rem; 
}
.phase {
    top: -0.5rem;
}
[class$="rise-time"], [class$="set-time"] {
    font-size: var(--text-larger);
}

/* Forecast Section */
.forecast-p0-hilo-temp { color: var(--forecast-p0-temp-color); }
.forecast-p1-hilo-temp { color: var(--forecast-p1-temp-color); }
.forecast-p2-hilo-temp { color: var(--forecast-p2-temp-color); }
.forecast-p3-hilo-temp { color: var(--forecast-p3-temp-color); }
.forecast-p4-hilo-temp { color: var(--forecast-p4-temp-color); }
.forecast-p5-hilo-temp { color: var(--forecast-p5-temp-color); }