/*
This is a redesign concept made by @jackwellerreal on Github
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap");

:root {
    --border-radius-small: 10px;
    --border-radius-big: 10px;

    --transition: ease 0.25s;
}

@media (prefers-color-scheme: light) {
    :root {
        --color: #000000;
        --color-minor: #666666;
        --color-header: #ffffff;

        --hover-filter: #0000001f;

        --background: #ffffff;

        --brand-main: #2461e5;
        --brand-dark: #0c2762;

        --important-warning: hsl(45, 100%, 69%);
        --important-warning-dark: hsl(45, 100%, 59%);
        --important-warning-text: #001f43;

        --alert-warning: #ffd860;
        --alert-warning-dark: #ffcb2d;
        --alert-warning-text: #001f43;

        --footer: #f7f7f7;
        --footer-dark: #cccccc;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #ffffff;
        --color-minor: #999999;
        --color-header: #000000;

        --hover-filter: #ffffff1f;

        --background: #000000;

        --brand-main: #001f43;
        --brand-dark: #00336d;

        --alert-warning: #d6a200;
        --alert-warning-dark: #b48700;
        --alert-warning-text: #001f43;

        --footer: #080808;
        --footer-dark: #333333;
    }
    .footer-maps img {
        filter: invert(1);
    }
}

body {
    background-color: var(--background);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    color: var(--color);
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
}

button {
    background: var(--brand-main);
    color: #ffffff;
    margin-top: 16px;
    padding: 8px;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    border: none;
    outline: inherit;
    transition: var(--transition);
}

button:hover {
    background: var(--brand-dark);
}

.header {
    display: flex;
    justify-content: space-between;
    background-color: var(--brand-main);
    padding: 20px 40px;
}

.header-logo {
    display: flex;
    align-items: center;
    width: fit-content;
}

.header-logo-img {
    height: 55px;
}

.header-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-menu-item {
    display: flex;
    position: relative;
    align-items: center;
    height: fit-content;
    margin-left: 24px;
}

.header-menu-item a {
    color: #fff;
    font-size: 1.25em;
    font-weight: 600;
    text-decoration: none;
}

.header-menu-item a:hover {
    text-decoration: underline;
}

.header-menu-item svg {
    height: 24px;
    fill: #fff;
}

.alert {
    display: flex;
    height: 90px;
    background-color: var(--alert-warning);
    color: var(--alert-warning-text);
}

.alert-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 90px;
    background-color: var(--alert-warning-dark);
}

.alert-icon svg {
    height: 50%;
    fill: var(--alert-warning-text);
}

.alert-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 90px);
    padding: 10px 25px;
}

.alert-text h2 {
    width: fit-content;
    font-size: 1.5em;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--alert-warning-text);
}

.alert-text-states {
    display: flex;
}

.alert-text-states a {
    color: var(--alert-warning-text);
    height: fit-content;
    font-size: 1.25em;
    font-weight: 600;
    text-decoration: none;
    margin-right: 24px;
}

.main {
    width: 75%;
    min-height: calc(calc(100vh - 105px) - 80px);
    margin: 40px auto;
}

.main-today h1 {
    font-size: 2rem;
}

.main-today-asof {
    font-size: 1.5rem;
}

.main-today-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    margin-top: 20px;
    column-gap: 48px;
}

.main-today-item {
    width: 100%;
}

.today-temp {
    padding: 8px;
    border-radius: var(--border-radius-big);
    transition: var(--transition);
}

.today-temp:hover {
    background-color: var(--hover-filter);
}

.main-today-item h1 {
    display: flex;
    font-size: 4.5em;
}

.main-today-item h3 {
    font-size: 1.5em;
    color: #808080;
}

.today-more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    column-gap: 48px;
}

.today-more-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: var(--border-radius-big);
    transition: var(--transition);
}

.today-more-item:hover {
    background-color: var(--hover-filter);
}

.today-more-item h2 {
    font-size: 2em;
    height: fit-content;
}

.main-other {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 12px;
    margin-top: 40px;
}

.main-other-item {
    padding: 8px;
    border-radius: var(--border-radius-big);
    transition: var(--transition);
}

.main-other-item:hover {
    background-color: var(--hover-filter);
}

.main-other-item h1 {
    font-size: 3rem;
}

.main-other-item h2 {
    font-size: 1.5rem;
}

.main-other-item h3 {
    font-size: 1.25rem;
}

.main-services {
    margin-top: 40px;
}

.main-services-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    min-height: 315px;
    margin-top: 20px;
}

.main-services-item {
    height: 100%;
    padding: 20px;
    background-color: var(--brand-main);
    color: var(--color-header);
    text-decoration: none;
    border-radius: var(--border-radius-big);
    transition: var(--transition);
}

.main-services-item:hover {
    background-color: var(--brand-dark);
}

.main-services-item h1 {
    font-size: 24px;
    color: #fff;
}

.main-more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
}

.main-more-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    min-height: 150px;
    margin-top: 20px;
}

.main-more-content-item a {
    font-size: 1.2rem;
    color: var(--color-minor);
    fill: var(--color-minor);
}

.main-more-content-item svg {
    height: 1.2rem;
    vertical-align: -0.125em;
}

.footer {
    color: var(--color-minor);
    background-color: var(--footer);
    height: fit-content;
    padding: 20px calc(calc(100% - 75%) / 2);
}

.footer a {
    color: var(--color-minor) !important;
    fill: var(--color-minor) !important;
}

.footer a span {
    color: var(--color-minor) !important;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1.4em 0;
}

.footer-item {
    padding: 0 16px;
}

.footer-item a {
    display: block;
    font-size: 14px;
    margin-bottom: 16px;
}

.footer-three {
    display: grid;
    grid-template-columns: repeat(3, auto);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dotted var(--color-minor);
    text-align: center;
}

.footer-three a {
    margin-bottom: 0px;
}

.footer-warnings {
    padding-bottom: 16px;
    margin: 0;
    border-bottom: 1px dotted var(--color-minor);
    text-decoration: none;
}

.footer-warnings span {
    text-decoration: underline;
}

.footer-warnings svg {
    height: 14px;
    vertical-align: -0.125em;
}

.footer-maps {
    display: flex;
    justify-content: space-around;
    height: 90px;
    margin-bottom: 16px;
    border-bottom: 1px dotted var(--color-minor);
}

.footer-maps span {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 8px;
}

.footer-maps img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

.footer-social {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dotted var(--color-minor);
}

.footer-social a {
    margin: 0;
    text-decoration: none;
}

.footer-social svg {
    height: 14px;
    vertical-align: -0.125em;
}

.footer-social span {
    text-decoration: underline;
}

.footer-acknowledgement {
    clear: both;
    width: 100%;
    font-size: 14px;
    border-top: 1px dotted var(--color-minor) !important;
    padding-top: 1.4em;
    text-align: center;
    color: var(--color) !important;
}

.footer-acknowledgement a {
    color: var(--color) !important;
    text-decoration: underline;
}

.footer-acknowledgement strong {
    display: block;
    font-weight: bold;
}

/* disclaimer */

.disclaimer {
    position: fixed;
    color: var(--color);
    font-weight: 600;
    text-decoration: none;
    bottom: 8px;
    right: 8px;
}

.disclaimer:hover {
    text-decoration: underline;
}

/* 404 */

.not-found-header {
    font-size: 4.5em;
}

/* radar */

.radar {
    margin-top: 1em;
    min-height: calc(calc(calc(100vh - 105px) - 80px) - 4.17em);
}

.radar-header a,
.radar-header p,
.radar-header span {
    text-align: center;
    color: var(--color);
    fill: var(--color);
    padding: 8px;
}

.radar-header span {
    font-weight: 600;
}

.radar-header-item {
    border-radius: var(--border-radius-small);
    background-color: var(--footer);
    margin-top: 1em;
}

.radar-header-types {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
}

.radar-header-zoom,
.radar-header-time {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}

.radar-main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 2.5%;
    height: fit-content;
}

.radar-main-options {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 3fr 2fr;
    gap: 2.5%;
}

.radar-main-options-features-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: calc(calc(100% - 1.33em) + 8px);
}

.radar-main-options-controls-content-time {
    margin-bottom: 8px;
}

.radar-main-options-controls-content-settings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.radar-main-options-controls-content-settings button {
    width: fit-content;
    height: 24px;
    margin: 4px;
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
}

.radar-main-options-controls-content-settings svg {
    height: 100%;
}

.radar-main-options-controls-content-settings button:nth-child(even) {
    margin-right: auto;
}

.radar-main-options-controls-content-settings button:nth-child(odd) {
    margin-left: auto;
}

.radar-main-options-controls-content-nearby {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: min-content;
    margin: 8px auto;
}

.radar-main-options-controls-content-nearby button {
    aspect-ratio: 1/1;
    height: 24px;
    padding: 4px;
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
}

.radar-main-options-controls-content-nearby button:nth-child(1) {
    transform: rotate(-45deg);
}

.radar-main-options-controls-content-nearby button:nth-child(3) {
    transform: rotate(45deg);
}

.radar-main-options-controls-content-nearby button:nth-child(4) {
    transform: rotate(-90deg);
}

.radar-main-options-controls-content-nearby button:nth-child(6) {
    transform: rotate(90deg);
}

.radar-main-options-controls-content-nearby button:nth-child(7) {
    transform: rotate(-135deg);
}

.radar-main-options-controls-content-nearby button:nth-child(8) {
    transform: rotate(180deg);
}

.radar-main-options-controls-content-nearby button:nth-child(9) {
    transform: rotate(135deg);
}

.radar-main-options-controls p {
    text-align: center;
}

.radar-main-options-observations p {
    text-align: center;
}

.radar-main-options-item {
    border-radius: var(--border-radius-small);
    background-color: var(--footer);
    padding: 10px;
}

.radar-main-options-item h4 {
    margin-bottom: 8px;
}

@media only screen and (max-width: 1430px) {
    .main {
        width: 80% !important;
    }

    .main-other {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer {
        padding: 20px calc(calc(100% - 80%) / 2);
    }
}

@media only screen and (max-width: 1100px) {
    .main {
        width: 90% !important;
    }

    .footer {
        padding: 20px calc(calc(100% - 90%) / 2);
    }

    .footer-maps img {
        width: 40px;
    }
}

@media only screen and (max-width: 925px) {
    .today-more {
        column-gap: 24px;
    }
}

@media only screen and (max-width: 900px) {
    .header-menu-item {
        margin-left: 16px;
    }

    .today-more {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 800px) {
    .header {
        display: block;
    }

    .header-menu {
        display: none;
    }

    .alert-text {
        flex-direction: initial;
        align-items: center;
    }

    .alert-text-states {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .main-today-content {
        grid-template-columns: 1fr;
    }

    .main-other,
    .main-services-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-more {
        grid-template-columns: 1fr;
    }

    .main-more-news {
        margin-bottom: 20px;
    }

    .footer-content {
        display: block;
    }

    .footer-item {
        border-right: none !important;
    }
}

@media only screen and (max-width: 500px) {
    .main-services-content {
        grid-template-columns: repeat(1, 1fr);
    }
    .main-more-content {
        grid-template-columns: repeat(1, 1fr);
    }
}