@font-face {
        font-family: FiraSans;
        src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
}

* {
        font-family: "FiraSans", sans-serif;
        box-sizing: border-box;
}

body {
        background-color: #101010;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding-bottom: 100px;
        overflow-x: hidden;
        overflow-y: hidden;
}

/* Popup container */
.popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
}

/* Popup */

.popup h5 {
        margin-top: 0px;
        border: 1px solid #248bcc;
        border-radius: 25px;
        font-size: 15px;
        color: white;
        position: relative;
        padding-left: 7px;
        padding-right: 7px;
	box-shadow: 0 0 4px rgba(36,139,204,0.4), 0 0 8px rgba(36,139,204,0.3), 0 0 16px rgba(36,139,204,0.2);
        text-shadow: 0 0 2px #888, 0 0 4px #888, 0 0 8px #888;
}

.popup h5:hover {
        background-color: #248bcc;
	box-shadow: 0 0 4px rgba(36,139,204,0.7), 0 0 8px rgba(36,139,204,0.6), 0 0 16px rgba(36,139,204,0.5);
        text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff;
}

.popup {
        display: block;
        position: relative;
        margin: auto;
        text-align: center;
}

.popup .popuptext {
        background-color: #101010;
        position: absolute;
        z-index: 512;
        visibility: hidden;
        width: 100%;
        color: #fff;
        text-align: left;
        top: 100%;
        left: 50%;
        margin-left: -50%;
        border: 1px solid #248bcc;
        border-radius: 25px;
}

.popup .popuptext p {
        color: white;
        font-size: 15px;
        margin: 0;
}

.popup .popuptext .emo {
        margin-top: 15px;
        text-align: center;
}
.popup .popuptext .emo a {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 69px;
        text-decoration: none;
}

.popup .popuptext .text {
        padding-left: 25px;
}

.popup .popuptext .text p {
        margin-bottom: 25px;
        margin-top: 25px;
}

.popup .popuptext .sources {
        padding-left: 25px;
}
.popup .popuptext .sources a {
        color: #248bcc;
        padding-top: 0px;
        margin-top: 0px;
}

/* Hide and show the popup */
.popup .show {
        position: absolute;
        z-index: 512;
        visibility: visible;
}

.main {
        border: 1px solid;
        border-color: #248bcc;
        border-radius: 25px 0 0 25px;
        float: left;
        width: 100%;
	box-shadow: 0 0 4px rgba(36,139,204,0.4), 0 0 8px rgba(36,139,204,0.3), 0 0 16px rgba(36,139,204,0.2);
}

.header {
        display: block;
        font-size: 13px;
}

.logo {
        margin-top: 7px;
        width: 100%;
        align: center;
}

.conditions {
        padding-left: 20px;
        padding-right: 20px;
        width: 20%;
        text-align: left;
        overflow: hidden;
        float: left;
        color: grey;
}

.current {
        padding-bottom: 5px;
        padding-top: 5px;
        color: #101010;
        text-align: center;
	border: 1px solid #248bcc;
        border-radius: 15px;
        background-color: #101010;
	background: linear-gradient(to top, rgba(10,10,10,0), rgba(36,139,204,1));
	box-shadow: 0 0 4px rgba(36,139,204,0.4), 0 0 8px rgba(36,139,204,0.3), 0 0 16px rgba(36,139,204,0.2);
}

.current .update {
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        color: white;
        font-size: 15px;
        text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #000;
}

.current .wttr {
        margin: 0;
        color: #fff;
        font-size: 25px;
        font-weight: bold;
        text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #000;
}

.current .danger {
        margin: 0;
        text-align: center;
        color: white;
        font-size: 15px;
        text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #000;
}

.current .level {
        font-size: 25px;
        font-weight: bold;
        margin: 0px;
}

.danger p {
        color: #101010;
        font-weight: normal;
        margin: 0;
        font-weight: none;
        color: white;
        font-size: 15px;
}

.cat {
        font-size: 15px;
	position: relative;
}

.data {
        margin-top: 5px;
        font-weight: bold;
        font-size: 25px;
        padding-bottom: 5px;
        padding-top: 5px;
        color: white;
        border-bottom: 1px solid #248bcc;
        border-left: 1px solid #248bcc;
        border-radius: 25px 0px 25px 25px;
}

.data.plot {
        text-shadow: 0 0 2px #248bcc, 0 0 4px #248bcc, 0 0 8px #248bcc;
}

.data::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-bottom: 1px solid #248bcc;
        border-radius: 25px 0 25px 25px;
        filter: drop-shadow(0 0 2px #248bcc)
            drop-shadow(0 0 4px #248bcc)
            drop-shadow(0 0 8px #248bcc);
        pointer-events: none;
        z-index: -1;
}

.plot {
	background-repeat: no-repeat;
	background-size: 102% 100%;
	background-position: -2px 0px;
	background-image:
		linear-gradient(to right, rgba(0,0,0,0) 0%, #101010 39%);
		linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
}


.cat p {
        padding-left: 24px;
}

.datapoint {
        padding-top: 10px;
        padding-bottom: 0;
        padding-left: 10px;
        margin-top: 30px;
        margin-bottom: 0;
        text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #888;
}


.video {
        position: relative;
        z-index: -1;
}

.video img {
        width: 80%;
        max-height: inherit;
        max-width: inherit;
        padding-top: 5px;
        padding-right: 5px;
}

.footer {
	flex-shrink: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
}

.footer p {
        font-size: 13px;
        color: #FFFFFF;
}

.footer a {
        font-size: 13px;
        color: #FFFFFF;
        text-decoration: none;
}

.footer a:hover {
        text-decoration: underline;
}

@media only screen and (max-width: 1100px) {
        .popup .show {
                position: absolute;
                z-index: 512;
                visibility: visible;
        }
        .main {
                margin: 0;
                padding: 0;
                border-radius: 25px 25px 0px 0px;
        }
        .conditions, .video {
                width: 100%;
        }
        .conditons {
                font-size: 13px;
                width: 100%;
        }
        .conditions .cat {
                width: 50%;
                display: inline;
                float: left;
                overflow: hidden;
                padding-left: 5%;
                padding-right: 5%;
        }
        .header {
                margin-bottom: 0px;
                margin-top: 5px;
        }
        .header img {
                margin-top: 10px;
        }
        .logo {
                max-height: 75px;
                object-fit: contain;
        }

.popup .popuptext {
        top: 0%;
        left: 50%;
        margin-top: -15%;
        margin-left: -50%;
        border-radius: 15px;
}

.popup .popuptext p {
        font-size: 10px;
        margin: 0;
        padding: 0;
}

.popup .popuptext .emo {
        margin-top: 5px;
        text-align: center;
}
.popup .popuptext .emo a {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 36px;
}

.popup .popuptext .text {
        margin: 0;
        padding: 0;
        padding-left: 15px;
}

.popup .popuptext .text p {
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
        padding-top: 10px;
}

.popup .popuptext .sources {
        padding-left: 15px;
}
.popup .popuptext .sources p {
        margin: 0;
        padding: 0;
        padding-top: 5px;
}
.popup .popuptext .sources a {
        margin-top: 0;
        padding-top: 0px;
        font-size: 10px;
}

        .popup h5 {
                margin-bottom: 5px;
                margin-top: 0px;
        }
        .current {
                border-radius: 9px;
        }
        .current .update {
                padding: 0;
                margin: 0;
                font-size: 10px;
        }
        .current .wttr {
                margin: 0;
                padding: 0;
                font-size: 15px;
        }
        .current .danger {
                padding: 0;
                margin: 0;
                font-size: 10px;
        }
        .current .level {
                padding: 0;
                margin: 0;
                font-size: 13px;
        }
        .danger p {
                padding: 0;
                margin: 0;
                color: white;
                font-size: 10px;
        }
        .cat p {
                margin: 0;
                padding-left: 12px;
        }
        .data {
                margin-top: 0;
                margin-bottom: 0;
                padding-top: 0;
                padding-bottom: 0px;
                font-size: 13px;
		position: relative;
        }
        .data::before {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                border-bottom: 1px solid #248bcc;
                border-radius: 25px 0 25px 25px;
                filter: drop-shadow(0 0 2px #248bcc)
                    drop-shadow(0 0 4px #248bcc)
                    drop-shadow(0 0 8px #248bcc);
                pointer-events: none;
                z-index: -1;
	}
        .datapoint {
                margin: 0;
                padding-bottom: 0px;
                font-size: 10px;
        }
        .video  img {
                margin-top: 15px;
                width: 100%;
                padding-left: 5px;
        }