* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    margin: auto;

    max-width: 1300px;
    background: #005AA7;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FFFDE4, #005AA7)fixed;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FFFDE4, #005AA7)fixed;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

/* font style Merriweather and color*/
.submit-btn,
.city-input,
.main-nav {
    font-family: "Merriweather", serif;
}

.location-container,
.current-weather,
.day-tile {
    font-family: "Lato", sans-serif;
    color: rgb(63, 41, 0);
}

/* Font style for Lato */

/* styles that are similar in diffrent componets */
.links,
.form,
.current-weather {
    display: flex;
    flex-direction: row;
}

.current-weather,

.weather-type {
    flex-direction: column;
    align-items: center;
}

/* App */
.weather-app {
    width: 90%;
    margin: auto;
}

/* Header.jsx styles */
.main-nav {
    min-width: 100%;
    padding-top: 2rem;

}

.links {
    color: rgb(255, 166, 0);
    justify-content: space-between;
    align-items: center;
}

.logo-name {
    color: rgb(63, 41, 0);
    ;
}

.logo-name,
.title {
    font-size: 20px;
}

/* IconWeatherType styles */
.weather-type {
    display: flex;
    align-items: center;
}

.weather-icon {
    width: 90px;

}

.weather-condition {
    font-size: 20px;
    height: 30px;
    text-align: center;
    color: rgb(255, 166, 0);
    ;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes spinHorizontal {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes crescendo {
    0% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1.2);
    }
}

.links {
    list-style-type: none;
}

/* InputData styles */

.form {
    justify-content: center;
}

.city-input {
    width: 65%;
    border-radius: 10%;
    border: none;
    outline: none;
    transition: all .7s;
}

.city-input:focus {
    border-bottom: 4px solid orange;


}

.submit-btn {
    width: 25%;
    color: rgb(252, 245, 236);
    font-weight: 600;
    background-color: #f69537;
    border-radius: 10%;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;

}

.submit-btn:hover {
    background-color: #fd7f00;
    color: rgb(0, 140, 255);

}

.city-input,
.submit-btn {
    height: 2.5rem;
}

/* CityDate  Style*/
.location-container {
    margin: 22px 0px;
    padding-left: 25px;

    position: absolute;
    left: 10%;
}

.city-icon,
.time-icon {
    position: absolute;
    line-height: 2.5;
    left: 0px;
}

.city-icon {
    top: 12px;
}

.city {
    font-size: 25px;
    font-weight: lighter;

}

.city,
.date {
    line-height: 2.3;
}

.date {
    font-size: 12px;
}

/* Weather  */
.current-weather {

    margin: 22px 0px;
    line-height: 1.3;
    position: absolute;
    right: 10%;
}

.current-degree {
    font-size: 30px;
    font-weight: 200;
}

.feels-degree {
    font-size: 25px;
}

.weather-type {
    font-size: 22px;
}

.feelsLike-text {
    color: rgb(255, 196, 0);
    font-size: 12px;
}

/* Forecast.jsx style */
.forecast-tile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    position: relative;
top: 13rem;
margin: auto;

}

.day-tile {
    border-right: .1px solid #393e46;
    line-height: 1.3;
    text-align: center;
}

.weather-high {
    color: rgb(247, 83, 110);
}

.weather-low {
    color: #359ff0;
}

.weather-high,
.weather-low,
.tile-date {
    font-size: 15px;
}


.sun-rise,
.sun-set {
    font-size: 10px;
    color: #272622;
}

.rain-percentage,
.snow-percentage {
    font-size: 12px;

}

/* media queries: 500px and up*/
@media(min-width: 500px) {

    /* Forecast.jsx */
    .forecast-tile {
        width: 100%;
        margin: auto;
        position: relative;
        top: 200px;
    }
}

/* media queries: 700px and up*/
@media(min-width: 700px) {

    /* Header  jsx*/
    .logo-name,
    .title {
        font-size: 25px;
    }

    /* IconWeatherType jsx */
    .weather-icon {

        width: 150px;

    }

    /* CityDate  Style*/

    .city-icon {
        top: 12px;
    }

    .city {
        font-size: 30px;
    }

    .date {
        font-size: 17px;
    }

    /* Weather jsx*/
    .current-degree {
        font-size: 35px;
    }

    .feels-degree {
        font-size: 30px;
    }

    .weather-type {
        font-size: 27px;
    }

    .feelsLike-text {
        font-size: 17px;
    }

    /* Forecast.jsx style */
    .forecast-tile {
        width: 100%;
    }

    .weather-high,
    .weather-low,
    .tile-date {
        font-size: 20px;
    }


    .sun-rise,
    .sun-set {
        font-size: 15px;

    }

    .rain-percentage,
    .snow-percentage {
        font-size: 17px;

    }
}

@media(min-width: 1300px) {

    /* CityDate  Style*/
    .location-container {

        left: 12%;
    }

    /* weather jsx */
    .current-weather {

        right: 12%;
    }
}

@media(min-width: 1500px) {

    /* CityDate  Style*/
    .location-container {
        left: 16%;
    }

    /* weather jsx */
    .current-weather {


        right: 16%;
    }
}