:root{
    --light-text: #215f9a;
    --light-accent-dark: #5a9edc;
    --light-accent-light: #a0d9e8;
    --light-background: #e1f3f7;
    --light-colour: #ffd521;
    --dark-text: #e0e0e0;
    --dark-background: #121212;
    --dark-accent: #2c2c2c;
    --dark-colour: #9dd7e7;
    --border-radius-small: 15px;
    --border-radius-medium: 25px;
    --border-radius-big: 50px;
}
*{
    margin: 0;
    padding: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    transition-duration: 500ms ease;
}
html{scroll-behavior: smooth; scrollbar-color: var(--light-accent-light) var(--light-background);}
html.darktheme{scrollbar-color: var(--dark-accent) var(--dark-background);}
body{background-color: var(--light-text); overflow-y: scroll; overflow-x: hidden;}
body.darktheme{background-color: var(--dark-accent);}
::selection{background-color: var(--light-text); color: var(--light-background);}
.darktheme ::selection{background-color: var(--dark-text); color: var(--dark-background);;}
.inversecolor ::selection{
    background-color: var(--light-background);
    color: var(--light-text);
}
br{user-select: none;}
button:hover{cursor: pointer;}

header{
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0;
    z-index: 1;
    font-size: 12pt;
    transition: 500ms ease;
    
    border-bottom: 1px solid var(--light-text);
    background-color: var(--light-background);
}
header.darktheme{border-bottom-color: var(--dark-accent); background-color: var(--dark-background);}
#headerwrapper{
    width: min(100%, 1000px);
    margin: auto;
}
nav ul{
    display: flex;
    justify-content: right;
    list-style-type: none;
}
header button{
    float: left;
    display: block;
    height: 50px;
    width: 150px;
    font-weight: bold;
    background-color: inherit;
    border-radius: var(--border-radius-small);
    margin: 20px 10px;
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    font-size: inherit;

    color: var(--light-text);
}
header.darktheme button{color: var(--dark-text);;}
header button.focus{
    border: 3px solid var(--light-colour);
}
header.darktheme button.focus{border-color: var(--dark-colour);}
header button#logo{
    margin: auto;
    margin: 10px;
    height: 70px;
    width: 80px;
    transition: 250ms ease-in-out;
    border-radius: 0;

    color: var(--light-accent-dark);
}
header.darktheme button#logo{color: var(--dark-accent);}
header button#logo p{color: var(--light-text);}
header.darktheme button#logo p{color: var(--dark-text);}
header button#logo:hover{
    opacity: 0.75;
}
nav button::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: 200ms ease;

    background-color: var(--light-accent-light);
}
header.darktheme nav button::before{background-color: var(--dark-accent);}
nav button:not(.focus):hover::before{
    transform: translate3d(-50%, -50%, 0) scale3d(50, 50, 50);
    transition: 500ms ease;
}
#hamburger{display: none;}

main{
    width: 100%;

    background-color: var(--light-background);
    color: var(--light-text);
}
main.darktheme{background-color: var(--dark-background); color: var(--dark-text);}
#mainwrapper{
    position: relative;
    padding-top: 120px;
    padding-bottom: 30px;
    transition: 500ms ease;
}
.page{
    width: 100%;
    display: none;
}

#home{/* here */}
.homediv{overflow: auto;}
.homediv:not(:first-of-type){padding-top: 30px;}
.homediv:last-of-type{padding-top: 10px;}
#home h3{
    font-weight: bold;
    padding: 20px;
    font-size: 14pt;

    color: var(--light-accent-dark);
}
main.darktheme #home h3{color: var(--dark-text);}
#home #home_abovethefold{
    width: min(100%, 1000px);
    margin: auto;
    border-radius: var(--border-radius-big);

    position: relative;
    display: flex;

    background-color: var(--light-accent-light);
}
main.darktheme #home_abovethefold{background-color: var(--dark-accent) !important;}
#home #home_abovethefold > *{
    height: 100%;
    width: calc(100% / 3);
    border-radius: inherit;
    float: left;
    
    aspect-ratio: 500 / 512;
}
#home #home_abovethefold > div{
    padding: 20px;
    box-sizing: border-box;
    height: calc((min(100%, 1000px) / 3) / 500 * 512);
}
#home #home_abovethefold > div p{
    text-align: center;
    font-weight: bold;

    color: var(--light-accent-dark);
}
main.darktheme #home_abovethefold > div p{color: var(--dark-text) !important;}
#home_abovethefold > div p#home_datetime{
    position: absolute;
    width: calc(100% / 3 - 40px);

    bottom: 20px;
    left: 20px;
}
#home #home_abovethefold > div h2{
    text-align: right;
    font-size: 25pt;

    position: relative;
    top: calc(50% - (25px/2) - 40px);

    color: var(--light-text);
}
main.darktheme #home_abovethefold > div h2{color: var(--dark-colour) !important;}
#home #home_abovethefold #localdata > div{
    width: calc(100% / 3);
    height: calc(100% / 3);
    float: left;
    text-align: center;
    align-content: center;
}
#home #home_abovethefold #localdata > .row3{
    width: 50%;
}
#home #home_forecast{
    width: min(100%, 1000px);
    margin: auto;
}
#home #home_forecast .home_day{
    width: calc(min(1000px, 100%) / 3 - 26px); /* 1/3 of total width - border - margin */
    border-radius: var(--border-radius-small);
    float: left;
    margin-right: 30px;
    height: 66.8px;
    
    white-space: nowrap;
    overflow: hidden;

    border: 3px solid var(--light-accent-light);
}
main.darktheme #home_forecast .home_day{border-color: var(--dark-accent) !important;}
#home #home_forecast .home_day:nth-child(4){margin-right: 0;}
#home #home_forecast p{
    padding-left: 20px;
    padding-bottom: 10px;
}
#home #home_forecast p:first-of-type{
    padding-top: 10px;
    font-weight: bold;
}
#home #home_forecast #home_day_icon{
    float: right;
    height: 100%;
    aspect-ratio: 1 / 1;

    position: relative;
    bottom: 100%;

    background-image: linear-gradient(to right, rgba(225, 243, 247, 0) 0%, rgba(225, 243, 247,  0.25) 6%, rgba(225, 243, 247, 0.7) 10%, var(--light-background) 16%, var(--light-background) 20%, var(--light-background) 100%);
}
main.darktheme #home_forecast #home_day_icon{background-image: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.25) 6%, rgba(18, 18, 18, 0.7) 10%, var(--dark-background) 16%, var(--dark-background) 100%) !important;}
#home #home_day_icon img{
    width: 50%;
    aspect-ratio: 1 / 1;
    margin: 25%;
}
#home #home_forecast #fade{
    display: block;
    width: calc(min(100%, 1000px) / 3 - 18px);
    height: 73px;
    
    position: absolute;
    right: calc((100% - min(100%, 1000px)) / 2);

    background-image: linear-gradient(to right, rgba(225, 243, 247, 0) 0%, rgba(225, 243, 247,  0.25) 30%, rgba(225, 243, 247, 0.7) 50%, var(--light-background) 80%, var(--light-background) 100%);
}
main.darktheme #home_forecast #fade{background-image: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.25) 30%, rgba(18, 18, 18, 0.7) 50%, var(--dark-background) 80%, var(--dark-background) 100%) !important;}
#home #home_forecast button{
    display: block;
    color: var(--light-colour);
    font-size: 54pt;
    height: 72px;
    line-height: 72px;
    aspect-ratio: 1 / 1;
    background-color: unset;
    border: none;
    transition: 500ms ease;

    position: absolute;
    right: calc((100% - min(100%, 1000px)) / 2);
}
main.darktheme #home_forecast button{color: var(--dark-colour) !important;}
#home #home_forecast button:hover{
    rotate: 90deg;
}
#home #home_text #articlebg{
    color: var(--light-background);
    background-color: var(--light-text);
}
main.darktheme #home_text #articlebg{color: var(--dark-text); background-color: var(--dark-accent) !important;}
#home #home_text #textbase{
    width: min(100%, 1000px);
    margin: auto;
}
#home #home_text article{
    padding: 20px;
}
#home #home_text button#readmore{
    text-decoration: none;
    cursor: pointer;
    display: contents;
    font: inherit;
    font-weight: bold;
    color: inherit;
}
#home #home_text svg{
    width: 100%;
    aspect-ratio: 18/1;
    display: block;
    z-index: 1;

    color: var(--light-text);
}
main.darktheme #home_text svg{color: var(--dark-accent) !important;}
#home #home_local{
    width: min(100%, 1000px);
    margin: auto;
}
#home #home_local .home_station{
    width: calc(min(1000px, 100%) / 3 - 20px - 40px); /* 1/3 of total width - margin - padding*/
    border-radius: var(--border-radius-medium);
    float: left;
    margin-right: 30px;
    padding: 20px;

    background-color: var(--light-accent-light);
}
main.darktheme #home_local .home_station{background-color: var(--dark-accent) !important;}
#home #home_local .home_station:nth-child(4){margin-right: 0;}
#home #home_local .home_stationname{
    font-weight: bold;
    width: 100%;
}
#home #home_local .home_station_data{
    overflow: hidden;
}
#home #home_local .home_station_data:not(:first-child){
    text-align: center;
    align-content: center;
    float: left;
    width: 50%;
    aspect-ratio: 2 / 1;
}
#home #home_local #fade{
    display: block;
    width: calc(min(100%, 1000px) / 3);
    height: 263.4px;
    
    position: absolute;
    right: calc((100% - min(100%, 1000px)) / 2);

    background-image: linear-gradient(to right, rgba(225, 243, 247, 0) 0%, rgba(225, 243, 247,  0.25) 30%, rgba(225, 243, 247, 0.7) 50%, var(--light-background) 80%, var(--light-background) 100%);
}
main.darktheme #home_local #fade{background-image: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.25) 30%, rgba(18, 18, 18, 0.7) 50%, var(--dark-background) 80%, var(--dark-background) 100%) !important;}
#home #home_local button{
    display: block;
    font-size: 54pt;
    height: 263.4px;
    width: 72px;
    line-height: 263.4px;
    background-color: unset;
    border: none;
    transition: 500ms ease;

    position: absolute;
    right: calc((100% - min(100%, 1000px)) / 2);

    color: var(--light-colour);
}
main.darktheme #home_local button{color: var(--dark-colour) !important;}
#home #home_local button:hover{
    rotate: 90deg;
}

#today{/* here */}
#today #wrapper{
    width: min(100%, 1000px);
    margin: auto;

    overflow: auto;
}
#today #today_flexcontainer{display: flex;}
#today #today_flexcontainer > *{
    height: 100%;
    width: calc(100% / 3);
    float: left;
}
#today img{
    border-radius: var(--border-radius-medium);
}
#today h2{
    padding: 20px;
    font-size: 16pt;

    color: var(--light-accent-dark);
}
main.darktheme #today h2{color: var(--dark-text) !important;}
#today_text p span{
    font-size: 16pt;
    font-weight: bold;
    font-family: inherit;

    color: var(--light-accent-dark);
}
main.darktheme #today_text p span{color: var(--dark-text) !important;}
#today_text p{
    font-size: 12pt;

    color: var(--light-text);
}
main.darktheme #today_text p{color: var(--dark-text) !important;}
#today_text br{height: 1px;}
#today p{padding: 20px;}
#today table{
    padding-left: 10px;
    padding-right: 10px;
    border-radius: var(--border-radius-small);
    border-spacing: 0;

    border: 3px solid var(--light-text);
}
main.darktheme #today table{border-color: var(--dark-accent);}
#today table td{padding: 15px;}
#today table tr:first-of-type{color: var(--light-accent-dark);}
main.darktheme #today table tr:first-of-type{color: var(--dark-text);}
#today table tr:not(:last-of-type) td{border-bottom: 1px solid var(--light-text);}
main.darktheme #today table tr:not(:last-of-type) td{border-bottom-color:  var(--dark-accent);}
#today table td:first-child{font-weight: bold;}

#forecast{/* here */}
#forecast #wrapper{
    width: min(100%, 1000px);
    margin: auto;
    overflow: hidden;
}
#forecast h2{
    padding: 20px;
    font-weight: bold;
    font-size: 14pt;

    color: var(--light-accent-dark);
}
main.darktheme #forecast h2{color: var(--dark-text);}
#forecast table{
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;

    border-spacing: 0;
    border-radius: var(--border-radius-small);

    border: 3px solid var(--light-text);
}
main.darktheme #forecast table{border-color: var(--dark-accent);}
#forecast table td{padding: 15px;}
#forecast table tr:not(:last-of-type) td{border-bottom: 1px solid var(--light-text);}
main.darktheme #forecast table tr:not(:last-of-type) td{border-bottom-color: var(--dark-accent);}
#forecast #rightside{
    width: 530px;
    float: right;
    padding-left: 30px;

    position: fixed;
    z-index: 0;
    top: 120px;
    right: calc(50% - min(50%, 500px));
}
#forecast #rightside h2{text-align: right;}
#forecast #rightside table{
    border: none;
    border-collapse: collapse;
    border-radius: var(--border-radius-small);
    right: 0;

    background-color: var(--light-accent-light);
}
main.darktheme #forecast #rightside table{background-color: var(--dark-accent);}
#forecast #rightside table tr td{padding: 20px;}
#forecast #rightside table tr td:first-child{font-weight: bold; text-align: left;}

#weathertext{/* here */}
#weathertext #wrapper{
    width: min(100%, 1000px);
    padding: 20px;
    margin: auto;
    margin-top: -20px;
    margin-bottom: -20px;
    display: flex;
}
#weathertext #weathertext_text{
    width: min(calc(100% - 280px), 720px);
}
#weathertext #weathertext_text p{margin-top: 10px; padding: 0 20px;}
#weathertext #weathertext_text h2{padding-left: 20px;}
#weathertext #weathertext_text p:first-of-type{
    font-weight: bold;
    margin-top: 0;
}
#weathertext #weathertext_days h2{
    font-weight: bold;
    text-align: right;
    padding: 20px;
    padding-top: 0;
    font-size: 14pt;

    color: var(--light-accent-dark);
}
main.darktheme #weathertext_days h2{color: var(--dark-text) !important;}
#weathertext #weathertext_sticky{position: sticky;}
#weathertext_days .text_day{
    width: 244px;
    border-radius: var(--border-radius-small);
    margin-bottom: 30px;
    margin-left: 30px;

    position: relative;

    border: 3px solid var(--light-accent-light);
}
main.darktheme #weathertext_days .text_day{border-color: var(--dark-accent);}
#weathertext_days .text_day:last-of-type{margin-bottom: 0;}
#weathertext_days p{
    padding: 0 20px 10px 20px;
}
#weathertext_days .text_day p:first-of-type{
    padding-top: 10px;
    font-weight: bold;
}
#weathertext .text_day_icon{
    float: right;
    height: 50px;
    aspect-ratio: 1 / 1;

    position: absolute;
    top: 0;
    right: 0;
    border-radius: inherit;

    background-image: linear-gradient(to right, rgba(225, 243, 247, 0) 0%, rgba(225, 243, 247,  0.25) 6%, rgba(225, 243, 247, 0.7) 10%, var(--light-background) 16%, var(--light-background) 20%, var(--light-background) 100%);
}
main.darktheme #weathertext .text_day_icon{background-image: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18,  0.25) 6%, rgba(18, 18, 18, 0.7) 10%, var(--dark-background) 16%, var(--dark-background) 20%, var(--dark-background) 100%);}
#weathertext_days img{
    width: 75%;
    aspect-ratio: 1 / 1;
    margin: 12.5%;
}

#local{/* here */}
#local #local_wrapper{
    width: min(100%, 1000px);
    margin: auto;
    overflow: auto;
}
#local h2{
    padding: 20px;
    font-size: 16pt;

    color: var(--light-accent-dark);
}
main.darktheme #local h2{color: var(--dark-text);}
#local #local_stations{
    width: calc(min(1000px, 100%) / 3 - 20px - 40px); /* 1/3 of total width - margin - padding*/
    border-radius: var(--border-radius-medium);
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 20px;

    background-color: var(--light-accent-light);
}
main.darktheme #local_stations{background-color: var(--dark-accent) !important;}
#local #local_stations:nth-child(3n+1){margin-right: 0;}
#local .local_stationname{
    font-weight: bold;
    width: 100%;
}
#local .local_station_data{
    overflow: hidden;
}
#local .local_station_data:not(:first-child){
    text-align: center;
    align-content: center;
    float: left;
    width: 50%;
    aspect-ratio: 2 / 1;
}

footer{
    overflow: auto;
    width: 100%;
    padding: 20px 0;
    z-index: 100;

    background-color: var(--light-text);
    color: var(--light-background);
}
footer.darktheme{background-color: var(--dark-accent); color: var(--dark-text);}
#footerwrapper{
    width: min(100%, 1000px);
    margin: auto;
}
footer p{
    float: left;
    width: calc((100% / 3) - 2px - 20px);
    text-align: center;

    border-left: 1px solid var(--light-background);
    border-right: 1px solid var(--light-background);
}
footer.darktheme p{border-left-color: var(--dark-text); border-right-color: var(--dark-text);}
footer p:first-of-type, footer p:last-of-type{
    width: calc((100% / 3) - 20px);
    border: none;
    text-align: left;

    padding-left: 20px;
}
footer p:last-of-type{
    text-align: right;

    padding-left: 0;
}
footer button{
    display: contents;
    font-size: inherit;
}
footer a{
    transition-duration: 500ms;
    text-decoration: none;
    position: relative;

    color: var(--light-background);
}
footer.darktheme a{color: var(--dark-text);}
footer a::before{
    content: '';
    position: absolute;
    height: 1px;
    bottom: 1px;
    left: 0;
    right: 0;
    transform-origin: bottom left;
    transform: scaleX(1);
    transition: transform 300ms ease;

    background-color: var(--light-background);
}
footer.darktheme a::before{background-color: var(text);}
footer a:hover{opacity: 0.85;}
footer a:hover::before{
    transform: scaleX(0);
    transform-origin: bottom right;
}

#stickyfooter{
    width: 100%;
    height: 80px;
    font-size: 18pt;
    display: flex;
    justify-content: center;
    line-height: 80px;
    overflow: hidden;

    position: sticky;
    bottom: 0;
    z-index: 1;
    transition: 500ms ease;

    background-color: var(--light-background);
    color: var(--light-accent-dark);
    border-top: 1px solid var(--light-text);
}
#stickyfooter.darktheme{background-color: var(--dark-background); color: var(--dark-text); border-top-color: var(--dark-accent);}
#stickyfooterwrapper{
    margin: auto;

    width: min(100%, 1000px);
    
    color: inherit;
}
#stickyfooter a{
    text-decoration: none;
    padding-left: 20px;
    display: inline-block;
    opacity: 0.75;
    transition: 250ms ease-in-out;

    color: inherit;
}
#stickyfooter a:hover{opacity: 1;}
#stickyfooter p{float: left; line-height: 80px; padding: 0;}
#stickyfooter img{height: 40px; padding: 18px 20px;}
#stickyfooter #darktoggle{
    height: 40px;
    width: 125px;
    font-weight: bold;
    margin: 20px;
    float: right;
    font-family: inherit;
    background-color: var(--light-accent-light);
    color: var(--light-text);
    border: none;
    border-radius: var(--border-radius-small);
    line-height: 40px;

    position: relative;
    z-index: 1;
    overflow: hidden;
}
#stickyfooter.darktheme #darktoggle{background-color: var(--dark-accent); color: var(--dark-text);}
#stickyfooter #darktoggle::before{
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: 300ms ease;

    background-color: var(--light-background);
}
#stickyfooter.darktheme #darktoggle::before{background-color: var(--dark-background);}
#stickyfooter #darktoggle:hover::before{
    transform: translate3d(-50%, -50%, 0) scale3d(50, 50, 50);
    transition: 500ms ease;
}

@media screen and (max-width: 1000px){
    #headerwrapper{
        width: calc(100% - 40px);
        margin: auto;

        transition: 500ms ease;
    }
    header ul#navigationbar{
        display: none;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--light-background);
        z-index: 10;
    }
    header.darktheme ul#navigationbar{background-color: var(--dark-background);}
    header ul li button{
        float: none;
    }
    header #hamburger{
        z-index: 20;
        display: block;
        float: right;
        width: 50px;
        height: 50px;
        color: var(--light-text);
    }
    header.darktheme #hamburger{color: var(--dark-text);}
    
    #home #home_abovethefold{
        width: calc(100% - 40px);
        margin: auto;

        flex-direction: column;
    }
    #home #home_abovethefold > *{
        display: block;
        width: 100%;
        height: 194px !important;
        aspect-ratio: 500 / 512;
    }
    #home #home_abovethefold > :first-child{padding-bottom: 0;}
    #home #home_abovethefold > #localdata{
        height: 140px !important;
        padding-top: 0;
    }
    #home #home_abovethefold p{
        padding: 20px;
        text-align: left !important;
    }
    #home #home_abovethefold h2{
        padding: 0 20px;
        position: static !important;
        text-align: left !important;
    }
    #home #home_abovethefold p#home_datetime{
        position: static;
        width: calc(100% - 40px);
    }
    #home #home_abovethefold .localdata{
        width: 25% !important;
        padding-bottom: 20px;
    }
    #home #home_abovethefold > img#map{
        height: 100% !important;
    }
    #home #home_forecast{
        width: calc(100% - 40px);
        margin: auto;
        position: relative;
        overflow: hidden;
    }
    #home #home_forecast .home_day{
        width: calc(100% - 6px);
        margin-bottom: 30px;
        margin-right: 0;
    }
    #home #home_forecast #fade{
        width: 100%;
        position: absolute;
        bottom: 0px;
        background-image: none !important;

        display: block;
    }
    #home #home_forecast #fade button{
        width: 100%;
        text-align: center;
    }
    #home #home_local{
        width: calc(100% - 40px);
        margin: auto;
        position: relative;
        overflow: hidden;
    }
    #home #home_local .home_station{
        width: calc(100% - 40px);
        margin-bottom: 30px;
        margin-right: 0;
    }
    #home #home_local #fade{
        background-image: none !important;
        width: 100%;
        position: absolute;
        bottom: -100px;

        display: block;
    }
    #home #home_local #fade button{
        width: 100%;
        text-align: center;
    }


    #today #wrapper{
        width: calc(100% - 40px);
        margin: auto;
    }
    #today #today_flexcontainer{
        flex-direction: column;
    }
    #today h2{padding-left: 0;}
    #today #today_text{width: 100%;}
    #today #today_text p{padding: 20px 0;}
    #today img{width: 100% !important;}
    #today #today_flexcontainer > *{width: 100%;}

    #forecast #wrapper{
        width: calc(100% - 40px);
        margin: auto;
    }
    #forecast h2{
        padding-left: 0;
    }
    #forecast #forecast_table48{
        width: calc(100% - 6px);
        overflow: scroll;
    }
    #forecast table{margin-bottom: 10px;}
    #forecast #rightside{
        width: 100%;
        padding: 0;
        float: none;
        position: static;
        overflow: scroll;
    }
    #forecast #rightside h2{
        padding-left: 0;
        text-align-last: left;
    }
    #forecast #rightside table td{
        min-width: 45px;
    }

    #weathertext #wrapper{
        width: calc(100% - 40px);
        margin: auto;
        flex-direction: column;
    }
    #weathertext #weathertext_text{
        width: 100%;
    }
    #weathertext #weathertext_text h2{padding-left: 0;}
    #weathertext #weathertext_text p{padding: 0;}
    #weathertext #weathertext_days h2{text-align: left; padding: 20px 0;}
    #weathertext #weathertext_days .text_day{
        width: 100%;
        margin-left: 0;
    }

    #local #local_wrapper{
        width: calc(100% - 40px);
        margin: auto;
    }
    #local h2{
        padding: 20px 0;
    }
    #local #local_stations{
        width: calc(100% - 40px);
        margin: 0 0 30px 0;
    }
    #local #local_stations:last-of-type{margin-bottom: 0;}

    #footerwrapper{
        width: calc(100% - 40px);
        margin: auto;
    }
    footer p, footer p:first-of-type, footer p:last-of-type{
        float: none;
        width: 100%;
        text-align: center;
        border: none;
        padding: 0;
    }
    footer p:not(:last-of-type){
        margin-bottom: 30px;
    }
    footer br{
        display: block;
        height: 0;
    }

    #stickyfooter{height: 130px; font-size: 16pt; transition: 500ms ease;}
    #stickyfooter a{height: 70px;}
    #stickyfooter p{line-height: 70px;}
    #stickyfooter img{height: 30px;}
    #stickyfooter #darktoggle{
        width: calc(100% - 40px);
        bottom: 50px;
    }
    #stickyfooter #darktoggle:hover::before{transform: translate3d(-50%, -50%, 0) scale3d(200, 200, 200);}
}
@media screen and (max-width: 400px){
    #stickyfooter a{font-size: 14pt;}
    #stickyfooter img{width: calc(100% - 140px);}
}