* {
    font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif
}
@media(min-width:380px) and (max-width:414px) {
    .n-d {
        margin-bottom:-450px!important
    }
    .temp-box {
        position:absolute;
        top:200px!important
    }
    .hide {
        position:absolute;
        bottom: calc(5vh + 190px) !important;
    }
}
@media(min-width:820px) and (max-width:900px) and (min-height:1000px) and (max-height:1200px) {
    .n-d {
        margin-bottom:-500px!important;
        font-size:1.5rem
    }
    .temp-box {
        position:absolute;
        margin:0 auto
    }
    .temp-box img {
        width:750px;
        height:450px!important
    }
    .weather-condition-date h1 {
        font-size:5rem!important
    }
    .weather-condition-date .day {
        font-size:1rem!important
    }
    .weather-condition-date,.day-of-month,.month {
        font-size:1rem!important
    }
    .hide {
        display:none!important;
        position:absolute;
        bottom:240px!important
    }
}
@media(max-height:600px) {
    .location {
        margin-top:-30px!important;
        align-items:baseline;
        width:100vw;
        justify-content:left!important;
        margin-left:60px;
        height:20px
    }
    .weather-gif-div {
    }
    .condition {
        font-size:40px!important
    }
    .weather-condition-date {
        margin-top:220px!important
    }
    .date {
        margin-top:3px!important
    }
    .weather-gif-div img {
        position:absolute;
        width:280px;
        height:180px!important;
        top:35px!important
    }
    .temp {
        position:absolute!important;
        top:10px!important;
        margin:0!important;
        right:20px;
        font-size:48px!important
    }
    .days-info {
        position:absolute!important;
        margin:0!important;
        bottom:20px!important;
        margin-bottom:-30px!important
    }
    .days {
        height:90px!important;
        width:70px!important
    }
    .days h3,p {
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif;
        font-size:12px
    }
    .days img {
        width:50px!important;
        height:50px!important
    }
    .hide {
        display:none!important
    }
    .n-d {
        position:absolute;
        bottom:130px
    }
    .sun-rise-sun-set img {
        width:20px
    }
    .sun-rise-sun-set h3 {
        font-size:12px!important
    }
    .temp-box {
        display:flex!important
    }
    .day {
        margin:0!important
    }
    .btn-days {
        padding-top:10px!important
    }
    .d-7 {
        position:absolute;
        right:30px
    }
    .tomorrow-box {
        width:50%!important;
        position:absolute;
        left:160px;
        top:10px
    }
    .img2 img {
        width:90px!important
    }
    .tomorrow-weather h3 {
        font-size:12px!important
    }
    .tomorrow-weather p {
        font-size:18px!important
    }
    .sun-rise-sun-set {
        position:absolute;
        top:90px;
        justify-content:center;
        align-items:center;
        width:300px!important;
        right:200px!important
    }
}
@media(max-width:999px) {
    body {
        orientation:portrait!important;
        transform:rotate(0deg)!important
    }
    .the-grandfather {
        display:none
    }
    * {
        orientation:portrait!important;
        margin:0;
        padding:0
    }
    .loading1 {
        position:relative;
        width:200px;
        height:200px;
        filter:url(#gooey)
    }
    .loading1 span {
        position:absolute;
        top:0;
        left:160px;
        width:100%;
        height:100%;
        display:block;
        animation:animate 4s ease-in-out infinite;
        animation-delay:calc(0.2s * var(--i))
    }
    .loading1 span::before {
        content:'';
        position:absolute;
        top:0;
        left:calc(50% - 20px);
        width:40px;
        height:40px;
        background:linear-gradient(#78e4f7,#0894f1);
        border-radius:50%
    }
    @keyframes animate {
        0% {
            transform:rotate(0deg)
        }
        50%,100% {
            transform:rotate(360deg)
        }
    }
    .invisible {
        display:none
    }
    .visible {
        z-index:90000000000000000000000;
        position:fixed;
        top:0;
        bottom:0;
        right:0;
        left:0;
        background:linear-gradient(to bottom,rgba(59,51,51,1),rgba(66,72,66,1),rgba(82,82,101,1));
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:20px
    }
    ::-webkit-scrollbar {
        display:none
    }
    .container {
        width:100%;
        height:100%
    }
    .page {
        position:sticky;
        top:0;
        width:100%;
        height:100vh;
        background-color:#d3d3d3;
        overflow:hidden
    }
    #page1 {
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        margin:0;
        position:relative;
        background-image:url('mobile-weather.png')!;
        background:linear-gradient(to bottom,#405fa1,#090b1d,#153f9f);
        background-size:cover
    }
    .search {
        display:flex;
        align-items:center!important;
        flex-direction:column;
        justify-content:center!important;
        text-align:center!important;
        position:absolute;
        top:20px;
        width:250px;
        margin:0 auto!important
    }
    .search input {
        text-align:center;
        width:100%;
        position:relative;
        padding:8px 2px;
        border-radius:10px;
        border-top-right-radius:1px;
        border-bottom-right-radius:1px;
        border:none;
        outline:none;
        background-color:#0e2e53;
        color:#fff
    }
    .btn {
        position:absolute;
        top:0!important;
        right:-42px;
        padding:0 15px;
        height:32px;
        border-bottom-right-radius:10px;
        border-top-right-radius:10px;
        background-color:#1f4cb5
    }
    .input {
        width:100%
    }
    .location {
        color:#f5f5f5;
        display:flex;
        flex-direction:row!important;
        align-items:center;
        justify-content:center
    }
    .location h1 {
        margin-top:10px;
        margin-left:5px;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif;
        font-weight:300
    }
    .temp-box {
        display:flex;
        align-items:center!important;
        justify-content:center!important;
        flex-direction:column;
        margin-top:-130px!important
    }
    .temp {
        text-align:center!important;
        font-size:130px;
        color:#b0b5d2;
        font-family:Arial,Helvetica,sans-serif
    }
    .weather-gif-div {
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        text-align:center;
        margin-top:-130px
    }
    .weather-gif-div img {
        height:300px
    }
    .weather-condition-date {
        margin-top:-50px
    }
    .condition {
        color:#fff;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif;
        font-weight:400
    }
    .date {
        color:#979bb6;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif
    }
    .days img {
        height:60%;
        width:100%
    }
    .weather-condition-date {
        text-align:center;
        flex-grow:1
    }
    .days-info {
        position:absolute;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:90%;
        overflow-x:auto;
        white-space:nowrap;
        color:#fff;
        bottom:110px
    }
    .days {
        padding:0;
        border:1px solid #757575;
        width:65px;
        height:100px;
        border-radius:20px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center
    }
    .days:hover {
        background:radial-gradient(circle at center,#023f6e 40px,#00489b 80px)
    }
    .days p {
        margin-top:-15px
    }
    .days h3 {
        margin-bottom:-10px
    }
    .days-info>div {
        flex-shrink:0;
        margin-right:20px
    }
    .sun-rise-sun-set h3 {
        color:#fff;
        font-size:14px;
        font-family:franklin gothic medium,arial narrow,Arial,sans-serif
    }
    .sun-rise-sun-set h5 {
        color:#999;
        font-size:10px;
        font-family:courier new,Courier,monospace;
        margin-top:2px
    }
    #page2 {
        background-color:#091c36
    }
    .big-banner {
        height:40%;
        background-color:#247cef;
        border-radius:20px;
        position:relative
    }
    .btn-days {
        color:#fff;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif;
        display:flex;
        align-items:center!important;
        justify-content:space-between;
        width:60%;
        padding-top:30px
    }
    .back-btn {
        margin-left:10px;
        border-radius:100%;
        object-fit:cover;
        height:50px;
        width:50px;
        background-color:#6b95c3
    }
    .tomorrow-box {
        display:flex;
        align-items:center
    }
    .img2 img {
        width:150px
    }
    .tomorrow-weather {
        display:flex;
        flex-direction:column!important;
        color:#fff;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif
    }
    .tomorrow-weather h3 {
        font-size:25px
    }
    .tomorrow-weather .temp1 {
        font-size:45px
    }
    .remaing-days {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        font-family:gill sans,gill sans mt,Calibri,trebuchet ms,sans-serif
    }
    .remaing-days-container {
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        height:60vh;
        overflow-x:inherit
    }
    .next-day {
        display:flex;
        align-items:center;
        justify-content:space-evenly;
        border:2px solid #28345d;
        height:100px;
        width:90%;
        border-radius:15px;
        margin-top:20px
    }
    .next-day img {
        margin-left:-20px!important;
        margin-right:20px!important
    }
    .date1 {
        width:100px
    }
    .day {
        color:#fff;
        font-size:20px;
        margin-bottom:2px
    }
    .month,.day-of-month {
        font-size:12px;
        color:#808091
    }
    .condition {
        font-size:25px;
        color:#6f7dae
    }
    .temp2,.day6-temp {
        color:#fff!important;
        font-size:18px
    }
    .navbar {
        position:fixed;
        bottom:0;
        width:100%;
        background-color:#333;
        color:#fff;
        text-align:center
    }
    button {
        background-color:#333;
        border:none;
        color:#fff;
        padding:14px 20px;
        cursor:pointer
    }
    button:hover {
        background-color:#555
    }
    button.active {
        background-color:#555
    }
}

@media(min-width:0px) and (max-width:900px) {
    .days-info {
        bottom:45px!important
    }
    .temp-box {
        margin-top:-40px!important
    }
    .sun-rise-sun-set {
        margin-top:0px!important 
    }
    .n-d {
        margin-top:15px!important
    }
    .days-info {
        bottom:30px
    }
    .btn-days {
        padding:10px
    }
    .next-day p {
        text-align:center;
        font-size:16px!important;
        width:60px!important
    }
    .date1 {
        width:70px!important
    }
    .day {
        font-size:15px!important
    }
    .temp2 {
        color:#fff!important
    }
}


@media(min-width:1000px) {
    .container {
        display:none
    }
    body {
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        background:#000
    }
    .loading1 {
        position:relative;
        width:200px;
        height:200px;
        filter:url(#gooey)
    }
    .loading1 span {
        position:absolute;
        top:0;
        left:160px;
        width:100%;
        height:100%;
        display:block;
        animation:animate 4s ease-in-out infinite;
        animation-delay:calc(0.2s * var(--i))
    }
    .loading1 span::before {
        content:'';
        position:absolute;
        top:0;
        left:calc(50% - 20px);
        width:40px;
        height:40px;
        background:linear-gradient(#78e4f7,#0894f1);
        border-radius:50%
    }
    @keyframes animate {
        0% {
            transform:rotate(0deg)
        }
        50%,100% {
            transform:rotate(360deg)
        }
    }
    body {
        background-color:#121212;
        color:#fff;
        font-family:Arial,sans-serif;
        height:100vh;
        margin:0;
        padding:0;
        overflow:hidden
    }
    .invisible {
        display:none
    }
    .visible {
        z-index:90000000000000000000000;
        position:fixed;
        top:0;
        bottom:0;
        right:0;
        left:0;
        background:linear-gradient(to bottom,rgba(59,51,51,1),rgba(66,72,66,1),rgba(82,82,101,1));
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:20px
    }
    .the-grandfather {
        display:flex;
        align-items:center;
        width:100%;
        height:100%;
        background-image:url("Broken clouds.mp4");
        background-size:cover;
        background-repeat:no-repeat
    }
    #background-video {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        z-index:-1;
        transition:opacity .5s ease-in-out
    }
    #background-video.hidden {
        opacity:0
    }
    .the-parent-left {
        backdrop-filter:blur(20px);
        border-radius:10px;
        z-index:2;
        height:100%;
        width:calc(15% + 50px)
    }
    .search {
        position:relative;
        margin-top:20px;
        width:100%;
        height:30px;
        text-align:center
    }
    .search input {
        position:relative!important;
        background-color:transparent;
        color:#fff;
        border:none;
        margin-top:10px;
        border-bottom:1px solid #fff!important;
        outline:none;
        width:90%;
        height:30px
    }
    .search input::placeholder {
        color:#dddcdc;
        font-family:Verdana,Geneva,Tahoma,sans-serif
    }
    #searchBtn {
        position:absolute;
        border:none;
        background-color:transparent;
        top:10px;
        bottom:0;
        color:#fff;
        font-size:16px;
        right:20px
    }
    .btn {
    }
    .temp-parent {
        margin-top:10px
    }
    .temp-text {
        text-align:center;
        font-size:55px
    }
    .img-div {
        margin-top:-20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-left:10px;
        margin-right:10px
    }
    .img-div img {
        width:60px
    }
    .temp-info {
        width:100px;
        display:flex;
        align-items:center;
        justify-content:space-between
    }
    .s-d {
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:30px
    }
    .yellow-circle {
        font-size:12px;
        color:#ff0
    }
    .dark-yellow-circle {
        font-size:12px;
        color:#9e9e28
    }
    .orange-circle {
        padding-right:2px;
        font-size:12px;
        color:orange
    }
    .red-circle {
        font-size:12px;
        color:#b84545;
        padding-right:2px
    }
    .safe-dangerous-child {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:80%
    }
    .main-temp {
        margin-top:25px;
        margin-left:-40px;
        font-size:30px;
        color:#f1d06c!important
    }
    .weather-box-parent {
        display:grid;
        place-items:center
    }
    .weather-box {
        color:#f1d06c;
        display:grid;
        padding:0;
        margin:0;
        border:1px solid #a0a0a0;
        width:33%;
        height:180px;
        border-radius:10px;
        margin-top:50px;
        padding:1px 70px;
        overflow:hidden
    }
    .weather-box svg {
        margin-left:-170px;
        width:990px!important
    }
    .bottom-text h3 {
        font-size:15px;
        margin-left:18px;
        text-align:left
    }
    .bottom-text {
        text-align:left;
        width:350px;
        margin-top:calc(20% + 10px)
    }
    .bottom-text p {
        margin:0 20px;
        font-size:15px
    }
    @media(min-width:1000px) and (max-width:1800px) {
        .temp-text {
            text-align:center;
            font-size:50px
        }
        .s-d {
            font-size:13px
        }
        .weather-box {
            margin-top:20px!important;
            width:30%!important;
            height:160px!important;
            overflow:hidden
        }
        .svg-text1 {
            position:absolute;
            top:70px!important;
            left:20px
        }
        .svg-text2 {
            position:absolute;
            top:90px!important;
            left:80px
        }
        .svg-text3 {
            top:90px!important
        }
        .weather-box svg {
            margin-top:-20px
        }
        .bottom-text p {
            width:220px;
            font-size:10px
        }
        .the-parent-left {
            width:25%
        }
        .img-div {
            margin-top:10px!important
        }
        .search {
            margin-top:10px
        }
        .temp-parent {
            margin-top:30px
        }
        .the-parent-right {
            width:75%
        }
        .weather-condition {
            line-height:55px;
            width:290px;
            font-size:50px
        }
        .weather-status {
            margin-left:40px;
            margin-top:calc(1% + 10px)!important
        }
        .date {
            margin-left:calc(4% + 10px);
            margin-top:calc(1% + 10px)!important
        }
        .high-low-info {
            font-size:12px;
            margin:calc(3% + 10px)!important
        }
        .days-info {
            margin-top:calc(-3% + 10px)!important
        }
    }
    .the-parent-right {
        overflow:hidden;
        width:85%;
        height:100vh;
        display:flex;
        flex-direction:column
    }
    .weather-condition {
        line-height:55px;
        width:290px;
        font-size:50px
    }
    .weather-status {
        margin-left:40px;
        margin-top:calc(2% + 10px)
    }
    .date {
        margin-left:calc(4% + 10px);
        margin-top:calc(3% + 10px)
    }
    .high-low-info {
        margin:calc(5% + 10px) 40px
    }
    .high,.low {
        display:flex;
        justify-content:space-between;
        width:100%;
        padding:10px
    }
    .high-info,.low-info {
        font-size:13px;
        margin-right:10px
    }
    .svg-container {
        width:100%;
        margin-top:calc(-16% + 10px)
    }
    .days-info {
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin:calc(-2% + 10px) 60px;
        text-align:center
    }
    .line {
        background-color:tan;
        width:80px;
        height:3px;
        border-radius:10px;
        display:block;
        margin-top:10px
    }
    .fade-line {
        background-color:tan;
        width:60px;
        height:3px;
        border-radius:10px;
        display:block;
        margin-top:10px
    }
}