@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

@keyframes svgColor {
    0% {
        fill: whitesmoke;
        filter: none;
        filter: none;
    }

    100% {}
}

@keyframes sun {
    0% {
        transform: translateY(-120%) translateX(-120%) rotate(720deg);
        opacity: 0;
    }
}

/* @keyframes cloud {
    0% {
        transform: translateX(1000%);
        opacity: 1;

    }


    100% {
        transform: translateX(-120%);
        opacity: 1;
    }


} */

@keyframes sunSaturate {
    0% {
        backdrop-filter: saturate(0%);
        box-shadow: none;
    }

    100% {}
}

@keyframes sunBoxShadow {
    0% {
        box-shadow: none;
        backdrop-filter: saturate(0%) brightness(100%);
    }

    100% {}
}

@keyframes pagination {
    0% {}

    100% {

        transform: scaleX(1.8);
        opacity: 0.4;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        color: rgb(255, 1, 98);
        /* transform: translateY(10%); */
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInPage {
    0% {
        opacity: 0;
    }
}

@keyframes textRunner {
    to {
        background-position: 200% center;
    }
}

.textRunner {
    background-image: linear-gradient(-90deg,
            rgba(255, 1, 98, 0.774) 0%,
            var(--text-color) 70%,
            var(--text-color) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-name: textRunner;
    animation-duration: 0.5s;
}



.fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
}

.paginator {
    animation-name: pagination;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-duration: 0.1s;
    transition-duration: 0.05s;
}

:root {
    --text-color: rgb(24, 35, 30);
    --favourite-color: rgba(215, 230, 250, 0.728);
    --favourite-color2: rgba(215, 250, 235, 0.728);
    --border-radius: 0.4vw;
    --animation-duration: 30s;
    --border-height: 0.1vw;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition-duration: 0.2s;
}

html {
    overflow-x: hidden;
    height: fit-content;

}

*:focus,
*:focus-visible {
    outline: none;
}

body {
    /* height: 100%; */
    width: 100%;
    min-height: 100vh;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1vw;
    color: var(--text-color);
    backdrop-filter: saturate(150%);
    background: url('https://i.pinimg.com/originals/38/a4/eb/38a4eb06f29162bd6df777f7a5543d57.jpg') no-repeat center / cover;
    animation-name: sunBoxShadow;
    animation-iteration-count: 1;
    animation-duration: 10s;
    box-shadow: 0px 2vw 100px 1vw rgba(255, 255, 0, 0.334) inset;
    backdrop-filter: saturate(500%) brightness(160%);

}

.sun svg {
    width: 10vw;
    height: 10vw;
    position: absolute;
    animation-name: sun;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 10s;
    color: currentColor;
    transition-duration: 1s;
}

.cloud svg {
    opacity: 0;
    width: 10vw;
    height: 10vw;
    position: absolute;
    /* top: -5%; */
    z-index: 3;
    animation-name: cloud;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 5s;
    transition-duration: 1s;

    /* transform: translateX(1020%) */
}

ul {
    list-style: none;
}

h1 {
    text-align: center;
    font-size: 2vw;
    margin-bottom: 2vw;
}

h2 {
    transition-duration: 0.3s;
    cursor: pointer;
    height: 2.222vw;
    font-size: 1.5vw;
}

h2,
h3 {
    margin-bottom: 1vw;
}

input,
button {
    height: 3vw;
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    background-color: transparent;
}

input {
    width: 50vw;
    padding-inline: 2vw;
}

button {
    cursor: pointer;
}

.container {
    max-width: 81.25vw;
    padding: 1.5vw 2.5vw 1vw;
    margin-inline: auto;
    padding-inline: 4vw;
}

/* HEADER */

.header__container {
    padding-top: 1vw;
}

.header__top {
    display: flex;
    align-items: center;
    justify-content: end;
}

.header__logo {
    display: block;
    width: fit-content;
    height: fit-content;
    z-index: 2;
}

.header__logo svg {
    max-width: 20vw;
    max-height: 5vw;
}

.header__logo svg path {
    fill: whitesmoke;
    animation-name: svgColor;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 10s;
    stroke: black;
    stroke-width: 2px;
    fill: rgb(255, 255, 0);
    filter: drop-shadow(2px 2px #bed31aad);
    filter: drop-shadow(10px 2px #000000ad);
}

/* WEATHER */

.weather__section {
    /* margin-block: 2vw; */

    padding-bottom: 2vw;
    animation-name: fadeInPage;
    animation-duration: 5s;
}

.weather__container {
    background-color: #ffffff81;
    border-radius: var(--border-radius);
    animation-name: sunSaturate;
    animation-iteration-count: 1;
    animation-duration: 7s;
    backdrop-filter: saturate(1000%);
    box-shadow: 1vw 1vw 0 0 rgba(0, 0, 0, 0.317);
}

form {
    display: contents;
}

.weather__flex-container {
    display: flex;
    flex-direction: column;
    padding: 1vw;
    border-radius: var(--border-radius);
    background-color: rgba(250, 235, 215, 0.728);

}

.weather__flex-element {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 1vw;
}

.weather__flex-element-top {
    border: 0.2vw solid var(--text-color);
    border-radius: var(--border-radius);
}

.weather__flex-element-bottom {
    justify-content: space-between;
    column-gap: 3vw;
    min-height: 18vw;
}

.search {
    max-width: 2vw;
    max-height: 2vw;
}

.weather__card {
    display: flex;
    flex-direction: column;
    flex-basis: 40%;
    align-items: center;
}

.weather__data-split {
    display: flex;
    justify-content: space-between;

}

.weather__card-left {
    /* row-gap: 2vw; */
    align-items: start;
    min-width: 19vw;
}

.weather__img-wrapper {
    width: 10vw;
    height: 4.1vw;
    display: flex;
    align-items: center;
    column-gap: 1vw;
}

.weather__img-wrapper img {
    width: 4vw;
    height: 4vw;
    transition-duration: 0.3s;
    cursor: pointer;
}

.weather__img-wrapper svg {
    width: 3vw;
    height: 3vw;
    transition-duration: 0.3s;
    cursor: pointer;
}

.weather__current-city {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    column-gap: 1.3vw;
}

.weather__city-name {
    width: auto;
    /* max-width: 14vw; */
    height: 4vw;
    word-break: break-word;
    transition-duration: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 500;
}



.weather__current-city button {
    width: 3vw;
    height: 3vw;
    display: none;
}

.weather__current-city button svg {
    width: 3vw;
    height: 3vw;
    transition-duration: 0.3s;
    cursor: pointer;
    stroke-width: 0.5px;
}

.weather__feels-like {
    width: 11vw;
}

.predict {
    display: flex;
}

.predict button {
    width: fit-content;
    height: 1.5vw;
    align-self: flex-start;
}

.predict button svg {
    width: 2vw;
    height: 1.5vw;
    pointer-events: none;
}

.predict__data {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.predict__pagination {
    display: flex;
    justify-content: end;
    column-gap: 1vw;
    align-items: flex-start;
}

.predict__pagination button {
    align-self: center;
    margin-bottom: 0.5vw;
    border-radius: 50%;
}

.predict__data .predict__day {
    width: auto;
}

.predict__data h3 {
    text-align: center;
    position: relative;
}

.predict__data h3::after {
    position: absolute;
    content: '';
    background-color: var(--text-color);
    width: 0;
    height: var(--border-height);
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    transition-duration: 0.2s;
}



.predict__feels {
    width: 16vw;
}

.predict__month-img-wrapper {
    display: flex;
    justify-content: end;
    column-gap: 2vw;
    align-items: center;
    max-width: 12vw;
    align-self: flex-end;
}

.predict__month-day {
    display: flex;
    justify-content: end;
    column-gap: 1vw;
    align-items: center;
    max-width: 16vw;
    align-self: flex-end;
}

.predict__img-wrapper {
    align-self: flex-end;
}

.predict__img-wrapper img {
    width: 4vw;
    height: 4vw;
    transition-duration: 0.3s;
    cursor: pointer;

}

.predict__left,
.predict__right {
    height: 1.5vw;
}

.grey path {
    fill: grey;

}

.weather__card-right {
    flex-basis: 50%;
    display: flex;
    border: 0.3vw solid var(--text-color);
    border-radius: var(--border-radius);
    padding: 0.5vw 2vw;
    align-self: flex-start;
    /* width: 40vw;
    max-width: 40vw; */
}

.weather__locations-list {
    align-self: start;
    display: flex;
    flex-direction: column;
    row-gap: 1vw;
    width: 22vw;
}

.weather__locations-item {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 2.5vw;
    cursor: pointer;
    border-radius: 15px;
}

.weather__locations-item span {
    transition-duration: 0.2s;
}

.weather__locations-item button {
    width: 1.9vw;
    height: 1.9vw;
    cursor: pointer;
    transition-duration: 0.2s;
    display: flex;
    align-items: center;

}

.deleteImg {
    width: 1.8vw;
    height: 1.8vw;
    transition-duration: 0.2s;
    pointer-events: none;
}


@media (max-width: 1170px) {

    .weather__img-wrapper img {
        width: 6vw;
        height: 6vw;
    }

    .weather__img-wrapper svg {
        width: 10vw;
        height: 10vw;
    }

    .predict__img-wrapper img {
        width: 6vw;
        height: 6vw;
    }

    body {
        font-size: 1.4vw;
    }

    .weather__card-left * {
        width: 18vw;
        /* margin-bottom: 0.5vw; */
    }

    .weather__city-name {
        width: auto;
    }

    .weather__flex-element-bottom {
        min-height: 24vw;
    }

    .predict__data div {
        width: 29vw;
    }

    .predict__img-wrapper img {
        margin-top: 0.7vw;
    }

    .container {
        max-width: 95vw;
    }

    .weather__current-city {
        margin-block: 1vw;
    }

    .predict__month-img-wrapper {
        max-width: 15vw;
    }

    .weather__current-city button {
        width: 4vw;
        height: 4vw;
    }

    .weather__current-city button svg {
        width: 4vw;
        height: 4vw;
    }

}

@media (min-width: 992px) {
    .weather__flex-element-top:hover {
        background-color: var(--favourite-color);
    }

    .weather__locations-item button:hover {
        transform: scale(1.2);
    }

    .weather__locations-item span:hover {
        transform: scale(1.1);
        color: rgb(215, 74, 102);
    }

    .weather__current-city button svg:hover {
        transform: scale(1.2);
    }

    .weather__img-wrapper img:hover {
        transform: rotate(360deg);
    }

    .predict__img-wrapper img:hover {
        transform: rotate(360deg);
    }

    .predict__left:hover {
        transform: scale(1.2);
        background-color: var(--favourite-color2);

    }

    .predict__right:hover {
        transform: scale(1.2);
        background-color: var(--favourite-color2);
    }

    .weather__locations-item:hover {
        background-color: var(--favourite-color);

    }

    .weather__city-name:hover {
        color: rgb(215, 74, 102);
    }
}

@media (max-width: 993px) {
    body {
        font-size: 1.7vw;
    }

    h1 {
        font-size: 3vw;
    }

    h2 {
        font-size: inherit;
    }

    h3 {
        margin-bottom: 0;
    }

    .weather__locations-list {
        row-gap: 2vw;
    }

    .weather__locations-item {
        font-size: 1.3vw;
    }

    .weather__flex-element-bottom {

        align-items: center;
        row-gap: 4vw;
        min-height: 30vw;

    }

    .weather__card-left * {
        width: 26vw;
        /* margin-bottom: 0.3vw; */
    }

    .weather__card-left h2 {
        margin-top: 1vw;
        margin-bottom: 2vw;
    }

    .weather__current-city {
        margin-block: 2vw;
    }

    .weather__current-city button {
        margin-top: -1.5vw;
    }

    .weather__city-name {
        width: 17vw;
    }

    .weather__card-right h3 {
        font-size: 1.7vw;
    }

    .predict__month-img-wrapper {
        max-width: 17vw;
    }

    .predict button {
        height: 4vw;
    }

    .predict button svg {
        width: 6vw;
        height: 4vw;
    }

    .weather__card-left {
        width: 25vw;
    }

    .weather__locations-item button {
        width: 2vw;
        height: 2vw;
    }

    .weather__locations-item button svg {

        width: 2vw;
        height: 2vw;
    }
}

@media (max-width: 769px) {

    .search {
        max-width: 4vw;
        max-height: 4vw;
    }

    form button {
        height: 4vw;
        align-self: center;
    }

    input {
        height: 6vw;
        width: 70vw;
    }

    h2 {
        height: auto;
    }

    body {
        font-size: 3.5vw;
    }

    .header__logo svg {
        max-width: 30vw;
        max-height: 10vw;
    }

    .weather__flex-element-bottom {
        min-height: 124vw;
        flex-direction: column;
        row-gap: 5vw;
        font-size: inherit;

    }

    .weather__card-right h3 {
        font-size: inherit;
    }

    .weather__locations-list {
        width: 65vw;
        row-gap: 5vw;
        flex-direction: row;
        column-gap: 5vw;
        flex-wrap: wrap;
    }

    .weather__locations-item {
        font-size: 3vw;
        column-gap: 4vw;
        width: 30vw;
        max-width: 30vw;
        height: 10vw;
    }

    .weather__locations-item button {
        width: 4vw;
        height: 4vw;
    }

    .deleteImg {
        width: 4vw;
        height: 4vw;
    }


    .weather__data-split {
        flex-direction: column;
        row-gap: 5vw;
    }

    .weather__card-left * {
        width: 70vw;
        row-gap: 7vw;
        /* margin-bottom: 0.3vw; */
    }

    .weather__card-right {
        width: 84vw;

    }

    .weather__card-left {
        align-items: center;
        width: 80vw;
    }

    .predict__data {
        width: 80vw;
        align-items: flex-end;
        align-content: center;
    }

    .predict__data div {
        width: 70vw;
    }

    .predict__month-img-wrapper {
        max-width: 37vw;
    }

    .predict__pagination {
        align-self: center;
        justify-content: center;
    }

    .predict button {
        height: 8vw;
    }


    .predict button svg {
        width: 12vw;
        height: 8vw;
    }

    .weather__img-wrapper {
        height: auto;
    }

    .weather__img-wrapper img {
        width: 18vw;
        height: 18vw;
    }

    .predict__img-wrapper img {
        width: 18vw;
        height: 18vw;
    }

    .weather__img-wrapper svg {
        width: 15vw;
        height: 15vw;
    }

    .weather__current-city button {
        width: 6vw;
        height: 6vw;
    }

    .weather__current-city button svg {
        width: 6vw;
        height: 6vw;
    }

    .weather__card-right {
        max-width: 90vw;
        width: 70vw;
        align-self: center;
    }
}

@media (max-width: 481px) {
    .weather__flex-element-bottom {
        min-height: 120vw;
    }
}