@font-face {

    font-family: wxregular;

    src        : url(fonts/verbatim-regular.woff2) format("woff2"),url(fonts/verbatim-regular.woff) format("woff");

    font-display: swap;

}

@font-face {

    font-family: wxmedium;

    src        : url(fonts/verbatim-medium.woff2) format("woff2"),url(fonts/verbatim-medium.woff) format("woff");

    font-display: swap;

}

@font-face {

    font-family: wxbold;

    src        : url(fonts/verbatim-bold.woff2) format("woff2"),url(fonts/verbatim-bold.woff) format("woff");

    font-display: swap;

}

:root,

html[data-theme="dark"] {

    --jmf-blue       : #5193fc;

    --dark           : #252525;

    --dark-popup     : #000;

    --pagebackground : #000;

    --tablet         : #242424; 

    --tablett        : #343434;

    --tabletc        : #090909;

    --font-color     : hsl(0, 0%, 50%);

    --contrast       : brightness(100%);

    --button-color   : #000;

    --table-border   : #000;

}

html[data-theme="light"] {

    --jmf-blue       : #5193fc;

    --pagebackground : #eee;

    --tablet         : #dcdcdc; 

    --tablett        : #c9c9c9;

    --tabletc        : #e9e9e9;   

    --dark           : #252525;

    --dark-popup     : #000;

    --font-color     : hsl(0, 0%, 50%);

    --contrast       : brightness(100%);

    --button-color   : #fff;

    --table-border   : #fff;

}



body {

    font-family: headingtext, system-ui, -apple-system, BlinkMacSystemFont,

        Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,

        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    margin                     : 0 auto;

    color                      : var(--body-text-dark);

    background                 : var(--pagebackground);

    text-rendering             : optimizeLegibility;

    -webkit-font-smoothing     : antialiased;

    -moz-osx-font-smoothing    : grayscale;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility   : hidden;

    backface-visibility        : hidden;

    overflow-x                 : hidden;

    -webkit-box-sizing         : border-box;

    -moz-box-sizing            : border-box;

    box-sizing                 : border-box;

    font-size                  : 1em;

    -webkit-filter             : var(--contrast);

  transition: .4s;

}

html {

    min-height: 100%;

    overflow-x: hidden;

}

.nav-top {

    margin               : 0 auto;

    background           : var(--tablett);

    padding              : 5px 0 0 0;

    height               : 30px;

    line-height          : 2;

    position             : relative;

    bottom               : 0;

    margin-top           : 2px;

    margin-bottom        : 2px;

    border-radius        : 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius   : 5px;

    -ms-border-radius    : 5px;

    -o-border-radius     : 5px;

    width                : 100%;

    font-family          : wxbold;

    text-decoration      : none;

    text-align           : center;



}



.nav-bottom {

    margin               : 0 auto;

    background           : var(--tablet);

    padding              : 5px 0 0 0;

    height               : 30px;

    line-height          : 1;

    position             : relative;

    bottom               : 0;

    margin-top           : 4px;

    margin-bottom        : 5px;

    border-radius        : 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius   : 5px;

    -ms-border-radius    : 5px;

    -o-border-radius     : 5px;

    width                : 100%;

    font-family          : wxbold;

    text-decoration      : none;

    text-align           : center;

    justify-items        : left;



}

.navspace {

    position  : relative;

    display   : flex;

    margin-top: 5px;

}

.links * {

    position        : relative;

    margin-left     : 1px;

    margin-top      : 3px;

    text-decoration : none;

    font-size       : 0.38em;

    text-align      : center;

    justify-items   : center;

}

a.alinks {

    float: right;

    color: var(--jmf-blue);

    height: 20px;

    margin-right:5px;

    cursor: pointer;

}

img.ilinks {

    height: 26px;

}

.button {

  background-color: var(--button-color);

  border: none;

  padding: 1px 1px;

  text-decoration: none;

  float:right;

  margin-right:5px;

  border-radius        : 4px;

  -webkit-border-radius: 4px;

  -moz-border-radius   : 4px;

  -ms-border-radius    : 4px;

  -o-border-radius     : 4px;

}

.button svg {

  float:right;

  height: 24px;

  width: 24px;

}

.container {

    margin       : 0 auto;

    background   : var(--tabletc);

    width        : 100%;

    min-width    : 320px;

    max-width    : 950px;

    justify-content : center;

    justify-items: center;

    text-align   : center;

}

.wxcam {

    display: block;

    grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));

}



ul {

    list-style: none;

    padding: 0

}

li {

    align-items: center;

    display: flex;

    justify-content: center;

    padding: 0;

}



.sitetitle {

    color: var(--jmf-blue);

    font-size      : 14px;

    font-family    : wxbold;

    text-decoration: none;

    float          : none;

    text-align   : center;

    justify-items: center;

}

table {

  width: 100%;

  font-family: wxbold;

  border: 1px solid var(--table-border);

  -moz-border-radius: 7px;

  -webkit-border-radius: 7x;

  border-radius: 7px;

  border-collapse: collapse;

  padding: 2px;

  background-color: #99a;

  color: #000;

}

th, tr {

  border: 1px solid var(--table-border);

  font-family: wxmedium;

  border-collapse: collapse;

  padding: 3px;

  text-align: center;

  vertical-align: middle;

  font-size: 0.7em;

  height: 25px;

  color: #000;

}

td {

  border: 1px solid var(--table-border);

  font-family: wxregular;

  font-weight: bold;

  padding: 2px;

  text-align: center;

  vertical-align: middle;

  font-size: 1.0em;

  color: #000;

}

smalltxt {

  font-size: 0.5em;

  font-weight: lighter;

}

tr:first-child th:first-child {

  border-radius: 6px 0 0 0;

  -moz-border-radius: 6px 0 0 0;

  -webkit-border-radius: 6px 0 0 0;

}

tr:first-child th:last-child {

  border-radius: 0 6px 0 0;

  -moz-border-radius: 0 6px 0 0;

  -webkit-border-radius: 0 6px 0 0;

}

tr:last-child th:first-child {

  border-radius: 0 0 0 6px;

  -moz-border-radius: 0 0 0 6x;

  -webkit-border-radius: 0 0 0 6px;

}

tr:last-child td:last-child {

  border-radius: 0 0 6px 0;

  -moz-border-radius: 0 0 6x 0;

  -webkit-border-radius: 0 0 6px 0;

}

.dirarr {

    height : 15px;

}

.box {

    width                : 100%;

    min-width            : 245px;

    justify-content      : center;

    justify-items: center;

}

.box2 {

    width                : 100%;

    margin-top           : 5px;

    justify-content      : center;

    justify-items: center;

    color: var(--jmf-blue);

    font-size            : 0.6em;

}

.cambox {

    display              : flex;

    margin-top           : 5px;

    width                : 100%;

    justify-content      : center;

    justify-items: center;

}



.webcamlarge {

    width: 90vw;

    min-width: 300px;

    border: 0;

}

.raincamlarge {

    border: 0;

    width: 100vw;

    height: 264px;

}



::-webkit-scrollbar {

    width                : 6px;

    border-radius        : 10px;

    -webkit-border-radius: 10px;

    -moz-border-radius   : 10px;

    -ms-border-radius    : 10px;

    -o-border-radius     : 10px;

}



::-webkit-scrollbar-thumb {

    background           : var(--scrollbar-bg);

    border-radius        : 10px;

    -webkit-border-radius: 10px;

    -moz-border-radius   : 10px;

    -ms-border-radius    : 10px;

    -o-border-radius     : 10px;

}



.lity {

    z-index: 9990;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    white-space: nowrap;

    background: var(--litybackground);

    outline: 0 !important;

    opacity: 0;

    -webkit-transition: opacity .3s ease;

    -o-transition: opacity .3s ease;

    transition: opacity .3s ease;

    -moz-transition: opacity .3s ease;

    -ms-transition: opacity .3s ease;

    margin: 0 auto;

    justify-content: center;

    text-align: center;

    backdrop-filter: saturate(150%);

    -webkit-backdrop-filter: saturate(150%)

}

 

.lity.lity-opened {

    opacity: 1

}

 

.lity.lity-closed {

    opacity: 0

}

 

.lity * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box

}

 

.lity-wrap {

    z-index: 9990;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    text-align: center;

    outline: 0 !important

}

 

.lity-wrap:before {

    content: '';

    display: inline-block;

    height: 100%;

    vertical-align: middle;

}

 

.lity-loader {

    z-index: 9991;

    color: #fff;

    position: absolute;

    width: 100%;

    opacity: 0;

    -webkit-transition: opacity .3s ease;

    -o-transition: opacity .3s ease;

    transition: opacity .3s ease

}

 

.lity-loading .lity-loader {

    opacity: 1

}

 

.lity-container {

    z-index: 9992;

    position: relative;

    text-align: left;

    display: inline-block;

    white-space: normal;

    max-width: 100%;

    max-height: 100%;

    outline: 0 !important

}

 

.lity-content {

    z-index: 9993;

    width: 100%;

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

    transform: scale(1);

    -webkit-transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;

    transition: -webkit-transform .3s ease;

    -o-transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;

    transition: transform .3s ease;

    transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;

    -moz-transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;

    -ms-transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;

    margin: auto 0;

    justify-content: center;

    text-align: center

}

 

.lity-closed .lity-content,

.lity-loading .lity-content {

    -webkit-transform: scale(.8);

    -ms-transform: scale(.8);

    -o-transform: scale(.8);

    transform: scale(.8)

}

 

.lity-content:after {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    display: block;

    right: 0;

    width: auto;

    height: auto;

    z-index: -1

}

 

.lity-close {

    z-index: 9994;

    width: 30px;

    height: 30px;

    position: fixed;

    right: .2em;

    top: .2em;

    -webkit-appearance: none;

    cursor: pointer;

    text-decoration: none;

    text-align: center;

    padding: 0;

    color: #fff;

    font-style: normal;

    font-size: 30px;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 30px;

    border: 0;

    background: 0 0;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    background: var(--jmf-blue);

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -ms-border-radius: 3px;

    -o-border-radius: 3px

}

 

.lity-close::-moz-focus-inner {

    border: 0;

    padding: 0

}

 

.lity-close:active,

.lity-close:focus,

.lity-close:hover,

.lity-close:visited {

    text-decoration: none;

    padding: 0;

    color: #fff;

    font-style: normal;

    font-size: 30px;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 30px;

    border: 0;

    background: 0 0;

    outline: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    background: #c03050

}

 

.lity-close:active {

    top: 1px

}

 

.lity-image img {

    max-width: 100%;

    display: block;

    line-height: 0;

    border: 0

}

 

.lity-iframe .lity-container {

    width: 100%;

    max-width: 800px;

    margin: auto 0;

    justify-content: center;

    text-align: center

}

 

.lity-iframe-container {

    display: -webkit-box;

    display: flex;

    height: 540px;

    padding-top: 56.25%;

    overflow: auto;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    pointer-events: auto;

}

 

.lity-iframe-container iframe {

    display: flex;

    position: absolute;

    top: 0;

    width: 100%;

    height: 500px;

    background: var(--dark-popup);

    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -ms-border-radius: 2px;

    -o-border-radius: 2px;

    border: 4px solid var(--jmf-blue);

}

 

.lity-hide {

    display: none

}







@media screen and (min-width: 585px) {

   tr {

      font-size: 0.95em;

      height: 32px;

   }

   td {

     font-size: 1.05em;

     font-weight: bold;

   }

   .webcamlarge {

      min-width: 600px;

   }

   smalltxt {

     font-size: 0.6em;

     font-weight: normal;

   }

   .dirarr {

    height : 20px;

   }

   .nav-bottom {

    height               : 33px;

   }

   .links * {

     font-size       : 0.65em;

     margin-left     : 4px;

   }

   a.alinks {

     height: 25px;

     margin-right:5px;

   }

   img.ilinks {

     height: 28px;

   }

   .button svg {

     height: 26px;

     width: 26px;

   }



}

@media screen and (min-width: 825px) {

   tr {

      font-size: 1.1em;

      height: 40px;

   }

   td {

     font-size: 1.2em;

     font-weight: bold;

   }

   .webcamlarge {

      max-width: 800px;

   }



   smalltxt {

     font-size: 0.65em;

     font-weight: normal;

   }

   .dirarr {

    height : 25px;

   }

   .nav-bottom {

    height: 36px;

   }

   .links * {

     font-size: 0.85em;

     margin-left: 7px;

   }

   a.alinks {

     height: 30px;

     margin-right:5px;

   }

   img.ilinks {

     height: 31px;

   }

   .button svg {

     height: 29px;

     width: 29px;

   }

}