html{
    background: #151515;
    color: #eef0f4;
    font-family: 'simplon', 'Noto Sans HK', 'Noto Sans JP', sans-serif;
}
body.jp{
    font-family: 'simplon', 'Noto Sans JP', 'Noto Sans HK', sans-serif;
}

*::-webkit-scrollbar {
    width: .5rem;
    height: .25rem;
    background-color: #26282d; /* or add it to the track */
}
*::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #8d8f91;
}
*::-webkit-scrollbar-thumb:hover {
    background: #aaadaf;
}

body{
    margin: 2rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
ul{
    margin: .25rem 0 0 0;
    padding: .5rem .5rem .5rem 1.5rem;
    background: #3d3f36;
    border-radius: .5rem;
    border: solid .125rem #666651;
}
.hidden{
    display: none!important;
}
.not-avalible{
    user-select: none!important;
    cursor: default!important;
    opacity: .375;
}
section.not-avalible{
    order: 10;
}
.not-avalible .desc.coming-soon{
    text-align: center;

}

.top{
    display: flex;
    width: min(35rem, 90vw);
    justify-content: space-between;
}
.top .btn{
    user-select: none;
    background: #1c1f33;
    padding: .3rem .5rem .15rem .5rem;
    border: solid .1rem #d2f0f6;
    border-radius: .25rem;
    cursor: pointer;
    transition: .25s;
}
.top .btn:hover{
    background: #d2f0f6;
    border: solid .1rem #1c1f33;
    color: #1c1f33;
}
.top .lang .btn{
    background: #1c1f33;
    border: solid .1rem #ccc;
    border-radius: .25rem;
}
.top .lang .btn:hover{
    background: #ccc;
}
.ver{
    width: min(35rem, 90vw);
    margin-top: .5rem;
    color: #bbb;
    order: 100;
}

section:not(section section){
    border-radius: .5rem;
    margin-top: 1rem;
    width: min(35rem, 90vw);
    border: double .125rem transparent;
    background-image: linear-gradient(#16171e, #16171e), 
                      linear-gradient(#eef0f4, #7f8283);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
section section{
    border-radius: .5rem;
    margin-top: 1rem;
    border: double .125rem transparent;
    background-image: linear-gradient(#16171e, #16171e), 
                      linear-gradient(#eef0f4, #7f8283);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    max-width: calc(100% - .25rem);
    flex: 1;
}
section.current-weather, section.current-weather h1{
    background-image: linear-gradient(#1d2323, #1d2323),
                      linear-gradient(#ceebff, #53656c);
}
section.today-forecast, section.today-forecast h1{
    background-image: linear-gradient(#16171e, #16171e), 
                      linear-gradient(#eef0f4, #7f8283);
}
section.warning, section.warning h1{
    background-image: linear-gradient(#272626, #272626), 
                      linear-gradient(#ffbac5, #894b09);
}
section.warning.warn-off, section.warning.warn-off h1{
    background-image: linear-gradient(#272626, #272626), 
                      linear-gradient(#babcbe, #575a5b);
}
section.warning.warn-off, section.warning.warn-off{
    order: 3;
}
section.weather-forecast, section.weather-forecast h1{
    background-image: linear-gradient(#282934, #282934), 
                      linear-gradient(#dae6ff, #456772);
}
section.index, section.index h1{
    background-image: linear-gradient(#282934, #282934), 
                      linear-gradient(#dae6ff, #456772);
}
section.today-day, section.today-day h1{
    background-image: linear-gradient(#26231c, #26231c), 
                      linear-gradient(#fad8ab, #72540b);
}
section.today-night, section.today-night h1{
    background-image: linear-gradient(#1c1f33, #1c1f33), 
                      linear-gradient(#abc5fa, #0c506d);
}
section:not(:first-child){
    margin-top: 2rem;
}
section section:first-child{
    margin-top: .5rem;
}
section section:not(:first-child){
    margin-top: 1rem;
}
section .frame{
    border: solid .125rem #ffffff33;
    border-radius: .4rem;
    padding: .5rem;
}
section div.title{
    text-align: center;
    transform: translateY(-1.25rem);
    margin-bottom: -.25rem;
}
section section div.title{
    text-align: left;
}
section h1{
    display: inline-block;
    padding: .15rem .75rem .2rem .75rem;
    border: double .125rem transparent;
    background-image: linear-gradient(#16171e, #16171e), 
                      linear-gradient(#eef0f4, #7f8283);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: .125rem;
    box-shadow: 0 0 8px #16171e;
    margin-top: 0;
    margin-bottom: -1rem;
    font-size: 1.15rem;
}
section section h1{
    font-weight: 400;
    padding: .0rem .75rem .05rem .75rem;
}
.en section h1{
    padding: .25rem .75rem .15rem .75rem;
}
.en section section h1{
    font-weight: 400;
    padding: .25rem .5rem 0 .5rem;
}

section .wrapper{
    display: flex;
    gap: .5rem;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: wrap;
    overflow-x: auto;
}
section.current-weather .wrapper{
    flex-direction: row;
}
section.index .wrapper{
    flex-wrap: nowrap;
}
section .wrapper .item:not(.warn){
    display: flex;
    min-width: max(11rem, 45%);
    flex: 1;
    justify-content: space-between;
    border-bottom: solid .0625rem #bbb;
    margin-top: .25rem;
}
section.index .wrapper :is(.day1, .day2) .item:not(:first-child){
    margin-top: .75rem;
}
section.index .wrapper .index-d0 .item:nth-child(n+2){
    margin-top: .75rem;
}
section.index .wrapper .index-d0 .item:nth-child(2){
    margin-top: 0;
}
section .wrapper .item:is(.warn:not(:last-child), .weather){
    display: flex;
    min-width: 80%;
    flex: 1;
    justify-content: space-between;
    border-bottom: solid .0625rem #bbb;
    flex-wrap: wrap;
}
section .wrapper .desc.no-warning{
    text-align: center;
    color: #ccc;

}
section .wrapper .item.warn{
    display: flex;
    min-width: 80%;
    flex: 1;
    justify-content: space-between;
    flex-wrap: wrap;
}
section .wrapper .item .label{
    display: flex;
    align-items: center;
}
section .wrapper .item .value .long-unit{
    font-size: .65rem;
    font-weight: 500;
}
section .wrapper .item .value .big-word{
    font-size: .9rem;
    line-height: 1;
}
section .wrapper .item.warn .label{
    padding: .125rem .25rem;
    border-radius: .25rem;
    min-width: 5rem;
}
section .wrapper .item.warn.legend{
    justify-content: space-evenly;
}
section .wrapper .item.warn.legend .label{
    padding: .125rem .25rem;
    border-radius: .25rem;
    font-size: .8rem;
    min-width: 4rem;
    text-align: center;
}
section .wrapper .item.warn .desc{
    display: block;
    font-weight: 300;
    min-width: 80%;
    padding: .5rem .25rem .75rem 1rem;
    text-align: justify;
    font-size: .9rem;
}
section .wrapper .item.warn .desc{
    line-height: 1.5;
}
section .wrapper .item.warn:last-child .desc{
    padding-bottom: .25rem;
}
section .wrapper .item .label .subtitle{
    font-weight: 300;
    flex: 1;
    line-height: 1;
    padding-bottom: .125rem;
    padding: 0 .125rem;
    font-size: .9rem;
}
section .wrapper .item:not(.warn, .weather) .label{
    display: flex;
    align-items: center;
}
section .wrapper .item:not(.warn, .weather) .label .ico{
    height: 1rem;
    width: 1rem;
    background-size: 1rem 1rem;
    filter: brightness(0) invert(1);
    align-items: center;
}
section .wrapper .item.weather .info{
    display: flex;
    flex: 1;
    min-width: 80%;
    padding: 0 0 .375rem .5rem;
    justify-content: space-between;
}
section .wrapper .item.weather .info .side-info{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-direction: column;
}
section .wrapper .item.weather .info .side-info .loc{
    font-weight: 500;
    text-align: right;
}
section .wrapper .item.weather .info .side-info .time{
    font-size: .8rem;
    color: #ccc;
    text-align: right;
}
section .wrapper .item.weather .desc{
    min-width: 80%;
    padding: 0 0 .25rem .25rem;
}
section .wrapper .item.weather .info .ico{
    display: inline-block;
    background-size: 2.5rem 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    filter: brightness(0) invert(1);
}

.ico img{
    width: 1rem;
    height: 1rem;
}
section .wrapper .item.warn .label .warn{
    position: relative;
    width: 1.5rem;
    height: 1.25rem;
    display: inline-grid;
    vertical-align: middle;
    align-items: center;
}
section .wrapper .item.warn .label .warn .bg{
    height: 1.2rem;
    background-color: #FFF;
    -webkit-mask: url('../assects/svg/warn/bg.svg') no-repeat center;
    mask: url('../assects/svg/warn/bg.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .lev{
    font-size: .55rem;
    font-weight: 500;
}
section .wrapper .item.warn .label .title{
    flex: 1;
    font-weight: 500;
}
section .wrapper .item.warn .label .title.en{
    transform: translateY(.1rem);
}
section .wrapper .item.warn .label .warn .ico-warn{
    height: 1.2rem;
    background-color: #000;
    -webkit-mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn div{
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
}



.forecast-list .forecast:not(:last-child){
    border-bottom: solid .0625rem #bbb;
    padding-bottom: .25rem;
}
.forecast{
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}
.forecast .day{
    display: flex;
    width: 3rem;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.forecast .day .weekday.shrink{
    display: inline-block;
    transform: scaleX(.775);
    width: 3rem;
}
.forecast .day .weekday{
    font-size: .8rem;
    font-weight: 600;
}
.forecast .day .date{
    width: 100%;
    font-size: .7rem;
}
.forecast .weather{
    padding-left: .25rem;
    width: 1.25rem;
    text-align: center;
}
.forecast .weather .ico{
    display: inline-block;
    background-size: 1.25rem 1.25rem;
    height: 1.25rem;
    width: 1.25rem;
    filter: invert(1);
}
.forecast :is(.temp, .humi, .wind){
    display: flex;
    align-items: baseline;
    padding-right: 1rem;
    gap: .125rem;
    transform: translateY(.2rem);
}
.forecast :is(.temp, .humi) .hi{
    font-weight: 500;
    font-size: 1.1rem;
}
.forecast :is(.temp, .humi) .lo{
    font-size: .75rem;
}
.forecast .humi .hi{
    font-size: 1rem;
}
.forecast .humi .lo{
    font-size: .7rem;
}
.forecast .desc{
    flex: 1;
}
.forecast .desc .day-desc{
    font-weight: 500;
}
.forecast .desc .night-desc{
    font-weight: 300;
    margin-top: .125rem;
    font-size: .75rem;
}
.forecast .desc .night-desc .ico{
    display: inline-block;
    vertical-align: text-top;
    background-size: .9rem .9rem;
    height: .9rem;
    width: .9rem;
    filter: invert(1);
}
.forecast .rainRate{
    display: flex;
    align-items: center;
}
.forecast .rainRate .percent{
    transform: translateY(.0625rem);
}
.forecast .rainRate .ico{
    display: inline-block;
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
    filter: brightness(0) invert(1);
    margin-right: -.0625rem;
}


.forecast.lite .day{
    min-width: 3rem;
    flex-grow: .75;
    flex-basis: 0;

}
.forecast.lite .weather{
    flex-grow: .75;
    flex-basis: 0;
    padding-left: .125rem;
}
.forecast.lite .temp{
    justify-content: center;
    flex-grow: 1;
    flex-basis: 0;
}
.forecast.lite .humi{
    justify-content: center;
    flex-grow: 1.15;
    flex-basis: 0;
}
.forecast.lite .wind{
    justify-content: center;
    flex-grow: 1;
    flex-basis: 0;
    font-weight: 500;
    font-size: 1.1rem;
}
.forecast.lite .rainRate{
    flex-grow: .75;
    flex-basis: 0;
    justify-content: flex-end;
}
.forecast .wind .long-unit{
    font-size: .75rem;
    font-weight: 500;
}

.forecast :is(.temp, .humi) :is(.hi, .lo){
    white-space: nowrap;
}



.index .item{
    flex-wrap: wrap;
    align-items: center;
}
.index .btn{
    cursor: pointer;
    transition: .125s;
}
.index .btn.choose{
    background-image: linear-gradient(#282934, #282934), 
                      linear-gradient(#fffd9c, #726f45);
}
.index .btn:not(.choose){
    background-image: linear-gradient(#282934, #282934), 
                      linear-gradient(#c9c9c9, #6c6c6c);
    color: #bbb;
}
.index .btn:not(.choose):hover{
    color: #fff;
}
.index .item .value{
    width: 9.7rem;
    height: 1.5rem;
    margin-right: .25rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.index .item .subtitle{
    min-width: 7rem;
    flex: .5;
}
.index .item .desc{
    background: #576063;
    border-radius: .25rem;
    padding: .125rem .25rem;
    margin: .25rem 0;
    flex: 1;
    min-width: 10rem;
    font-size: .8rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}
.en .index .item .desc{
    line-height: 1.25;
}

@media all and (max-width: 520px) {
    .index .item .value{
        margin-right: 0;
    }
    .index .item .desc{
        margin: .25rem 0;
    }
}
@media all and (max-width: 422px) {
    .current-weather .item:has(#feel){
        order: 1;
    }
    .current-weather .item:has(#inHumi){
        order: 2;
    }
    .current-weather .item:has(#wind){
        order: 3;
    }
    .current-weather .item:has(#uv){
        order: 4;
    }
    .current-weather .item:has(#rain){
        order: 5;
    }
    .current-weather .item:has(#temp){
        order: 6;
        color: #cdcdcd;
    }
    .current-weather .item:has(#humi){
        order: 7;
        color: #cdcdcd;
    }
    .current-weather .item:has(#cloud){
        order: 8;
        color: #cdcdcd;
    }
    .current-weather .item:has(#visi){
        order: 9;
        color: #cdcdcd;
    }
    .current-weather .item:has(#dew){
        order: 10;
        color: #cdcdcd;
    }
    .current-weather .item:has(#pressure){
        order: 11;
        color: #cdcdcd;
    }
}